diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 7864565304..42aa51c1ad 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -33,6 +33,7 @@
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-fragment-frame-panel": "workspace:*",
     "@blocksuite/affine-fragment-outline": "workspace:*",
+    "@blocksuite/affine-gfx-brush": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
@@ -121,6 +122,7 @@
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",
     "./gfx/text": "./src/gfx/text.ts",
+    "./gfx/brush": "./src/gfx/brush.ts",
     "./gfx/shape": "./src/gfx/shape.ts",
     "./gfx/note": "./src/gfx/note.ts",
     "./gfx/mindmap": "./src/gfx/mindmap.ts",
diff --git a/blocksuite/affine/all/src/gfx/brush.ts b/blocksuite/affine/all/src/gfx/brush.ts
new file mode 100644
index 0000000000..813d0de32f
--- /dev/null
+++ b/blocksuite/affine/all/src/gfx/brush.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-brush';
diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json
index 89fc97d120..7aca2bd51f 100644
--- a/blocksuite/affine/all/tsconfig.json
+++ b/blocksuite/affine/all/tsconfig.json
@@ -30,6 +30,7 @@
     { "path": "../fragments/fragment-doc-title" },
     { "path": "../fragments/fragment-frame-panel" },
     { "path": "../fragments/fragment-outline" },
+    { "path": "../gfx/brush" },
     { "path": "../gfx/connector" },
     { "path": "../gfx/group" },
     { "path": "../gfx/mindmap" },
diff --git a/blocksuite/affine/blocks/block-root/package.json b/blocksuite/affine/blocks/block-root/package.json
index 8c8048a66c..2b13d5943a 100644
--- a/blocksuite/affine/blocks/block-root/package.json
+++ b/blocksuite/affine/blocks/block-root/package.json
@@ -27,6 +27,7 @@
     "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
+    "@blocksuite/affine-gfx-brush": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
index 2460150c98..afe60d3906 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
@@ -1,5 +1,7 @@
 import { frameQuickTool } from '@blocksuite/affine-block-frame';
+import { penSeniorTool } from '@blocksuite/affine-gfx-brush';
 import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
+import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
 import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
 import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
 import {
@@ -28,34 +30,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
-  return {
-    name: 'Pen',
-    content: html`<div class="brush-and-eraser">
-      <edgeless-brush-tool-button
-        .edgeless=${block}
-      ></edgeless-brush-tool-button>
-
-      <edgeless-eraser-tool-button
-        .edgeless=${block}
-      ></edgeless-eraser-tool-button>
-    </div> `,
-  };
-});
-
-const mindMapSeniorTool = SeniorToolExtension(
-  'mindMap',
-  ({ block, toolbarContainer }) => {
-    return {
-      name: 'Mind Map',
-      content: html`<edgeless-mindmap-tool-button
-        .edgeless=${block}
-        .toolbarContainer=${toolbarContainer}
-      ></edgeless-mindmap-tool-button>`,
-    };
-  }
-);
-
 const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
   return {
     name: 'Template',
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
index d1b9375d89..ff104deabc 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
@@ -1,5 +1,6 @@
 import { edgelessTextToolbarExtension } from '@blocksuite/affine-block-edgeless-text';
 import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
+import { brushToolbarExtension } from '@blocksuite/affine-gfx-brush';
 import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
 import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
 import { mindmapToolbarExtension } from '@blocksuite/affine-gfx-mindmap';
@@ -9,7 +10,6 @@ import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 
-import { builtinBrushToolbarConfig } from './brush';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
@@ -17,10 +17,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   groupToolbarExtension,
 
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:brush'),
-    config: builtinBrushToolbarConfig,
-  }),
+  brushToolbarExtension,
 
   connectorToolbarExtension,
 
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
index de2be600c7..bc1f6d19d4 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
@@ -4,6 +4,7 @@ import {
   PresentTool,
 } from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
