diff --git a/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx b/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx
index 6e93b4c00..471a6ab37 100644
--- a/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx
+++ b/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx
@@ -1,10 +1,29 @@
-import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw'
+import {
+	DefaultActionsMenu,
+	DefaultActionsMenuContent,
+	TLComponents,
+	Tldraw,
+	TldrawUiMenuItem,
+} from 'tldraw'
 import 'tldraw/tldraw.css'
 
 function CustomActionsMenu() {
 	return (
-		<div style={{ transform: 'rotate(90deg)' }}>
-			<DefaultActionsMenu />
+		<div style={{ backgroundColor: 'thistle' }}>
+			<DefaultActionsMenu>
+				<div style={{ backgroundColor: 'thistle' }}>
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</div>
+				<DefaultActionsMenuContent />
+			</DefaultActionsMenu>
 		</div>
 	)
 }
diff --git a/apps/examples/src/examples/custom-actions-menu/README.md b/apps/examples/src/examples/custom-actions-menu/README.md
index 4521088d5..ace4abde8 100644
--- a/apps/examples/src/examples/custom-actions-menu/README.md
+++ b/apps/examples/src/examples/custom-actions-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's actions menu.
 
 ---
 
-The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The actions menu is a dropdown menu that can be found in the top-left of the tldraw component, or just above the toolbar on smaller screens. It contains actions related to editing shapes such as grouping, rotating or changing shape order. The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
diff --git a/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx b/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx
index f0d87c20d..9e8c0c3f6 100644
--- a/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx
+++ b/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx
@@ -13,15 +13,17 @@ function CustomContextMenu(props: TLUiContextMenuProps) {
 	return (
 		<DefaultContextMenu {...props}>
 			<TldrawUiMenuGroup id="example">
-				<TldrawUiMenuItem
-					id="like"
-					label="Like my posts"
-					icon="external-link"
-					readonlyOk
-					onSelect={() => {
-						window.open('https://x.com/tldraw', '_blank')
-					}}
-				/>
+				<div style={{ backgroundColor: 'thistle' }}>
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</div>
 			</TldrawUiMenuGroup>
 			<DefaultContextMenuContent />
 		</DefaultContextMenu>
diff --git a/apps/examples/src/examples/custom-context-menu/README.md b/apps/examples/src/examples/custom-context-menu/README.md
index bb74f6fc1..c3d6cbe23 100644
--- a/apps/examples/src/examples/custom-context-menu/README.md
+++ b/apps/examples/src/examples/custom-context-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's context menu.
 
 ---
 
-The context menu can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+Create some shapes, select them and right click the selection to see the custom context menu. It can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
diff --git a/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx b/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx
index fc7beb9e4..25be50d9d 100644
--- a/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx
+++ b/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx
@@ -10,20 +10,24 @@ import 'tldraw/tldraw.css'
 
 function CustomDebugMenu() {
 	return (
-		<DefaultDebugMenu>
-			<DefaultDebugMenuContent />
-			<TldrawUiMenuGroup id="example">
-				<TldrawUiMenuItem
-					id="like"
-					label="Like my posts"
-					icon="external-link"
-					readonlyOk
-					onSelect={() => {
-						window.open('https://x.com/tldraw', '_blank')
-					}}
-				/>
-			</TldrawUiMenuGroup>
-		</DefaultDebugMenu>
+		<div style={{ backgroundColor: 'thistle' }}>
+			<DefaultDebugMenu>
+				<DefaultDebugMenuContent />
+				<div style={{ backgroundColor: 'thistle' }}>
+					<TldrawUiMenuGroup id="example">
+						<TldrawUiMenuItem
+							id="like"
+							label="Like my posts"
+							icon="external-link"
+							readonlyOk
+							onSelect={() => {
+								window.open('https://x.com/tldraw', '_blank')
+							}}
+						/>
+					</TldrawUiMenuGroup>
+				</div>
+			</DefaultDebugMenu>
+		</div>
 	)
 }
 
diff --git a/apps/examples/src/examples/custom-debug-menu/README.md b/apps/examples/src/examples/custom-debug-menu/README.md
index 6930e47e4..fd19aa841 100644
--- a/apps/examples/src/examples/custom-debug-menu/README.md
+++ b/apps/examples/src/examples/custom-debug-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's debug menu.
 
 ---
 
-The help menu can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The debug menu contains helpful menu items for debugging the tldraw component. To show the debug menu, turn on debug mode in the preferences. It can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
diff --git a/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx b/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx
index 646f1a830..09a374c1c 100644
--- a/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx
+++ b/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx
@@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
 function CustomHelpMenu() {
 	return (
 		<DefaultHelpMenu>
-			<TldrawUiMenuGroup id="example">
-				<TldrawUiMenuItem
-					id="like"
-					label="Like my posts"
-					icon="external-link"
-					readonlyOk
-					onSelect={() => {
-						window.open('https://x.com/tldraw', '_blank')
-					}}
-				/>
-			</TldrawUiMenuGroup>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiMenuGroup id="example">
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</TldrawUiMenuGroup>
+			</div>
 			<DefaultHelpMenuContent />
 		</DefaultHelpMenu>
 	)
diff --git a/apps/examples/src/examples/custom-help-menu/README.md b/apps/examples/src/examples/custom-help-menu/README.md
index e75714d17..d00100ce8 100644
--- a/apps/examples/src/examples/custom-help-menu/README.md
+++ b/apps/examples/src/examples/custom-help-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's help menu.
 
 ---
 
-The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The help menu contains options for opening the keyboard shortcuts dialog and changing the language. It can be opened by clicking on the help icon in the bottom right of the screen at larger breakpoints. The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
diff --git a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx
index 896cd19ef..3211cdc61 100644
--- a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx
+++ b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx
@@ -11,16 +11,18 @@ import 'tldraw/tldraw.css'
 function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
 	return (
 		<DefaultKeyboardShortcutsDialog {...props}>
-			<TldrawUiMenuItem
-				id="like-my-posts"
-				label="Like my posts"
-				icon="external-link"
-				readonlyOk
-				kbd=":)"
-				onSelect={() => {
-					window.open('https://x.com/tldraw', '_blank')
-				}}
-			/>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiMenuItem
+					id="like-my-posts"
+					label="Like my posts"
+					icon="external-link"
+					readonlyOk
+					kbd=":)"
+					onSelect={() => {
+						window.open('https://x.com/tldraw', '_blank')
+					}}
+				/>
+			</div>
 			<DefaultKeyboardShortcutsDialogContent />
 		</DefaultKeyboardShortcutsDialog>
 	)
diff --git a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md
index 81e69b0f3..cedbd4cb7 100644
--- a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md
+++ b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's keyboard shortcuts dialog.
 
 ---
 
-The keyboard shortcuts dialog can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The keyboard shortcuts dialog can be opened via the help menu in the bottom right corner of the tldraw component. It can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
diff --git a/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx b/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx
index 492a49569..e86a3c74f 100644
--- a/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx
+++ b/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx
@@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
 function CustomMainMenu() {
 	return (
 		<DefaultMainMenu>
-			<TldrawUiMenuGroup id="example">
-				<TldrawUiMenuItem
-					id="like"
-					label="Like my posts"
-					icon="external-link"
-					readonlyOk
-					onSelect={() => {
-						window.open('https://x.com/tldraw', '_blank')
-					}}
-				/>
-			</TldrawUiMenuGroup>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiMenuGroup id="example">
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</TldrawUiMenuGroup>
+			</div>
 			<DefaultMainMenuContent />
 		</DefaultMainMenu>
 	)
diff --git a/apps/examples/src/examples/custom-main-menu/README.md b/apps/examples/src/examples/custom-main-menu/README.md
index fa105edce..f8859d20b 100644
--- a/apps/examples/src/examples/custom-main-menu/README.md
+++ b/apps/examples/src/examples/custom-main-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's main menu.
 
 ---
 
-The actions menu can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The main menu contains important submenus: Edit, Shape, Preferences etc. To open the main menu, click the hamburger icon in the top left corner of the tldraw component. It can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
diff --git a/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx b/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx
index e22f4e564..c3034e8e4 100644
--- a/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx
+++ b/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx
@@ -2,7 +2,7 @@ import { TLComponents, Tldraw } from 'tldraw'
 import 'tldraw/tldraw.css'
 
 function CustomNavigationPanel() {
-	return <div className="tlui-navigation-panel">here you are</div>
+	return <div style={{ backgroundColor: 'thistle', padding: '14px' }}>here you are</div>
 }
 
 const components: TLComponents = {
diff --git a/apps/examples/src/examples/custom-navigation-panel/README.md b/apps/examples/src/examples/custom-navigation-panel/README.md
index afe15ae99..909b23c5d 100644
--- a/apps/examples/src/examples/custom-navigation-panel/README.md
+++ b/apps/examples/src/examples/custom-navigation-panel/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's navigation panel or remove it entirely.
 
 ---
 
-The navigation panel can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The navigation panel is in the bottom left of the tldraw component at larger breakpoints. It contains zoom controls and a mini map. It can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
diff --git a/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx b/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx
index c1a5188ff..4c836f3d5 100644
--- a/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx
+++ b/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx
@@ -3,7 +3,7 @@ import 'tldraw/tldraw.css'
 
 function CustomPageMenu() {
 	return (
-		<div style={{ transform: 'rotate(3.14rad)' }}>
+		<div style={{ transform: 'rotate(3.14rad)', backgroundColor: 'thistle' }}>
 			<DefaultPageMenu />
 		</div>
 	)
diff --git a/apps/examples/src/examples/custom-page-menu/README.md b/apps/examples/src/examples/custom-page-menu/README.md
index 02d8aa4ad..1573c507e 100644
--- a/apps/examples/src/examples/custom-page-menu/README.md
+++ b/apps/examples/src/examples/custom-page-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's page menu, or remove it entirely.
 
 ---
 
-The page menu can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The page menu contains options for creating and editing pages. To open the page menu, click the page name in the top left of the tldraw component. It can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
diff --git a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx
index 5ce3f8631..fad630c7d 100644
--- a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx
+++ b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx
@@ -11,7 +11,9 @@ function CustomQuickActions() {
 	return (
 		<DefaultQuickActions>
 			<DefaultQuickActionsContent />
-			<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
+			</div>
 		</DefaultQuickActions>
 	)
 }
diff --git a/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx b/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
index fdce92a80..c8d27b5c3 100644
--- a/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
+++ b/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
@@ -21,22 +21,26 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
 
 	return (
 		<DefaultStylePanel {...props}>
-			<TldrawUiButton
-				type="menu"
-				onClick={() => {
-					editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true })
-				}}
-			>
-				<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
-			</TldrawUiButton>
-			<TldrawUiButton
-				type="menu"
-				onClick={() => {
-					editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true })
-				}}
-			>
-				<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
-			</TldrawUiButton>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiButton
+					type="menu"
+					onClick={() => {
+						editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true })
+					}}
+				>
+					<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</div>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiButton
+					type="menu"
+					onClick={() => {
+						editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true })
+					}}
+				>
+					<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</div>
 			<DefaultStylePanelContent styles={styles} />
 		</DefaultStylePanel>
 	)
