diff --git a/README.md b/README.md
index 718d32c94d..19e0db1307 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,7 @@ Our latest news can be found on [Twitter](https://twitter.com/AffineOfficial), [
 
 # Contact Us
 
-You may contact us by emailing to: contact@toeverything.info 
+You may contact us by emailing to: contact@toeverything.info
 
 # The Philosophy of AFFiNE
 
diff --git a/libs/components/affine-board/src/Board.tsx b/libs/components/affine-board/src/Board.tsx
index af9e8982fe..101d54d37b 100644
--- a/libs/components/affine-board/src/Board.tsx
+++ b/libs/components/affine-board/src/Board.tsx
@@ -134,17 +134,14 @@ const AffineBoard = ({
                             }
                         })
                     );
-                    let pageBindingsString = (
+                    const pageBindingsString = (
                         await services.api.editorBlock.get({
                             workspace: workspace,
                             ids: [rootBlockId],
                         })
                     )?.[0].properties.bindings?.value;
-                    console.log(123123123);
-                    let pageBindings = JSON.parse(pageBindingsString ?? '{}');
-                    console.log(pageBindings, 3333, bindings);
+                    const pageBindings = JSON.parse(pageBindingsString ?? '{}');
                     Object.keys(bindings).forEach(bindingsKey => {
-                        console.log(345345345345345);
                         if (!bindings[bindingsKey]) {
                             delete pageBindings[bindingsKey];
                         } else {
diff --git a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
index 3ef546ca3c..ce6cb97574 100644
--- a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
@@ -35,6 +35,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 
 export const LineTools = ({ app }: { app: TldrawApp }) => {
     const activeTool = app.useStore(activeToolSelector);
+    const [visible, setVisible] = useState(false);
 
     const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
         TDShapeType.Line
@@ -51,8 +52,10 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
 
     return (
         <Popover
+            visible={visible}
             placement="right-start"
-            trigger="click"
+            onClick={() => setVisible(prev => !prev)}
+            onClickAway={() => setVisible(false)}
             content={
                 <ShapesContainer>
                     {shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -60,6 +63,7 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
                             <IconButton
                                 onClick={() => {
                                     app.selectTool(type);
+                                    setVisible(false);
                                     setLastActiveTool(type);
                                 }}
                             >
diff --git a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
index eb2fb5c564..0c04126c95 100644
--- a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
@@ -71,6 +71,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 
 export const ShapeTools = ({ app }: { app: TldrawApp }) => {
     const activeTool = app.useStore(activeToolSelector);
+    const [visible, setVisible] = useState(false);
 
     const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
         TDShapeType.Rectangle
@@ -87,8 +88,10 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
 
     return (
         <Popover
+            visible={visible}
             placement="right-start"
-            trigger="click"
+            onClick={() => setVisible(prev => !prev)}
+            onClickAway={() => setVisible(false)}
             content={
                 <ShapesContainer>
                     {shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -96,6 +99,7 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
                             <IconButton
                                 onClick={() => {
                                     app.selectTool(type);
+                                    setVisible(false);
                                     setLastActiveTool(type);
                                 }}
                             >
diff --git a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
index f659fdff1c..82a5315816 100644
--- a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
@@ -12,12 +12,12 @@ import {
 import {
     IconButton,
     PopoverContainer,
+    styled,
     // MuiIconButton as IconButton,
     // MuiTooltip as Tooltip,
     Tooltip,
     useTheme,
 } from '@toeverything/components/ui';
-import style9 from 'style9';
 
 import { TldrawApp } from '@toeverything/components/board-state';
 import {
@@ -90,8 +90,8 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
             }}
             direction="none"
         >
-            <div className={styles('container')}>
-                <div className={styles('toolBar')}>
+            <Container>
+                <ToolBar>
                     {tools.map(
                         ({
                             type,
@@ -127,24 +127,22 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
                                 </Tooltip>
                             )
                     )}
-                </div>
-            </div>
+                </ToolBar>
+            </Container>
         </PopoverContainer>
     );
 };
 
-const styles = style9.create({
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    toolBar: {
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: '#ffffff',
-        borderRadius: '10px',
-        padding: '4px 4px',
-    },
+const Container = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100%',
+});
+const ToolBar = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#ffffff',
+    borderRadius: '10px',
+    padding: '4px 4px',
 });
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
index 0536acfce1..c955afba0d 100644
--- a/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
@@ -12,7 +12,7 @@ import {
     styled,
     Tooltip,
 } from '@toeverything/components/ui';
-import { ReactElement, type CSSProperties } from 'react';
+import { useState, type CSSProperties, type ReactElement } from 'react';
 import { Palette } from '../../palette';
 import { Pen } from './Pen';
 
@@ -106,6 +106,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
 
 export const PenTools = ({ app }: { app: TldrawApp }) => {
     const appCurrentTool = app.useStore(state => state.appState.activeTool);
+    const [visible, setVisible] = useState(false);
     const chosenPen =
         PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
         PENCIL_CONFIGS[0];
@@ -134,8 +135,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
 
     return (
         <Popover
+            visible={visible}
             placement="right-start"
-            trigger="click"
+            onClick={() => setVisible(prev => !prev)}
+            onClickAway={() => setVisible(false)}
             content={
                 <Container>
                     <PensContainer>
@@ -153,7 +156,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
                                         name={title}
                                         primaryColor={color_vars['--color-0']}
                                         secondaryColor={color_vars['--color-1']}
-                                        onClick={() => setPen(key)}
+                                        onClick={() => {
+                                            setVisible(false);
+                                            setPen(key);
+                                        }}
                                     />
                                 );
                             }
@@ -163,7 +169,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
                     <Palette
                         selected={chosenColor}
                         colors={PENCIL_CONFIGS_MAP[chosenPenKey].colors}
-                        onSelect={color => setPenColor(color)}
+                        onSelect={color => {
+                            setVisible(false);
+                            setPenColor(color);
+                        }}
                     />
                     <div />
                 </Container>
diff --git a/libs/components/ui/src/cascader/Cascader.tsx b/libs/components/ui/src/cascader/Cascader.tsx
index 1ba44aab6b..7bf43413f2 100644
--- a/libs/components/ui/src/cascader/Cascader.tsx
+++ b/libs/components/ui/src/cascader/Cascader.tsx
@@ -1,5 +1,5 @@
 import { ArrowRightIcon } from '@toeverything/components/icons';
-import { ReactElement, useRef, useState } from 'react';
+import { useRef, useState, type ReactElement } from 'react';
 import { Divider } from '../divider';
 import {
     MuiGrow as Grow,
diff --git a/libs/components/ui/src/popper/Popper.tsx b/libs/components/ui/src/popper/Popper.tsx
index 924e3be8fd..55d5692927 100644
--- a/libs/components/ui/src/popper/Popper.tsx
+++ b/libs/components/ui/src/popper/Popper.tsx
@@ -35,6 +35,8 @@ export const Popper = ({
     offset = [0, 5],
     showArrow = false,
     popperHandlerRef,
+    onClick,
+    onClickAway,
     ...popperProps
 }: PopperProps) => {
     const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
@@ -97,15 +99,20 @@ export const Popper = ({
     return (
         <ClickAwayListener
             onClickAway={() => {
-                setVisible(false);
+                if (visibleControlledByParent) {
+                    onClickAway?.();
+                } else {
+                    setVisible(false);
+                }
             }}
         >
             <Container>
                 {isAnchorCustom ? null : (
                     <div
                         ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
-                        onClick={() => {
+                        onClick={e => {
                             if (!hasClickTrigger || visibleControlledByParent) {
+                                onClick?.(e);
                                 return;
                             }
                             setVisible(!visible);
diff --git a/libs/components/ui/src/popper/interface.ts b/libs/components/ui/src/popper/interface.ts
index b449eff61f..1f7473ebf4 100644
--- a/libs/components/ui/src/popper/interface.ts
+++ b/libs/components/ui/src/popper/interface.ts
@@ -62,4 +62,6 @@ export type PopperProps = {
     showArrow?: boolean;
 
     popperHandlerRef?: Ref<PopperHandler>;
+
+    onClickAway?: () => void;
 } & Omit<PopperUnstyledProps, 'open' | 'ref'>;