diff --git a/apps/studio/src/ipc-handlers.ts b/apps/studio/src/ipc-handlers.ts
index f29669881a..f2c347f8ec 100644
--- a/apps/studio/src/ipc-handlers.ts
+++ b/apps/studio/src/ipc-handlers.ts
@@ -186,7 +186,12 @@ export { getDefaultSiteDirectory, saveDefaultSiteDirectory };
 
 export { importSite, exportSite } from 'src/modules/import-export/lib/ipc-handlers';
 
-export { getUserDeskConfig, saveUserDeskConfig } from 'src/modules/desks/lib/ipc-handlers';
+export {
+	getSiteDeskConfig,
+	getUserDeskConfig,
+	saveSiteDeskConfig,
+	saveUserDeskConfig,
+} from 'src/modules/desks/lib/ipc-handlers';
 
 export {
 	studioCodeSendMessage,
diff --git a/apps/studio/src/modules/desks/lib/ipc-handlers.ts b/apps/studio/src/modules/desks/lib/ipc-handlers.ts
index a799f297df..11963a1e96 100644
--- a/apps/studio/src/modules/desks/lib/ipc-handlers.ts
+++ b/apps/studio/src/modules/desks/lib/ipc-handlers.ts
@@ -60,6 +60,12 @@ function assertDeskConfig( value: unknown ): asserts value is DeskConfig {
 	}
 }
 
+function assertSiteId( siteId: unknown ): asserts siteId is string {
+	if ( typeof siteId !== 'string' || ! siteId ) {
+		throw new Error( 'Invalid site desk config: expected site id.' );
+	}
+}
+
 export async function getUserDeskConfig(
 	_event: IpcMainInvokeEvent
 ): Promise< DeskConfig | undefined > {
@@ -86,3 +92,37 @@ export async function saveUserDeskConfig(
 		await unlockAppdata();
 	}
 }
+
+export async function getSiteDeskConfig(
+	_event: IpcMainInvokeEvent,
+	siteId: string
+): Promise< DeskConfig | undefined > {
+	assertSiteId( siteId );
+	const userData = await loadUserData();
+	return userData.desks?.sites?.[ siteId ];
+}
+
+export async function saveSiteDeskConfig(
+	_event: IpcMainInvokeEvent,
+	siteId: string,
+	config: DeskConfig
+): Promise< void > {
+	assertSiteId( siteId );
+	assertDeskConfig( config );
+	await lockAppdata();
+	try {
+		const userData = await loadUserData();
+		await saveUserData( {
+			...userData,
+			desks: {
+				...userData.desks,
+				sites: {
+					...userData.desks?.sites,
+					[ siteId ]: config,
+				},
+			},
+		} );
+	} finally {
+		await unlockAppdata();
+	}
+}
diff --git a/apps/studio/src/preload.ts b/apps/studio/src/preload.ts
index dd32066385..3ab35ecc5e 100644
--- a/apps/studio/src/preload.ts
+++ b/apps/studio/src/preload.ts
@@ -223,6 +223,9 @@ const api: IpcApi = {
 		ipcRendererInvoke( 'setSessionEnvironment', sessionId, environment ),
 	getUserDeskConfig: () => ipcRendererInvoke( 'getUserDeskConfig' ),
 	saveUserDeskConfig: ( config ) => ipcRendererInvoke( 'saveUserDeskConfig', config ),
+	getSiteDeskConfig: ( siteId ) => ipcRendererInvoke( 'getSiteDeskConfig', siteId ),
+	saveSiteDeskConfig: ( siteId, config ) =>
+		ipcRendererInvoke( 'saveSiteDeskConfig', siteId, config ),
 };
 
 contextBridge.exposeInMainWorld( 'ipcApi', api );
diff --git a/apps/ui/src/data/core/connectors/ipc/index.ts b/apps/ui/src/data/core/connectors/ipc/index.ts
index 807d0df5cf..1137c6caaf 100644
--- a/apps/ui/src/data/core/connectors/ipc/index.ts
+++ b/apps/ui/src/data/core/connectors/ipc/index.ts
@@ -606,6 +606,14 @@ export function createIpcConnector(): Connector {
 			await ipcApi.saveUserDeskConfig( config );
 		},
 
