diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
index bcbc80bf1..f7fe3240e 100644
--- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
@@ -87,6 +87,15 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   override type: Pen[] = ['brush', 'highlighter'];
 
+  override firstUpdated() {
+    this.disposables.add(
+      this.gfx.tool.currentToolName$.subscribe(tool => {
+        if (this.type.map(String).includes(tool)) return;
+        this.tryDisposePopper();
+      })
+    );
+  }
+
   private _togglePenMenu() {
     if (this.tryDisposePopper()) return;
     !this.active && this.setEdgelessTool(this.pen$.peek());
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
index 90a31219b..b3e7b9281 100644
--- a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
@@ -43,3 +43,17 @@ test('should add highlighter', async ({ page }) => {
 
   expect(defaultLineWidth).toBe('22');
 });
+
+test('should exit drawing tools menu when Escape is pressed', async ({
+  page,
+}) => {
+  await setEdgelessTool(page, 'highlighter');
+
+  const drawingToolsMenu = page.locator('edgeless-pen-menu');
+
+  await expect(drawingToolsMenu).toBeVisible();
+
+  await page.keyboard.press('Escape');
+
+  await expect(drawingToolsMenu).toBeHidden();
+});