diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
index a5e3560e90..b4188b1e78 100644
--- a/packages/astro/e2e/dev-overlay.test.js
+++ b/packages/astro/e2e/dev-overlay.test.js
@@ -200,7 +200,7 @@ test.describe('Dev Overlay', () => {
 		await expect(settingsWindow).toHaveCount(1);
 		await expect(settingsWindow).toBeVisible();
 
-		const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' });
+		const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide toolbar' });
 		await expect(hideOverlay).toBeVisible();
 	});
 });
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 2def988020..1a3457ceb1 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -71,7 +71,7 @@ export class AstroDevOverlay extends HTMLElement {
 			}
 
 			#dev-overlay[data-hidden] #dev-bar .item {
-				opacity: 0;
+				opacity: 0.2;
 			}
 
 			#dev-bar-hitbox-above,
@@ -340,38 +340,18 @@ export class AstroDevOverlay extends HTMLElement {
 			});
 		});
 
-		// On click, show the overlay if it's hidden, it's likely the user wants to interact with it
-		this.shadowRoot.addEventListener('click', () => {
-			if (!this.isHidden()) return;
-			this.setOverlayVisible(true);
-		});
-
-		this.devOverlay!.addEventListener('keyup', (event) => {
-			if (event.code === 'Space' || event.code === 'Enter') {
-				if (!this.isHidden()) return;
-				this.setOverlayVisible(true);
-			}
-			if (event.key === 'Escape') {
-				if (this.isHidden()) return;
-				if (this.getActivePlugin()) return;
+		document.addEventListener('keyup', (event) => {
+			if (event.key !== 'Escape') return;
+			if (this.isHidden()) return;
+			const activePlugin = this.getActivePlugin();
+			if (activePlugin) {
+				this.togglePluginStatus(activePlugin);
+			} else {
 				this.setOverlayVisible(false);
 			}
 		});
 
-		document.addEventListener('keyup', (event) => {
-			if (event.key !== 'Escape') {
-				return;
-			}
-			if (this.isHidden()) {
-				return;
-			}
-			const activePlugin = this.getActivePlugin();
-			if (activePlugin) {
-				this.setPluginStatus(activePlugin, false);
-				return;
-			}
-			this.setOverlayVisible(false);
-		});
+
 	}
 
 	async initPlugin(plugin: DevOverlayPlugin) {
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
index 51d63f7ab4..08c8b6434f 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
@@ -31,6 +31,27 @@ export default {
 		document.addEventListener('astro:after-swap', async () => lint());
 		document.addEventListener('astro:page-load', async () => refreshLintPositions);
 
+		function onPageClick(event: MouseEvent) {
+			const target = event.target as Element | null;
+			if (!target) return;
+			if (!target.closest) return;
+			if (target.closest('astro-dev-toolbar')) return;
+			eventTarget.dispatchEvent(
+				new CustomEvent('toggle-plugin', {
+					detail: {
+						state: false,
+					},
+				})
+			);
+		}
+		eventTarget.addEventListener('plugin-toggled', (event: any) => {
+			if (event.detail.state === true) {
+				document.addEventListener('click', onPageClick, true);
+			} else {
+				document.removeEventListener('click', onPageClick, true);
+			}
+		});
+
 		async function lint() {
 			audits.forEach(({ highlightElement }) => {
 				highlightElement.remove();
@@ -89,8 +110,11 @@ export default {
 						}
 					</style>
 					<header>
-						<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No issues detected.</h1>
+						<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No accessibility issues detected.</h1>
 					</header>
+					<p>
+						Nice work! This app scans the page and highlights common accessibility issues for you, like a missing "alt" attribute on an image.
+					</p>
 					`
 				);
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
index daf1cae000..672b7bbda3 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
@@ -80,7 +80,7 @@ export default {
 						font-size: 16px;
 						font-weight: 400;
 						color: white;
-						margin-bottom: 0;
+						margin-bottom: 4px;
 					}
 
 					label {
@@ -114,30 +114,37 @@ export default {
 						padding: .3em;
 					}
 
-					p {
-						line-height: 2em;
+					label > section {
+						max-width: 67%;
+					}
+					p {
+						line-height: 1.5em;
 					}
-
 					a, a:visited {
 						color: var(--color-purple);
 					}
+					a:hover {
+						color: #f4ecfd;
+					}
 				</style>
 				<header>
 					<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
 				</header>
 
-				<hr />
+				<hr id="general"/>
 
-				<h2 id="general">General</h2>
-				<hr />
-				<h3>Hide overlay</h3>
-				<p>Run <code>astro preferences disable devOverlay</code> in your terminal to disable this dev overlay in this project. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences">Learn more</a>.</p>
+				<label class="setting-row">
+					<section>
+						<h3>Hide toolbar</h3>
+						Run <code>astro preferences disable devToolbar</code> in your terminal to disable the toolbar. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences" target="_blank">Learn more</a>.
+					</section>
+				</label>
 				`
 			);
 			const general = windowElement.querySelector('#general')!;
 			for (const settingsRow of settingsRows) {
-				general.after(getElementForSettingAsString(settingsRow));
 				general.after(document.createElement('hr'));
+				general.after(getElementForSettingAsString(settingsRow));
 			}
 			canvas.append(windowElement);
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
index 8ce16f7c4f..a460e2a3b0 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
@@ -15,7 +15,7 @@ export default {
 	id: 'astro:xray',
 	name: 'Inspect',
 	icon: icon,
-	init(canvas) {
+	init(canvas, eventTarget) {
 		let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = [];
 
 		addIslandsOverlay();
@@ -23,6 +23,30 @@ export default {
 		document.addEventListener('astro:after-swap', addIslandsOverlay);
 		document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);
 
+		function onPageClick(event: MouseEvent) {
+			const target = event.target as Element | null;
+			if (!target) return;
+			if (!target.closest) return;
+			if (target.closest('astro-dev-toolbar')) return;
+			event.preventDefault();
+			event.stopPropagation();
+			eventTarget.dispatchEvent(
+				new CustomEvent('toggle-plugin', {
+					detail: {
+						state: false,
+					},
+				})
+			);
+		}
+
+		eventTarget.addEventListener('plugin-toggled', (event: any) => {
+			if (event.detail.state === true) {
+				document.addEventListener('click', onPageClick, true);
+			} else {
+				document.removeEventListener('click', onPageClick, true);
+			}
+		});
+
 		function addIslandsOverlay() {
 			islandsOverlays.forEach(({ highlightElement }) => {
 				highlightElement.remove();
@@ -60,6 +84,9 @@ export default {
 					<header>
 						<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
 					</header>
+					<p>
+						It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
+					</p>
 					`
 				);
 
@@ -131,9 +158,8 @@ export default {
 			if (Object.keys(islandProps).length > 0) {
 				tooltip.sections.push({
 					title: 'Props',
-					content: `${Object.entries(islandProps)
-						.map((prop) => `<code>${prop[0]}=${getPropValue(prop[1] as any)}</code>`)
-						.join(', ')}`,
+					content: `<pre><code>${JSON.stringify(Object.fromEntries(Object.entries(islandProps)
+						.map((prop: any) =>([prop[0], prop[1][1]]))), undefined, 2)}</code></pre>`,
 				});
 			}
 
@@ -159,10 +185,5 @@ export default {
 
 			return tooltip;
 		}
-
-		function getPropValue(prop: [number, any]) {
-			const [_, value] = prop;
-			return JSON.stringify(value, null, 2);
-		}
 	},
 } satisfies DevOverlayPlugin;
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
index dbd7add5dd..d535865cf7 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
@@ -101,13 +101,18 @@ export class DevOverlayTooltip extends HTMLElement {
 				cursor: pointer;
 			}
 
-			code {
-				background: rgba(136, 58, 234, 0.33);
+			pre, code {
+				background: rgb(78, 27, 145);
 				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 				border-radius: 2px;
 				font-size: 14px;
 				padding: 2px;
 			}
+			pre {
+				padding: 1em;
+				margin: 0 0;
+				overflow: auto;
+			}
 			`;
 
 		const fragment = new DocumentFragment();
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
index 0873d888d8..bab936d4bb 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
@@ -70,6 +70,10 @@ export class DevOverlayWindow extends HTMLElement {
 					border: 1px solid rgba(27, 30, 36, 1);
 					margin: 1em 0;
 				}
+
+				p, ::slotted(p) {
+					line-height: 1.5em;
+				}
 			</style>
 
 			<slot />