+		async getSiteDeskConfig( siteId ): Promise< DeskConfig | undefined > {
+			return ( await ipcApi.getSiteDeskConfig( siteId ) ) as DeskConfig | undefined;
+		},
+
+		async saveSiteDeskConfig( siteId, config ): Promise< void > {
+			await ipcApi.saveSiteDeskConfig( siteId, config );
+		},
+
 		async openSiteFolder( siteId ): Promise< void > {
 			const sitePath = await resolveSiteFolder( siteId );
 			ipcApi.openLocalPath( sitePath );
diff --git a/apps/ui/src/data/core/types.ts b/apps/ui/src/data/core/types.ts
index 5ab56b0a96..2203e544b8 100644
--- a/apps/ui/src/data/core/types.ts
+++ b/apps/ui/src/data/core/types.ts
@@ -235,6 +235,8 @@ export interface Connector {
 	// Desks
 	getUserDeskConfig(): Promise< DeskConfig | undefined >;
 	saveUserDeskConfig( config: DeskConfig ): Promise< void >;
+	getSiteDeskConfig( siteId: string ): Promise< DeskConfig | undefined >;
+	saveSiteDeskConfig( siteId: string, config: DeskConfig ): Promise< void >;
 
 	// Open the given site's folder in the system file manager, preferred
 	// editor, or preferred terminal. When no editor/terminal preference is
diff --git a/apps/ui/src/data/queries/use-desk-config.ts b/apps/ui/src/data/queries/use-desk-config.ts
index ddcbe9466f..0a87e39999 100644
--- a/apps/ui/src/data/queries/use-desk-config.ts
+++ b/apps/ui/src/data/queries/use-desk-config.ts
@@ -2,24 +2,31 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useConnector } from '@/data/core';
 import type { DeskConfig } from '@/data/core';
 
-export const USER_DESK_CONFIG_QUERY_KEY = [ 'desk-config', 'user' ] as const;
+const userDeskConfigQueryKey = [ 'desk-config', 'user' ] as const;
+const siteDeskConfigQueryKey = ( siteId: string ) => [ 'desk-config', 'site', siteId ] as const;
+const deskConfigQueryKey = ( siteId?: string ) =>
+	siteId ? siteDeskConfigQueryKey( siteId ) : userDeskConfigQueryKey;
 
-export function useUserDeskConfig() {
+export function useDeskConfig( siteId?: string ) {
 	const connector = useConnector();
 	return useQuery( {
-		queryKey: USER_DESK_CONFIG_QUERY_KEY,
-		queryFn: () => connector.getUserDeskConfig(),
+		queryKey: deskConfigQueryKey( siteId ),
+		queryFn: () =>
+			siteId ? connector.getSiteDeskConfig( siteId ) : connector.getUserDeskConfig(),
 	} );
 }
 
-export function useSaveUserDeskConfig() {
+export function useSaveDeskConfig( siteId?: string ) {
 	const connector = useConnector();
 	const queryClient = useQueryClient();
 	return useMutation( {
 		mutationFn: ( config: DeskConfig ) =>
-			connector.saveUserDeskConfig( config ).then( () => config ),
+			( siteId
+				? connector.saveSiteDeskConfig( siteId, config )
+				: connector.saveUserDeskConfig( config )
+			).then( () => config ),
 		onSuccess: ( config ) => {
-			queryClient.setQueryData( USER_DESK_CONFIG_QUERY_KEY, config );
+			queryClient.setQueryData( deskConfigQueryKey( siteId ), config );
 		},
 	} );
 }
diff --git a/apps/ui/src/ui-desks/chats/index.tsx b/apps/ui/src/ui-desks/chats/index.tsx
index 95ffbcf29e..f81f4c6846 100644
--- a/apps/ui/src/ui-desks/chats/index.tsx
+++ b/apps/ui/src/ui-desks/chats/index.tsx
@@ -172,6 +172,7 @@ export function DeskChats( { siteId }: DeskChatsProps ) {
 							{ selectedSessionId ? (
 								<DeskSessionSurface
 									key={ selectedSessionId }
+									siteId={ siteId }
 									sessionId={ selectedSessionId }
 									onSwitchSession={ handleSwitchSession }
 									autoFocus={ autoFocusSessionId === selectedSessionId }
diff --git a/apps/ui/src/ui-desks/chats/session-surface.tsx b/apps/ui/src/ui-desks/chats/session-surface.tsx
index 328a75e538..060284a5e5 100644
--- a/apps/ui/src/ui-desks/chats/session-surface.tsx
+++ b/apps/ui/src/ui-desks/chats/session-surface.tsx
@@ -18,6 +18,7 @@ import { SessionUIProvider } from '@/hooks/use-session-ui';
 import styles from './style.module.css';
 
 interface DeskSessionSurfaceProps {
+	siteId?: string;
 	sessionId: string;
 	onSwitchSession: ( sessionId: string ) => void;
 	autoFocus?: boolean;
@@ -43,6 +44,7 @@ function Frame( { composer, scrollRef, children }: FrameProps ) {
 }
 
 function DeskSessionSurfaceContent( {
+	siteId,
 	sessionId,
 	onSwitchSession,
 	autoFocus = false,
@@ -53,9 +55,10 @@ function DeskSessionSurfaceContent( {
 	const ownerSite = ownerSitePath
 		? sites?.find( ( candidate ) => candidate.path === ownerSitePath )
 		: undefined;
-	const { data: connectedSites } = useConnectedWpcomSites( ownerSite?.id );
+	const ownerSiteId = ownerSite?.id ?? siteId;
+	const { data: connectedSites } = useConnectedWpcomSites( ownerSiteId );
 	const liveSite = pickLiveSite( connectedSites );
-	const effectiveEnvironment = useSessionEffectiveEnvironment( data?.summary, ownerSite?.id );
+	const effectiveEnvironment = useSessionEffectiveEnvironment( data?.summary, ownerSiteId );
 	const {
 		isRunning,
 		hasActiveRun,
@@ -141,7 +144,7 @@ function DeskSessionSurfaceContent( {
 						effectiveEnvironment={ effectiveEnvironment }
 						liveSite={ liveSite }
 						entries={ data.entries }
-						ownerSiteId={ ownerSite?.id }
+						ownerSiteId={ ownerSiteId }
 						onSwitchSession={ onSwitchSession }
 						autoFocus={ autoFocus }
 					/>
diff --git a/apps/ui/src/ui-desks/chrome/create-menu.tsx b/apps/ui/src/ui-desks/chrome/create-menu.tsx
index 85c7fc8984..7b343aac9a 100644
--- a/apps/ui/src/ui-desks/chrome/create-menu.tsx
+++ b/apps/ui/src/ui-desks/chrome/create-menu.tsx
@@ -3,16 +3,25 @@ import { __ } from '@wordpress/i18n';
 import { comment, download, globe, plus } from '@wordpress/icons';
 import { Icon } from '@wordpress/ui';
 import * as Menu from '@/components/menu';
+import { useDesk } from '@/ui-desks/desk/provider';
+import { getCreatableWidgetDefinitions } from '@/ui-desks/widgets/registry';
 import { DeskHeaderIconButton } from './header-button';
 import styles from './style.module.css';
+import type { DeskChatsSearch } from '../chats/search';
 
 export function DeskCreateMenu() {
 	const navigate = useNavigate();
+	const desk = useDesk();
+	const creatableWidgetDefinitions = getCreatableWidgetDefinitions();
 
 	const createChat = () => {
 		void navigate( {
-			to: '/',
-			search: { chats: true, newChat: Date.now() },
+			to: '.',
+			search: ( previous: DeskChatsSearch ) => ( {
+				...previous,
+				chats: true,
+				newChat: Date.now(),
+			} ),
 		} );
 	};
 
@@ -30,6 +39,17 @@ export function DeskCreateMenu() {
 				render={ <DeskHeaderIconButton icon={ plus } label={ __( 'Create new' ) } /> }
 			/>
 			<Menu.Popup side="bottom" align="start" className={ styles.popup }>
+				{ creatableWidgetDefinitions.map( ( definition ) => (
+					<Menu.Item
+						key={ definition.type }
+						disabled={ ! desk.canAddWidgets }
+						onClick={ () => desk.addWidget( definition.type ) }
+					>
+						{ definition.icon && <Icon icon={ definition.icon } /> }
+						<span>{ definition.labels.add() }</span>
+					</Menu.Item>
+				) ) }
+				{ creatableWidgetDefinitions.length > 0 && <Menu.Separator /> }
 				<Menu.Item onClick={ createChat }>
 					<Icon icon={ comment } />
 					<span>{ __( 'New chat' ) }</span>
diff --git a/apps/ui/src/ui-desks/chrome/index.tsx b/apps/ui/src/ui-desks/chrome/index.tsx
index 888918290d..0fdabab671 100644
--- a/apps/ui/src/ui-desks/chrome/index.tsx
+++ b/apps/ui/src/ui-desks/chrome/index.tsx
@@ -22,10 +22,14 @@ export function DeskHeader( { children }: DeskHeaderProps ) {
 	);
 }
 
-export function DeskChrome() {
+interface DeskChromeProps {
+	siteId?: string;
+}
+
+export function DeskChrome( { siteId }: DeskChromeProps ) {
 	return (
 		<DeskHeader>
-			<DeskMenu />
+			<DeskMenu siteId={ siteId } />
 			<DeskChatsTrigger />
 			<DeskCreateMenu />
 		</DeskHeader>
diff --git a/apps/ui/src/ui-desks/chrome/user-menu.tsx b/apps/ui/src/ui-desks/chrome/user-menu.tsx
index 8f4b4a69bb..885e36b09f 100644
--- a/apps/ui/src/ui-desks/chrome/user-menu.tsx
+++ b/apps/ui/src/ui-desks/chrome/user-menu.tsx
@@ -17,14 +17,14 @@ import type { SiteDetails } from '@/data/core';
 const WPCOM_PROFILE_URL = 'https://wordpress.com/me';
 
 interface DeskMenuProps {
-	activeSiteId?: string;
+	siteId?: string;
 }
 
 function getSiteIconSeed( site: SiteDetails ) {
 	return `${ site.id }:${ site.name }:${ site.path }`;
 }
 
-export function DeskMenu( { activeSiteId }: DeskMenuProps ) {
+export function DeskMenu( { siteId }: DeskMenuProps ) {
 	const navigate = useNavigate();
 	const connector = useConnector();
 	const { data: user } = useAuthUser();
@@ -36,9 +36,9 @@ export function DeskMenu( { activeSiteId }: DeskMenuProps ) {
 	const savedScheme = preferences?.colorScheme;
 	const themeIsDark =
 		savedScheme === 'dark' || ( savedScheme !== 'light' && effectiveScheme === 'dark' );
-	const activeSite = sites?.find( ( candidate ) => candidate.id === activeSiteId );
+	const activeSite = sites?.find( ( candidate ) => candidate.id === siteId );
 	const activeSiteName = activeSite?.name ?? __( 'Site' );
-	const activeSiteIconSeed = activeSite ? getSiteIconSeed( activeSite ) : activeSiteId;
+	const activeSiteIconSeed = activeSite ? getSiteIconSeed( activeSite ) : siteId;
 	const switcherSites = activeSite
 		? [ activeSite, ...( sites ?? [] ).filter( ( candidate ) => candidate.id !== activeSite.id ) ]
 		: sites ?? [];
@@ -52,13 +52,13 @@ export function DeskMenu( { activeSiteId }: DeskMenuProps ) {
 	};
 
 	const openSite = ( nextSiteId: string ) => {
-		if ( nextSiteId === activeSiteId ) {
+		if ( nextSiteId === siteId ) {
 			return;
 		}
 		void navigate( { to: '/sites/$siteId', params: { siteId: nextSiteId } } );
 	};
 
-	const trigger = activeSiteId ? (
+	const trigger = siteId ? (
 		<button
 			type="button"
 			className={ styles.siteTrigger }
@@ -113,7 +113,7 @@ export function DeskMenu( { activeSiteId }: DeskMenuProps ) {
 					switcherSites.map( ( site ) => (
 						<Menu.Item
 							key={ site.id }
-							aria-current={ site.id === activeSiteId ? 'page' : undefined }
+							aria-current={ site.id === siteId ? 'page' : undefined }
 							onClick={ () => openSite( site.id ) }
 						>
 							<span title={ site.name }>{ site.name }</span>
diff --git a/apps/ui/src/ui-desks/desk/canvas.tsx b/apps/ui/src/ui-desks/desk/canvas.tsx
new file mode 100644
index 0000000000..78ebb3a0e4
--- /dev/null
+++ b/apps/ui/src/ui-desks/desk/canvas.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useEffect } from 'react';
+import { Tldraw, type Editor, type TldrawOptions } from 'tldraw';
+import 'tldraw/tldraw.css';
+import { deskShapeUtils } from '@/ui-desks/shapes/registry';
+import { useDesk, useRegisterDeskEditor } from './provider';
+import styles from './style.module.css';
+
+const deskCanvasOptions = {
+	createTextOnCanvasDoubleClick: false,
+} satisfies Partial< TldrawOptions >;
+
+export function DeskCanvas() {
+	const { isLoading } = useDesk();
+	const registerEditor = useRegisterDeskEditor();
+
+	const handleMount = useCallback(
+		( nextEditor: Editor ) => {
+			registerEditor( nextEditor );
+		},
+		[ registerEditor ]
+	);
+
+	useEffect( () => {
+		return () => {
+			registerEditor( null );
+		};
+	}, [ registerEditor ] );
+
+	if ( isLoading ) {
+		return <div className={ styles.loading } />;
+	}
+
+	return (
+		<div className={ styles.canvas }>
+			<Tldraw
+				hideUi
+				autoFocus
+				options={ deskCanvasOptions }
+				shapeUtils={ deskShapeUtils }
+				onMount={ handleMount }
+			/>
+		</div>
+	);
+}
diff --git a/apps/ui/src/ui-desks/user-desk/default-user-desk.ts b/apps/ui/src/ui-desks/desk/default-desk.ts
similarity index 100%
rename from apps/ui/src/ui-desks/user-desk/default-user-desk.ts
rename to apps/ui/src/ui-desks/desk/default-desk.ts
diff --git a/apps/ui/src/ui-desks/desk/index.tsx b/apps/ui/src/ui-desks/desk/index.tsx
new file mode 100644
index 0000000000..1c365be058
--- /dev/null
+++ b/apps/ui/src/ui-desks/desk/index.tsx
@@ -0,0 +1,37 @@
+import { __ } from '@wordpress/i18n';
+import { DeskChats } from '../chats';
+import { DeskChrome } from '../chrome';
+import { DeskCanvas } from './canvas';
+import { DeskProvider } from './provider';
+import styles from './style.module.css';
+import type { ReactNode } from 'react';
+
+interface DeskProps {
+	siteId?: string;
+}
+
+export function Desk( { siteId }: DeskProps ) {
+	return (
+		<DeskProvider key={ siteId ?? 'user' } siteId={ siteId }>
+			<DeskShell siteId={ siteId }>
+				<DeskCanvas />
+			</DeskShell>
+		</DeskProvider>
+	);
+}
+
+function DeskShell( { siteId, children }: DeskProps & { children: ReactNode } ) {
+	return (
+		<>
+			<DeskChats siteId={ siteId } />
+			<main className={ styles.root } aria-label={ getDeskLabel( siteId ) } data-site-id={ siteId }>
+				<DeskChrome siteId={ siteId } />
+				{ children }
+			</main>
+		</>
+	);
+}
+
+function getDeskLabel( siteId?: string ) {
+	return siteId ? __( 'Site desk' ) : __( 'User desk' );
+}
diff --git a/apps/ui/src/ui-desks/desk/provider.tsx b/apps/ui/src/ui-desks/desk/provider.tsx
new file mode 100644
index 0000000000..d9bb77859e
--- /dev/null
+++ b/apps/ui/src/ui-desks/desk/provider.tsx
@@ -0,0 +1,275 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { useDeskConfig, useSaveDeskConfig } from '@/data/queries/use-desk-config';
+import { createDeskWidget } from '@/ui-desks/widgets/create-widget';
+import { defaultUserDesk } from './default-desk';
+import {
+	canvasCameraToDeskViewport,
+	canvasShapeToDeskWidget,
+	deskWidgetToCanvasShape,
+} from './tldraw-adapter';
+import { DESK_CONFIG_VERSION, type DeskConfig } from './types';
+import type { DeskWidget } from '@/ui-desks/widgets/types';
+import type { ReactNode } from 'react';
+import type { Editor } from 'tldraw';
+
+interface DeskContextValue {
+	isLoading: boolean;
+	canAddWidgets: boolean;
+	addWidget: ( type: string ) => boolean;
+}
+
+interface DeskProviderProps {
+	siteId?: string;
+	children: ReactNode;
+}
+
+type RegisterDeskEditor = ( editor: Editor | null ) => void;
+
+const defaultDeskContext = {
+	isLoading: true,
+	canAddWidgets: false,
+	addWidget: () => false,
+};
+
+const DeskContext = createContext< DeskContextValue >( defaultDeskContext );
+const DeskEditorRegistrationContext = createContext< RegisterDeskEditor >( noopRegisterEditor );
+
+export function DeskProvider( { siteId, children }: DeskProviderProps ) {
+	const { data: savedDesk, isLoading } = useDeskConfig( siteId );
+	const { mutate: saveDeskConfig } = useSaveDeskConfig( siteId );
+	const defaultDesk = useMemo( () => createDefaultDeskConfig( siteId ), [ siteId ] );
+	const desk = ( savedDesk as DeskConfig | undefined ) ?? defaultDesk;
+	const [ editor, setEditor ] = useState< Editor | null >( null );
+	const [ isHydrated, setIsHydrated ] = useState( false );
+	const hydratedRef = useRef( false );
+	const creationOffsetRef = useRef( 0 );
+	const saveTimerRef = useRef< ReturnType< typeof setTimeout > | null >( null );
+
+	useEffect( () => {
+		if ( ! isLoading && ! savedDesk ) {
+			saveDeskConfig( defaultDesk );
+		}
+	}, [ defaultDesk, isLoading, savedDesk, saveDeskConfig ] );
+
+	useEffect( () => {
+		if ( ! editor || isLoading || hydratedRef.current ) {
+			return;
+		}
+
+		hydratedRef.current = true;
+		const existingShapes = editor.getCurrentPageShapes();
+		if ( existingShapes.length > 0 ) {
+			editor.deleteShapes( existingShapes.map( ( shape ) => shape.id ) );
+		}
+		if ( desk.widgets.length > 0 ) {
+			editor.createShapes( desk.widgets.map( deskWidgetToCanvasShape ) );
+		}
+		if ( desk.viewport ) {
+			editor.setCamera( desk.viewport, { immediate: true } );
+		} else if ( desk.widgets.length > 0 ) {
+			ensureContentVisible( editor );
+		}
+		editor.focus();
+		setIsHydrated( true );
+	}, [ desk, editor, isLoading ] );
+
+	useEffect( () => {
+		if ( ! editor ) {
+			return;
+		}
+
+		const queueSave = () => {
+			if ( ! hydratedRef.current ) {
+				return;
+			}
+
+			if ( saveTimerRef.current ) {
+				clearTimeout( saveTimerRef.current );
+			}
+
+			saveTimerRef.current = setTimeout( () => {
+				saveTimerRef.current = null;
+				saveDeskConfig( createDeskConfigFromEditor( editor ) );
+			}, 500 );
+		};
+
+		const unsubscribeDocument = editor.store.listen( queueSave, { scope: 'document' } );
+		const unsubscribeSession = editor.store.listen(
+			( { changes } ) => {
+				if ( hasCameraChange( changes ) ) {
+					queueSave();
+				}
+			},
+			{ scope: 'session' }
+		);
+
+		return () => {
+			if ( saveTimerRef.current ) {
+				clearTimeout( saveTimerRef.current );
+				saveTimerRef.current = null;
+			}
+			unsubscribeDocument();
+			unsubscribeSession();
+		};
+	}, [ editor, saveDeskConfig ] );
+
+	const registerEditor = useCallback( ( nextEditor: Editor | null ) => {
+		setEditor( nextEditor );
+		if ( ! nextEditor ) {
+			hydratedRef.current = false;
+			setIsHydrated( false );
+		}
+	}, [] );
+
+	const addWidget = useCallback(
+		( type: string ) => {
+			if ( ! editor || ! isHydrated ) {
+				return false;
+			}
+
+			const viewportCenter = editor.getViewportPageBounds().center;
+			const offset = ( creationOffsetRef.current % 6 ) * 24;
+			const widget = createDeskWidget( {
+				id: createWidgetId(),
+				type,
+				center: {
+					x: viewportCenter.x + offset,
+					y: viewportCenter.y + offset,
+				},
+				zIndex: getNextZIndex( getCurrentDeskWidgets( editor ) ),
+			} );
+
+			if ( ! widget ) {
+				return false;
+			}
+
+			const shape = deskWidgetToCanvasShape( widget );
+			if ( ! shape.id ) {
+				return false;
+			}
+
+			creationOffsetRef.current += 1;
+			editor.createShape( shape ).select( shape.id );
+			editor.setEditingShape( shape.id );
+			editor.focus();
+			return true;
+		},
+		[ editor, isHydrated ]
+	);
+
+	const value = useMemo(
+		() => ( {
+			isLoading,
+			canAddWidgets: Boolean( editor ) && isHydrated,
+			addWidget,
+		} ),
+		[ addWidget, editor, isHydrated, isLoading ]
+	);
+
+	return (
+		<DeskEditorRegistrationContext.Provider value={ registerEditor }>
+			<DeskContext.Provider value={ value }>{ children }</DeskContext.Provider>
+		</DeskEditorRegistrationContext.Provider>
+	);
+}
+
+export function useDesk() {
+	return useContext( DeskContext );
+}
+
+export function useRegisterDeskEditor() {
+	return useContext( DeskEditorRegistrationContext );
+}
+
+function getCurrentDeskWidgets( editor: Editor ) {
+	return editor
+		.getCurrentPageShapes()
+		.map( canvasShapeToDeskWidget )
+		.filter( ( widget ) => widget !== null );
+}
+
+function createDeskConfigFromEditor( editor: Editor ): DeskConfig {
+	return {
+		version: DESK_CONFIG_VERSION,
+		updatedAt: new Date().toISOString(),
+		viewport: canvasCameraToDeskViewport( editor.getCamera() ),
+		widgets: getCurrentDeskWidgets( editor ),
+	};
+}
+
+interface CanvasStoreChanges {
+	added: Record< string, unknown >;
+	updated: Record< string, readonly [ unknown, unknown ] >;
+	removed: Record< string, unknown >;
+}
+
+function hasCameraChange( changes: CanvasStoreChanges ) {
+	const updatedRecords = Object.values( changes.updated ).map( ( [ , nextRecord ] ) => nextRecord );
+	const records = [
+		...Object.values( changes.added ),
+		...updatedRecords,
+		...Object.values( changes.removed ),
+	];
+	return records.some( isCameraRecord );
+}
+
+function isCameraRecord( value: unknown ) {
+	return (
+		Boolean( value ) &&
+		typeof value === 'object' &&
+		( value as { typeName?: unknown } ).typeName === 'camera'
+	);
+}
+
+function ensureContentVisible( editor: Editor ) {
+	const shapes = editor.getCurrentPageShapes();
+	if ( shapes.length === 0 ) {
+		return;
+	}
+
+	const viewport = editor.getViewportPageBounds();
+	const hasVisibleShape = shapes.some( ( shape ) => {
+		const bounds = editor.getShapePageBounds( shape.id );
+		return bounds ? viewport.collides( bounds ) : false;
+	} );
+
+	if ( ! hasVisibleShape ) {
+		editor.zoomToFit( { animation: { duration: 0 } } );
+	}
+}
+
+function createDefaultDeskConfig( siteId?: string ): DeskConfig {
+	if ( siteId ) {
+		return {
+			version: DESK_CONFIG_VERSION,
+			updatedAt: new Date().toISOString(),
+			widgets: [],
+		};
+	}
+
+	return defaultUserDesk;
+}
+
+function getNextZIndex( widgets: DeskWidget[] ) {
+	const nextIndex =
+		widgets.reduce( ( max, widget ) => {
+			const numericIndex = Number( widget.zIndex.replace( /^a/, '' ) );
+			return Number.isFinite( numericIndex ) ? Math.max( max, numericIndex ) : max;
+		}, 0 ) + 1;
+
+	return `a${ nextIndex }`;
+}
+
+function createWidgetId() {
+	return globalThis.crypto?.randomUUID?.() ?? `widget-${ Date.now().toString( 36 ) }`;
+}
+
+function noopRegisterEditor() {}
diff --git a/apps/ui/src/ui-desks/user-desk/style.module.css b/apps/ui/src/ui-desks/desk/style.module.css
similarity index 81%
rename from apps/ui/src/ui-desks/user-desk/style.module.css
rename to apps/ui/src/ui-desks/desk/style.module.css
index bb0dce5623..26dfed05e5 100644
--- a/apps/ui/src/ui-desks/user-desk/style.module.css
+++ b/apps/ui/src/ui-desks/desk/style.module.css
@@ -1,3 +1,9 @@
+.root,
+.loading {
+	min-height: 100vh;
+	background: rgb(232, 234, 235);
+}
+
 .canvas,
 .loading {
 	width: 100vw;
diff --git a/apps/ui/src/ui-desks/user-desk/tldraw-adapter.test.ts b/apps/ui/src/ui-desks/desk/tldraw-adapter.test.ts
similarity index 100%
rename from apps/ui/src/ui-desks/user-desk/tldraw-adapter.test.ts
rename to apps/ui/src/ui-desks/desk/tldraw-adapter.test.ts
diff --git a/apps/ui/src/ui-desks/user-desk/tldraw-adapter.ts b/apps/ui/src/ui-desks/desk/tldraw-adapter.ts
similarity index 93%
rename from apps/ui/src/ui-desks/user-desk/tldraw-adapter.ts
rename to apps/ui/src/ui-desks/desk/tldraw-adapter.ts
index 4a23d7f7fd..76352e72e4 100644
--- a/apps/ui/src/ui-desks/user-desk/tldraw-adapter.ts
+++ b/apps/ui/src/ui-desks/desk/tldraw-adapter.ts
@@ -18,7 +18,7 @@ export function deskWidgetToCanvasShape( widget: DeskWidget ): TLShapePartial {
 
 	return {
 		id: createShapeId( widget.id ),
-		type: definition.shapeType,
+		type: RECTANGLE_WIDGET_SHAPE_TYPE,
 		x: widget.x,
 		y: widget.y,
 		rotation: widget.rotation ?? 0,
@@ -40,11 +40,7 @@ export function canvasShapeToDeskWidget( shape: TLShape ): DeskWidget | null {
 	}
 
 	const definition = getWidgetDefinition( shape.props.widgetType );
-	if (
-		! definition ||
-		definition.shapeType !== shape.type ||
-		! definition.isWidgetProps( shape.props.widgetProps )
-	) {
+	if ( ! definition || ! definition.isWidgetProps( shape.props.widgetProps ) ) {
 		return null;
 	}
 
diff --git a/apps/ui/src/ui-desks/shapes/rectangle-widget/shape-util.tsx b/apps/ui/src/ui-desks/shapes/rectangle-widget/shape-util.tsx
index c54ed4623e..bd5c7e04f5 100644
--- a/apps/ui/src/ui-desks/shapes/rectangle-widget/shape-util.tsx
+++ b/apps/ui/src/ui-desks/shapes/rectangle-widget/shape-util.tsx
@@ -4,6 +4,8 @@ import {
 	ShapeUtil,
 	T,
 	resizeBox,
+	useEditor,
+	useIsEditing,
 	type JsonObject,
 	type RecordProps,
 	type TLResizeInfo,
@@ -14,6 +16,10 @@ import {
 	type RectangleWidgetShape,
 	type RectangleWidgetShapeProps,
 } from './types';
+import type { DeskWidgetComponentProps } from '@/ui-desks/widgets/types';
+import type { ComponentType } from 'react';
+
+type RegisteredWidgetDefinition = NonNullable< ReturnType< typeof getWidgetDefinition > >;
 
 export class RectangleWidgetShapeUtil extends ShapeUtil< RectangleWidgetShape > {
 	static override type = RECTANGLE_WIDGET_SHAPE_TYPE;
@@ -78,7 +84,6 @@ export class RectangleWidgetShapeUtil extends ShapeUtil< RectangleWidgetShape >
 			return null;
 		}
 
-		const WidgetComponent = definition.Component;
 		return (
 			<HTMLContainer
 				style={ {
@@ -87,11 +92,7 @@ export class RectangleWidgetShapeUtil extends ShapeUtil< RectangleWidgetShape >
 					pointerEvents: 'all',
 				} }
 			>
-				<WidgetComponent
-					id={ shape.id }
-					shapeType={ shape.type }
-					widgetProps={ shape.props.widgetProps }
-				/>
+				<RectangleWidgetComponent shape={ shape } definition={ definition } />
 			</HTMLContainer>
 		);
 	}
@@ -115,3 +116,41 @@ export class RectangleWidgetShapeUtil extends ShapeUtil< RectangleWidgetShape >
 		);
 	}
 }
+
+function RectangleWidgetComponent( {
+	shape,
+	definition,
+}: {
+	shape: RectangleWidgetShape;
+	definition: RegisteredWidgetDefinition;
+} ) {
+	const editor = useEditor();
+	const isEditing = useIsEditing( shape.id );
+	const WidgetComponent = definition.Component as unknown as ComponentType<
+		DeskWidgetComponentProps< JsonObject >
+	>;
+
+	const handleWidgetPropsChange = ( widgetProps: JsonObject ) => {
+		editor.updateShape< RectangleWidgetShape >( {
+			id: shape.id,
+			type: shape.type,
+			props: {
+				widgetProps,
+			},
+		} );
+	};
+
+	return (
+		<WidgetComponent
+			id={ getWidgetIdFromShapeId( shape.id ) }
+			widgetProps={ shape.props.widgetProps }
+			isEditing={ isEditing }
+			onWidgetPropsChange={ handleWidgetPropsChange }
+			onEditComplete={ () => editor.complete() }
+		/>
+	);
+}
+
+function getWidgetIdFromShapeId( shapeId: string ) {
+	return shapeId.startsWith( 'shape:' ) ? shapeId.slice( 'shape:'.length ) : shapeId;
+}
diff --git a/apps/ui/src/ui-desks/shapes/rectangle-widget/types.ts b/apps/ui/src/ui-desks/shapes/rectangle-widget/types.ts
index 4307210a25..312d7ed12c 100644
--- a/apps/ui/src/ui-desks/shapes/rectangle-widget/types.ts
+++ b/apps/ui/src/ui-desks/shapes/rectangle-widget/types.ts
@@ -1,11 +1,12 @@
+import {
+	isRectangleWidgetShapeProps,
+	type RectangleWidgetShapeProps,
+} from '@/ui-desks/widgets/geometry';
 import type { JsonObject, TLBaseShape } from 'tldraw';
 
-export const RECTANGLE_WIDGET_SHAPE_TYPE = 'studio-rectangle-widget';
+export { isRectangleWidgetShapeProps, type RectangleWidgetShapeProps };
 
-export type RectangleWidgetShapeProps = {
-	w: number;
-	h: number;
-};
+export const RECTANGLE_WIDGET_SHAPE_TYPE = 'studio-rectangle-widget';
 
 export type RectangleWidgetCanvasProps = {
 	widgetType: string;
@@ -17,12 +18,3 @@ export type RectangleWidgetShape = TLBaseShape<
 	typeof RECTANGLE_WIDGET_SHAPE_TYPE,
 	RectangleWidgetCanvasProps
 >;
-
-export function isRectangleWidgetShapeProps( value: unknown ): value is RectangleWidgetShapeProps {
-	return (
-		Boolean( value ) &&
-		typeof value === 'object' &&
-		typeof ( value as Partial< RectangleWidgetShapeProps > ).w === 'number' &&
-		typeof ( value as Partial< RectangleWidgetShapeProps > ).h === 'number'
-	);
-}
diff --git a/apps/ui/src/ui-desks/site-desk/index.tsx b/apps/ui/src/ui-desks/site-desk/index.tsx
index a445586afe..5df22cba04 100644
--- a/apps/ui/src/ui-desks/site-desk/index.tsx
+++ b/apps/ui/src/ui-desks/site-desk/index.tsx
@@ -1,25 +1,11 @@
 import { createRoute } from '@tanstack/react-router';
-import { __ } from '@wordpress/i18n';
-import { DeskChats, DeskChatsTrigger } from '../chats';
-import { DeskHeader } from '../chrome';
-import { DeskMenu } from '../chrome/user-menu';
+import { Desk } from '../desk';
 import { desksRootRoute } from '../router/root';
-import styles from './style.module.css';
 
 export function SiteDesk() {
 	const { siteId } = siteDeskRoute.useParams();
 
-	return (
-		<>
-			<DeskChats siteId={ siteId } />
-			<main className={ styles.root } aria-label={ __( 'Site desk' ) } data-site-id={ siteId }>
-				<DeskHeader>
-					<DeskMenu activeSiteId={ siteId } />
-					<DeskChatsTrigger />
-				</DeskHeader>
-			</main>
-		</>
-	);
+	return <Desk siteId={ siteId } />;
 }
 
 export const siteDeskRoute = createRoute( {
diff --git a/apps/ui/src/ui-desks/site-desk/style.module.css b/apps/ui/src/ui-desks/site-desk/style.module.css
deleted file mode 100644
index 421e4ae415..0000000000
--- a/apps/ui/src/ui-desks/site-desk/style.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
-	min-height: 100vh;
-	background: var(--wpds-color-bg-canvas, #e9ecef);
-}
diff --git a/apps/ui/src/ui-desks/user-desk/index.tsx b/apps/ui/src/ui-desks/user-desk/index.tsx
index 1aa080985b..35d1e9b49f 100644
--- a/apps/ui/src/ui-desks/user-desk/index.tsx
+++ b/apps/ui/src/ui-desks/user-desk/index.tsx
@@ -1,44 +1,9 @@
 import { createRoute } from '@tanstack/react-router';
-import { useEffect } from 'react';
-import { useSaveUserDeskConfig, useUserDeskConfig } from '@/data/queries/use-desk-config';
-import { DeskChats } from '../chats';
-import { DeskChrome } from '../chrome';
+import { Desk } from '../desk';
 import { desksRootRoute } from '../router/root';
-import { defaultUserDesk } from './default-user-desk';
-import styles from './style.module.css';
-import { UserDeskCanvas } from './user-desk-canvas';
-import type { DeskConfig } from '@/ui-desks/desk/types';
-
-function UserDeskRoute() {
-	return (
-		<>
-			<DeskChrome />
-			<DeskChats />
-			<UserDesk />
-		</>
-	);
-}
-
-export function UserDesk() {
-	const { data: savedDesk, isLoading } = useUserDeskConfig();
-	const { mutate: saveUserDeskConfig } = useSaveUserDeskConfig();
-	const desk = ( savedDesk as DeskConfig | undefined ) ?? defaultUserDesk;
-
-	useEffect( () => {
-		if ( ! isLoading && ! savedDesk ) {
-			saveUserDeskConfig( defaultUserDesk );
-		}
-	}, [ isLoading, savedDesk, saveUserDeskConfig ] );
-
-	if ( isLoading ) {
-		return <main className={ styles.loading } />;
-	}
-
-	return <UserDeskCanvas desk={ desk } onChange={ saveUserDeskConfig } />;
-}
 
 export const userDeskRoute = createRoute( {
 	getParentRoute: () => desksRootRoute,
 	path: '/',
-	component: UserDeskRoute,
+	component: Desk,
 } );
diff --git a/apps/ui/src/ui-desks/user-desk/user-desk-canvas.tsx b/apps/ui/src/ui-desks/user-desk/user-desk-canvas.tsx
deleted file mode 100644
index 7817ac8848..0000000000
--- a/apps/ui/src/ui-desks/user-desk/user-desk-canvas.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Tldraw, type Editor, type TldrawOptions } from 'tldraw';
-import 'tldraw/tldraw.css';
-import { DESK_CONFIG_VERSION, type DeskConfig } from '@/ui-desks/desk/types';
-import { deskShapeUtils } from '@/ui-desks/shapes/registry';
-import styles from './style.module.css';
-import {
-	canvasCameraToDeskViewport,
-	canvasShapeToDeskWidget,
-	deskWidgetToCanvasShape,
-} from './tldraw-adapter';
-
-const deskCanvasOptions = {
-	createTextOnCanvasDoubleClick: false,
-} satisfies Partial< TldrawOptions >;
-
-interface UserDeskCanvasProps {
-	desk: DeskConfig;
-	onChange: ( desk: DeskConfig ) => void;
-}
-
-export function UserDeskCanvas( { desk, onChange }: UserDeskCanvasProps ) {
-	const [ editor, setEditor ] = useState< Editor | null >( null );
-	const hydratedRef = useRef( false );
-	const saveTimerRef = useRef< ReturnType< typeof setTimeout > | null >( null );
-
-	const handleMount = useCallback( ( nextEditor: Editor ) => {
-		setEditor( nextEditor );
-	}, [] );
-
-	useEffect( () => {
-		if ( ! editor || hydratedRef.current ) {
-			return;
-		}
-
-		hydratedRef.current = true;
-		const existingShapes = editor.getCurrentPageShapes();
-		if ( existingShapes.length > 0 ) {
-			editor.deleteShapes( existingShapes.map( ( shape ) => shape.id ) );
-		}
-		if ( desk.widgets.length > 0 ) {
-			editor.createShapes( desk.widgets.map( deskWidgetToCanvasShape ) );
-		}
-		if ( desk.viewport ) {
-			editor.setCamera( desk.viewport, { immediate: true } );
-		} else if ( desk.widgets.length > 0 ) {
-			ensureContentVisible( editor );
-		}
-		editor.focus();
-	}, [ desk, editor ] );
-
-	useEffect( () => {
-		if ( ! editor ) {
-			return;
-		}
-
-		const queueSave = () => {
-			if ( ! hydratedRef.current ) {
-				return;
-			}
-
-			if ( saveTimerRef.current ) {
-				clearTimeout( saveTimerRef.current );
-			}
-
-			saveTimerRef.current = setTimeout( () => {
-				const widgets = editor
-					.getCurrentPageShapes()
-					.map( canvasShapeToDeskWidget )
-					.filter( ( widget ) => widget !== null );
-				onChange( {
-					version: DESK_CONFIG_VERSION,
-					updatedAt: new Date().toISOString(),
-					viewport: canvasCameraToDeskViewport( editor.getCamera() ),
-					widgets,
-				} );
-			}, 500 );
-		};
-
-		const unsubscribeDocument = editor.store.listen( queueSave, { scope: 'document' } );
-		const unsubscribeCamera = editor.store.listen(
-			( { changes } ) => {
-				if ( hasCameraChange( changes ) ) {
-					queueSave();
-				}
-			},
-			{ scope: 'session' }
-		);
-		return () => {
-			if ( saveTimerRef.current ) {
-				clearTimeout( saveTimerRef.current );
-			}
-			unsubscribeDocument();
-			unsubscribeCamera();
-		};
-	}, [ editor, onChange ] );
-
-	return (
-		<div className={ styles.canvas }>
-			<Tldraw
-				hideUi
-				autoFocus
-				options={ deskCanvasOptions }
-				shapeUtils={ deskShapeUtils }
-				onMount={ handleMount }
-			/>
-		</div>
-	);
-}
-
-interface CanvasStoreChanges {
-	added: Record< string, unknown >;
-	updated: Record< string, readonly [ unknown, unknown ] >;
-	removed: Record< string, unknown >;
-}
-
-function hasCameraChange( changes: CanvasStoreChanges ) {
-	const updatedRecords = Object.values( changes.updated ).map( ( [ , nextRecord ] ) => nextRecord );
-	const records = [
-		...Object.values( changes.added ),
-		...updatedRecords,
-		...Object.values( changes.removed ),
-	];
-	return records.some( isCameraRecord );
-}
-
-function isCameraRecord( value: unknown ) {
-	return (
-		Boolean( value ) &&
-		typeof value === 'object' &&
-		( value as { typeName?: unknown } ).typeName === 'camera'
-	);
-}
-
-function ensureContentVisible( editor: Editor ) {
-	const shapes = editor.getCurrentPageShapes();
-	if ( shapes.length === 0 ) {
-		return;
-	}
-
-	const viewport = editor.getViewportPageBounds();
-	const hasVisibleShape = shapes.some( ( shape ) => {
-		const bounds = editor.getShapePageBounds( shape.id );
-		return bounds ? viewport.collides( bounds ) : false;
-	} );
-
-	if ( ! hasVisibleShape ) {
-		editor.zoomToFit( { animation: { duration: 0 } } );
-	}
-}
diff --git a/apps/ui/src/ui-desks/widgets/create-widget.test.ts b/apps/ui/src/ui-desks/widgets/create-widget.test.ts
new file mode 100644
index 0000000000..f1277c98c1
--- /dev/null
+++ b/apps/ui/src/ui-desks/widgets/create-widget.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { createDeskWidget } from './create-widget';
+
+describe( 'createDeskWidget', () => {
+	it( 'creates a note widget centered on the requested point', () => {
+		const createdWidget = createDeskWidget( {
+			id: 'note-1',
+			type: 'note',
+			center: {
+				x: 400,
+				y: 300,
+			},
+			zIndex: 'a2',
+		} );
+
+		expect( createdWidget ).toEqual( {
+			id: 'note-1',
+			type: 'note',
+			x: 300,
+			y: 200,
+			zIndex: 'a2',
+			shapeProps: {
+				w: 200,
+				h: 200,
+			},
+			widgetProps: {
+				text: '',
+				tone: 'yellow',
+			},
+		} );
+	} );
+
+	it( 'ignores unsupported widget types', () => {
+		expect(
+			createDeskWidget( {
+				id: 'unsupported',
+				type: 'unsupported',
+				center: {
+					x: 0,
+					y: 0,
+				},
+				zIndex: 'a1',
+			} )
+		).toBeNull();
+	} );
+} );
diff --git a/apps/ui/src/ui-desks/widgets/create-widget.ts b/apps/ui/src/ui-desks/widgets/create-widget.ts
new file mode 100644
index 0000000000..8e57c7672f
--- /dev/null
+++ b/apps/ui/src/ui-desks/widgets/create-widget.ts
@@ -0,0 +1,46 @@
+import { getWidgetDefinition } from './registry';
+import type { DeskWidget } from './types';
+
+interface CreateDeskWidgetOptions {
+	id: string;
+	type: string;
+	center: {
+		x: number;
+		y: number;
+	};
+	zIndex: string;
+}
+
+export function createDeskWidget( {
+	id,
+	type,
+	center,
+	zIndex,
+}: CreateDeskWidgetOptions ): DeskWidget | null {
+	const definition = getWidgetDefinition( type );
+	if ( ! definition ) {
+		return null;
+	}
+
+	const initialWidget = definition.getInitialWidget();
+	const size = getWidgetSize( initialWidget.shapeProps );
+
+	return {
+		id,
+		type: definition.type,
+		x: center.x - size.w / 2,
+		y: center.y - size.h / 2,
+		zIndex,
+		shapeProps: initialWidget.shapeProps,
+		widgetProps: initialWidget.widgetProps,
+	} as DeskWidget;
+}
+
+function getWidgetSize( shapeProps: Record< string, unknown > ) {
+	const { w, h } = shapeProps;
+
+	return {
+		w: typeof w === 'number' ? w : 0,
+		h: typeof h === 'number' ? h : 0,
+	};
+}
diff --git a/apps/ui/src/ui-desks/widgets/geometry.ts b/apps/ui/src/ui-desks/widgets/geometry.ts
new file mode 100644
index 0000000000..fac0caf455
--- /dev/null
+++ b/apps/ui/src/ui-desks/widgets/geometry.ts
@@ -0,0 +1,13 @@
+export type RectangleWidgetShapeProps = {
+	w: number;
+	h: number;
+};
+
+export function isRectangleWidgetShapeProps( value: unknown ): value is RectangleWidgetShapeProps {
+	return (
+		Boolean( value ) &&
+		typeof value === 'object' &&
+		typeof ( value as Partial< RectangleWidgetShapeProps > ).w === 'number' &&
+		typeof ( value as Partial< RectangleWidgetShapeProps > ).h === 'number'
+	);
+}
diff --git a/apps/ui/src/ui-desks/widgets/note/component.tsx b/apps/ui/src/ui-desks/widgets/note/component.tsx
index c9d2e7ca70..e17b0d8268 100644
--- a/apps/ui/src/ui-desks/widgets/note/component.tsx
+++ b/apps/ui/src/ui-desks/widgets/note/component.tsx
@@ -7,7 +7,6 @@ import {
 	type RichTextValue,
 } from '@wordpress/rich-text';
 import { useCallback, useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react';
-import { useEditor, useIsEditing, type TLUnknownShape } from 'tldraw';
 import { NOTE_WIDGET_TYPE, type NoteWidgetProps } from '@/ui-desks/widgets/note/types';
 import styles from './style.module.css';
 import type { DeskWidgetComponentProps } from '@/ui-desks/widgets/types';
@@ -31,25 +30,23 @@ const NOTE_FORMAT_BY_SHORTCUT = Object.fromEntries(
 
 registerNoteFormats();
 
-export function NoteWidgetComponent( { id, shapeType, widgetProps }: NoteWidgetComponentProps ) {
-	const editor = useEditor();
-	const isEditing = useIsEditing( id );
+export function NoteWidgetComponent( {
+	id,
+	widgetProps,
+	isEditing,
+	onWidgetPropsChange,
+	onEditComplete,
+}: NoteWidgetComponentProps ) {
 	const editorRef = useRef< HTMLDivElement | null >( null );
 
 	const updateText = useCallback(
 		( text: string ) => {
-			editor.updateShape< TLUnknownShape >( {
-				id,
-				type: shapeType,
-				props: {
-					widgetProps: {
-						...widgetProps,
-						text,
-					},
-				},
+			onWidgetPropsChange( {
+				...widgetProps,
+				text,
 			} );
 		},
-		[ editor, id, shapeType, widgetProps ]
+		[ onWidgetPropsChange, widgetProps ]
 	);
 
 	const richText = useRichText( {
@@ -133,10 +130,10 @@ export function NoteWidgetComponent( { id, shapeType, widgetProps }: NoteWidgetC
 
 			if ( event.key === 'Enter' ) {
 				event.preventDefault();
-				editor.complete();
+				onEditComplete();
 			}
 		},
-		[ editor, toggleTextFormat ]
+		[ onEditComplete, toggleTextFormat ]
 	);
 
 	return (
@@ -145,6 +142,7 @@ export function NoteWidgetComponent( { id, shapeType, widgetProps }: NoteWidgetC
 			data-tone={ widgetProps.tone }
 			data-is-editing={ isEditing }
 			data-studio-desk-widget={ NOTE_WIDGET_TYPE }
+			data-studio-desk-widget-id={ id }
 		>
 			<div
 				ref={ setEditorRef }
@@ -152,7 +150,7 @@ export function NoteWidgetComponent( { id, shapeType, widgetProps }: NoteWidgetC
 				contentEditable={ isEditing }
 				suppressContentEditableWarning
 				spellCheck={ false }
-				onBlur={ () => editor.complete() }
+				onBlur={ onEditComplete }
 				onKeyDown={ handleKeyDown }
 				onPointerDown={ handlePointerDown }
 			/>
diff --git a/apps/ui/src/ui-desks/widgets/note/definition.ts b/apps/ui/src/ui-desks/widgets/note/definition.ts
index 8f443bd00f..ad029ef950 100644
--- a/apps/ui/src/ui-desks/widgets/note/definition.ts
+++ b/apps/ui/src/ui-desks/widgets/note/definition.ts
@@ -1,4 +1,5 @@
-import { RECTANGLE_WIDGET_SHAPE_TYPE } from '@/ui-desks/shapes/rectangle-widget/types';
+import { __ } from '@wordpress/i18n';
+import { pencil } from '@wordpress/icons';
 import { NoteWidgetComponent } from '@/ui-desks/widgets/note/component';
 import {
 	isNoteWidgetProps,
@@ -23,11 +24,24 @@ const NOTE_TONE_STROKE: Record< NoteTone, string > = {
 
 export const noteWidgetDefinition = {
 	type: NOTE_WIDGET_TYPE,
-	shapeType: RECTANGLE_WIDGET_SHAPE_TYPE,
 	Component: NoteWidgetComponent,
 	isWidgetProps: isNoteWidgetProps,
 	getIndicator: ( widgetProps ) => ( {
 		cornerRadius: 14,
 		stroke: NOTE_TONE_STROKE[ widgetProps.tone ],
 	} ),
+	labels: {
+		add: () => __( 'New sticky note' ),
+	},
+	icon: pencil,
+	getInitialWidget: () => ( {
+		shapeProps: {
+			w: 200,
+			h: 200,
+		},
+		widgetProps: {
+			text: '',
+			tone: 'yellow',
+		},
+	} ),
 } satisfies WidgetDefinition< NoteWidget >;
diff --git a/apps/ui/src/ui-desks/widgets/note/types.ts b/apps/ui/src/ui-desks/widgets/note/types.ts
index b89cbf81fe..c58d19eb09 100644
--- a/apps/ui/src/ui-desks/widgets/note/types.ts
+++ b/apps/ui/src/ui-desks/widgets/note/types.ts
@@ -1,4 +1,4 @@
-import type { RectangleWidgetShapeProps } from '@/ui-desks/shapes/rectangle-widget/types';
+import type { RectangleWidgetShapeProps } from '@/ui-desks/widgets/geometry';
 import type { DeskWidgetBase } from '@studio/common/types/desk';
 
 export const NOTE_WIDGET_TYPE = 'note';
diff --git a/apps/ui/src/ui-desks/widgets/registry.ts b/apps/ui/src/ui-desks/widgets/registry.ts
index 7563d09108..ad443e0332 100644
--- a/apps/ui/src/ui-desks/widgets/registry.ts
+++ b/apps/ui/src/ui-desks/widgets/registry.ts
@@ -5,5 +5,13 @@ export const widgetDefinitions = {
 };
 
 export function getWidgetDefinition( type: string ) {
+	if ( ! Object.prototype.hasOwnProperty.call( widgetDefinitions, type ) ) {
+		return undefined;
+	}
+
 	return widgetDefinitions[ type as keyof typeof widgetDefinitions ];
 }
+
+export function getCreatableWidgetDefinitions() {
+	return Object.values( widgetDefinitions );
+}
diff --git a/apps/ui/src/ui-desks/widgets/types.ts b/apps/ui/src/ui-desks/widgets/types.ts
index e655887093..43e426a7a6 100644
--- a/apps/ui/src/ui-desks/widgets/types.ts
+++ b/apps/ui/src/ui-desks/widgets/types.ts
@@ -1,7 +1,6 @@
 import type { NoteWidget } from '@/ui-desks/widgets/note/types';
 import type { DeskWidgetBase } from '@studio/common/types/desk';
-import type { ComponentType } from 'react';
-import type { TLShapeId } from 'tldraw';
+import type { ComponentProps, ComponentType, ReactElement } from 'react';
 
 export interface WidgetIndicator {
 	cornerRadius?: number;
@@ -11,16 +10,26 @@ export interface WidgetIndicator {
 export interface DeskWidgetComponentProps<
 	TWidgetProps extends Record< string, unknown > = Record< string, unknown >,
 > {
-	id: TLShapeId;
-	shapeType: string;
+	id: string;
 	widgetProps: TWidgetProps;
+	isEditing: boolean;
+	onWidgetPropsChange: ( widgetProps: TWidgetProps ) => void;
+	onEditComplete: () => void;
+}
+
+export type WidgetIcon = ReactElement< ComponentProps< 'svg' > >;
+
+export interface WidgetLabels {
+	add: () => string;
 }
 
 export interface WidgetDefinition< TWidget extends DeskWidgetBase = DeskWidgetBase > {
 	type: TWidget[ 'type' ];
-	shapeType: string;
 	Component: ComponentType< DeskWidgetComponentProps< TWidget[ 'widgetProps' ] > >;
 	isWidgetProps: ( props: unknown ) => props is TWidget[ 'widgetProps' ];
+	labels: WidgetLabels;
+	icon?: WidgetIcon;
+	getInitialWidget: () => Pick< TWidget, 'shapeProps' | 'widgetProps' >;
 	getIndicator?: ( widgetProps: TWidget[ 'widgetProps' ] ) => WidgetIndicator;
 }