diff --git a/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx b/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx
index bc887b636..514348bbc 100644
--- a/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx
+++ b/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx
@@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
 function CustomZoomMenu() {
 	return (
 		<DefaultZoomMenu>
-			<TldrawUiMenuGroup id="example">
-				<TldrawUiMenuItem
-					id="like"
-					label="Like my posts"
-					icon="external-link"
-					readonlyOk
-					onSelect={() => {
-						window.open('https://x.com/tldraw', '_blank')
-					}}
-				/>
-			</TldrawUiMenuGroup>
+			<div style={{ backgroundColor: 'thistle' }}>
+				<TldrawUiMenuGroup id="example">
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</TldrawUiMenuGroup>
+			</div>
 			<DefaultZoomMenuContent />
 		</DefaultZoomMenu>
 	)
diff --git a/apps/examples/src/examples/custom-zoom-menu/README.md b/apps/examples/src/examples/custom-zoom-menu/README.md
index 8cee646ca..d3a17b86e 100644
--- a/apps/examples/src/examples/custom-zoom-menu/README.md
+++ b/apps/examples/src/examples/custom-zoom-menu/README.md
@@ -8,4 +8,4 @@ You can customize tldraw's zoom menu.
 
 ---
 
-The zoom menu can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The zoom menu is in the bottom left of the tldraw component, the button to open it is labeled with a percentage indicating the editor's current zoom level. It can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.