+import { BrushTool, EraserTool } from '@blocksuite/affine-gfx-brush';
 import {
   ConnectorFilter,
   ConnectorTool,
@@ -24,10 +25,8 @@ import type { ExtensionType } from '@blocksuite/store';
 import { EdgelessElementToolbarExtension } from './configs/toolbar';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { SnapExtension } from './element-transform/snap-manager.js';
-import { BrushTool } from './gfx-tool/brush-tool.js';
 import { DefaultTool } from './gfx-tool/default-tool.js';
 import { EmptyTool } from './gfx-tool/empty-tool.js';
-import { EraserTool } from './gfx-tool/eraser-tool.js';
 import { LassoTool } from './gfx-tool/lasso-tool.js';
 import { PanTool } from './gfx-tool/pan-tool.js';
 import { TemplateTool } from './gfx-tool/template-tool.js';
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts
index 29bdbe4222..b703333308 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts
@@ -1,7 +1,5 @@
-export { BrushTool } from './brush-tool.js';
 export { DefaultTool } from './default-tool.js';
 export { EmptyTool } from './empty-tool.js';
-export { EraserTool } from './eraser-tool.js';
 export { LassoTool, type LassoToolOption } from './lasso-tool.js';
 export { PanTool, type PanToolOption } from './pan-tool.js';
 export { TemplateTool } from './template-tool.js';
diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts
index ec16771216..ad93ff20c6 100644
--- a/blocksuite/affine/blocks/block-root/src/effects.ts
+++ b/blocksuite/affine/blocks/block-root/src/effects.ts
@@ -1,3 +1,4 @@
+import { effects as gfxBrushEffects } from '@blocksuite/affine-gfx-brush/effects';
 import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
 import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
 import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
@@ -20,12 +21,9 @@ import {
   EDGELESS_SELECTED_RECT_WIDGET,
   EdgelessSelectedRectWidget,
 } from './edgeless/components/rects/edgeless-selected-rect.js';
-import { EdgelessBrushMenu } from './edgeless/components/toolbar/brush/brush-menu.js';
-import { EdgelessBrushToolButton } from './edgeless/components/toolbar/brush/brush-tool-button.js';
 import { EdgelessSlideMenu } from './edgeless/components/toolbar/common/slide-menu.js';
 import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar-arrow-up-icon.js';
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
-import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
@@ -101,6 +99,7 @@ function registerGfxEffects() {
   gfxConnectorEffects();
   gfxMindmapEffects();
   gfxGroupEffects();
+  gfxBrushEffects();
 }
 
 function registerWidgets() {
@@ -123,21 +122,15 @@ function registerWidgets() {
 
 function registerEdgelessToolbarComponents() {
   // Tool buttons
-  customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
   customElements.define(
     'edgeless-default-tool-button',
     EdgelessDefaultToolButton
   );
-  customElements.define(
-    'edgeless-eraser-tool-button',
-    EdgelessEraserToolButton
-  );
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
   customElements.define('edgeless-template-button', EdgelessTemplateButton);
 
   // Menus
-  customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
 
   // Toolbar components
@@ -196,12 +189,9 @@ declare global {
     'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
     'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
-    'edgeless-brush-menu': EdgelessBrushMenu;
-    'edgeless-brush-tool-button': EdgelessBrushToolButton;
     'edgeless-slide-menu': EdgelessSlideMenu;
     'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
-    'edgeless-eraser-tool-button': EdgelessEraserToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'overlay-scrollbar': OverlayScrollbar;
diff --git a/blocksuite/affine/blocks/block-root/tsconfig.json b/blocksuite/affine/blocks/block-root/tsconfig.json
index c99693331b..d0f1c98bea 100644
--- a/blocksuite/affine/blocks/block-root/tsconfig.json
+++ b/blocksuite/affine/blocks/block-root/tsconfig.json
@@ -24,6 +24,7 @@
     { "path": "../block-table" },
     { "path": "../../components" },
     { "path": "../../fragments/fragment-doc-title" },
+    { "path": "../../gfx/brush" },
     { "path": "../../gfx/connector" },
     { "path": "../../gfx/group" },
     { "path": "../../gfx/mindmap" },
diff --git a/blocksuite/affine/gfx/brush/package.json b/blocksuite/affine/gfx/brush/package.json
new file mode 100644
index 0000000000..a8186667f4
--- /dev/null
+++ b/blocksuite/affine/gfx/brush/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-gfx-brush",
+  "description": "Gfx brush for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/brush-tool.ts b/blocksuite/affine/gfx/brush/src/brush-tool.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/brush-tool.ts
rename to blocksuite/affine/gfx/brush/src/brush-tool.ts
diff --git a/blocksuite/affine/gfx/brush/src/effects.ts b/blocksuite/affine/gfx/brush/src/effects.ts
new file mode 100644
index 0000000000..b6acbca301
--- /dev/null
+++ b/blocksuite/affine/gfx/brush/src/effects.ts
@@ -0,0 +1,20 @@
+import { EdgelessBrushMenu } from './toolbar/components/brush/brush-menu';
+import { EdgelessBrushToolButton } from './toolbar/components/brush/brush-tool-button';
+import { EdgelessEraserToolButton } from './toolbar/components/eraser/eraser-tool-button';
+
+export function effects() {
+  customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
+  customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
+  customElements.define(
+    'edgeless-eraser-tool-button',
+    EdgelessEraserToolButton
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-brush-tool-button': EdgelessBrushToolButton;
+    'edgeless-brush-menu': EdgelessBrushMenu;
+    'edgeless-eraser-tool-button': EdgelessEraserToolButton;
+  }
+}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/eraser-tool.ts b/blocksuite/affine/gfx/brush/src/eraser-tool.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/eraser-tool.ts
rename to blocksuite/affine/gfx/brush/src/eraser-tool.ts
diff --git a/blocksuite/affine/gfx/brush/src/index.ts b/blocksuite/affine/gfx/brush/src/index.ts
new file mode 100644
index 0000000000..5a519b6f4d
--- /dev/null
+++ b/blocksuite/affine/gfx/brush/src/index.ts
@@ -0,0 +1,4 @@
+export * from './brush-tool';
+export * from './eraser-tool';
+export * from './toolbar/config';
+export * from './toolbar/senior-tool';
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-menu.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-menu.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-tool-button.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-tool-button.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/brush-tool-button.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/icons.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/brush/icons.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/icons.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/components/brush/icons.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts
similarity index 96%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts
index 6393522f2c..4653b6b823 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/eraser-tool-button.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts
@@ -41,6 +41,7 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
         {
           Escape: () => {
             if (this.edgelessTool.type === 'eraser') {
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
               this.setEdgelessTool({ type: 'default' });
             }
           },
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/icons.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/eraser/icons.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/eraser/icons.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/components/eraser/icons.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts b/blocksuite/affine/gfx/brush/src/toolbar/config.ts
similarity index 88%
rename from blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
rename to blocksuite/affine/gfx/brush/src/toolbar/config.ts
index 73ae99f206..e38924ca2f 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/config.ts
@@ -9,14 +9,18 @@ import {
   LineWidth,
   resolveColor,
 } from '@blocksuite/affine-model';
-import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+import {
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
 import {
   getMostCommonResolvedValue,
   getMostCommonValue,
 } from '@blocksuite/affine-shared/utils';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { html } from 'lit';
 
-export const builtinBrushToolbarConfig = {
+export const brushToolbarConfig = {
   actions: [
     {
       id: 'a.line-width',
@@ -98,3 +102,8 @@ export const builtinBrushToolbarConfig = {
 
   when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
 } as const satisfies ToolbarModuleConfig;
+
+export const brushToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:brush'),
+  config: brushToolbarConfig,
+});
diff --git a/blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts
new file mode 100644
index 0000000000..6648e7fa3b
--- /dev/null
+++ b/blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts
@@ -0,0 +1,17 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
+  return {
+    name: 'Pen',
+    content: html`<div class="brush-and-eraser">
+      <edgeless-brush-tool-button
+        .edgeless=${block}
+      ></edgeless-brush-tool-button>
+
+      <edgeless-eraser-tool-button
+        .edgeless=${block}
+      ></edgeless-eraser-tool-button>
+    </div> `,
+  };
+});
diff --git a/blocksuite/affine/gfx/brush/tsconfig.json b/blocksuite/affine/gfx/brush/tsconfig.json
new file mode 100644
index 0000000000..5b280fe89a
--- /dev/null
+++ b/blocksuite/affine/gfx/brush/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/store" }
+  ]
+}
diff --git a/blocksuite/affine/gfx/mindmap/src/index.ts b/blocksuite/affine/gfx/mindmap/src/index.ts
index a8a2e22422..0836b3bed8 100644
--- a/blocksuite/affine/gfx/mindmap/src/index.ts
+++ b/blocksuite/affine/gfx/mindmap/src/index.ts
@@ -1,5 +1,6 @@
 export * from './element-transform';
 export * from './indicator-overlay';
 export * from './toolbar/config';
+export * from './toolbar/senior-tool';
 export * from './utils';
 export * from './view';
diff --git a/blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts
new file mode 100644
index 0000000000..11e35c5c41
--- /dev/null
+++ b/blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts
@@ -0,0 +1,15 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const mindMapSeniorTool = SeniorToolExtension(
+  'mindMap',
+  ({ block, toolbarContainer }) => {
+    return {
+      name: 'Mind Map',
+      content: html`<edgeless-mindmap-tool-button
+        .edgeless=${block}
+        .toolbarContainer=${toolbarContainer}
+      ></edgeless-mindmap-tool-button>`,
+    };
+  }
+);
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index bac0a463d8..964913d50f 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -28,6 +28,7 @@ export const PackageList = [
       'blocksuite/affine/fragments/fragment-doc-title',
       'blocksuite/affine/fragments/fragment-frame-panel',
       'blocksuite/affine/fragments/fragment-outline',
+      'blocksuite/affine/gfx/brush',
       'blocksuite/affine/gfx/connector',
       'blocksuite/affine/gfx/group',
       'blocksuite/affine/gfx/mindmap',
@@ -312,6 +313,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/block-table',
       'blocksuite/affine/components',
       'blocksuite/affine/fragments/fragment-doc-title',
+      'blocksuite/affine/gfx/brush',
       'blocksuite/affine/gfx/connector',
       'blocksuite/affine/gfx/group',
       'blocksuite/affine/gfx/mindmap',
@@ -450,6 +452,21 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/gfx/brush',
+    name: '@blocksuite/affine-gfx-brush',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/block-surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/rich-text',
+      'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/gfx/connector',
     name: '@blocksuite/affine-gfx-connector',
@@ -1145,6 +1162,7 @@ export type PackageName =
   | '@blocksuite/affine-fragment-doc-title'
   | '@blocksuite/affine-fragment-frame-panel'
   | '@blocksuite/affine-fragment-outline'
+  | '@blocksuite/affine-gfx-brush'
   | '@blocksuite/affine-gfx-connector'
   | '@blocksuite/affine-gfx-group'
   | '@blocksuite/affine-gfx-mindmap'
diff --git a/tsconfig.json b/tsconfig.json
index 6eb4508579..161a76487a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -75,6 +75,7 @@
     { "path": "./blocksuite/affine/fragments/fragment-doc-title" },
     { "path": "./blocksuite/affine/fragments/fragment-frame-panel" },
     { "path": "./blocksuite/affine/fragments/fragment-outline" },
+    { "path": "./blocksuite/affine/gfx/brush" },
     { "path": "./blocksuite/affine/gfx/connector" },
     { "path": "./blocksuite/affine/gfx/group" },
     { "path": "./blocksuite/affine/gfx/mindmap" },
diff --git a/yarn.lock b/yarn.lock
index 4a477016e9..b4d891727b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2733,6 +2733,7 @@ __metadata:
     "@blocksuite/affine-block-table": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-fragment-doc-title": "workspace:*"
+    "@blocksuite/affine-gfx-brush": "workspace:*"
     "@blocksuite/affine-gfx-connector": "workspace:*"
     "@blocksuite/affine-gfx-group": "workspace:*"
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
@@ -2972,6 +2973,33 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-gfx-brush@workspace:*, @blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush"
+  dependencies:
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-rich-text": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.6"
+    "@blocksuite/store": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    minimatch: "npm:^10.0.1"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-gfx-connector@workspace:*, @blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector"
@@ -3629,6 +3657,7 @@ __metadata:
     "@blocksuite/affine-fragment-doc-title": "workspace:*"
     "@blocksuite/affine-fragment-frame-panel": "workspace:*"
     "@blocksuite/affine-fragment-outline": "workspace:*"
+    "@blocksuite/affine-gfx-brush": "workspace:*"
     "@blocksuite/affine-gfx-connector": "workspace:*"
     "@blocksuite/affine-gfx-group": "workspace:*"
     "@blocksuite/affine-gfx-mindmap": "workspace:*"