diff --git a/app/src/history/resizeSide.ts b/app/src/history/resizeSide.ts
index c5c0afc8a..e4d71d488 100644
--- a/app/src/history/resizeSide.ts
+++ b/app/src/history/resizeSide.ts
@@ -2,37 +2,41 @@ import {Constants} from "../constants";
 import {setStorageVal} from "../protyle/util/compatibility";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
 
-export const resizeSide = (targetElement: HTMLElement, element: HTMLElement, key:string) => {
+export const resizeSide = (targetElement: HTMLElement, previousElement: HTMLElement, key?: string) => {
     targetElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
-        const dialogBodyElement = hasClosestByClassName(element, "b3-dialog__body");
-        if (!dialogBodyElement) {
+        const parentElement = hasClosestByClassName(previousElement, "b3-dialog__body") || hasClosestByClassName(previousElement, "protyle-util");
+        if (!parentElement) {
             return;
         }
-        dialogBodyElement.style.userSelect = "none";
+        parentElement.style.userSelect = "none";
+        parentElement.style.pointerEvents = "none";
 
         const documentSelf = document;
         documentSelf.ondragstart = () => false;
 
         const x = event.clientX;
-        const width = element.clientWidth;
-        const maxWidth = dialogBodyElement.clientWidth - 256;
+        const width = previousElement.clientWidth;
+        const maxWidth = parentElement.clientWidth - 256;
         documentSelf.onmousemove = (moveEvent: MouseEvent) => {
             const newWidth = width + (moveEvent.clientX - x);
             if (newWidth < 256 || newWidth > maxWidth) {
                 return;
             }
-            element.style.width = newWidth + "px";
+            previousElement.style.width = newWidth + "px";
         };
 
         documentSelf.onmouseup = () => {
-            dialogBodyElement.style.userSelect = "auto";
+            parentElement.style.userSelect = "auto";
+            parentElement.style.pointerEvents = "";
             documentSelf.onmousemove = null;
             documentSelf.onmouseup = null;
             documentSelf.ondragstart = null;
             documentSelf.onselectstart = null;
             documentSelf.onselect = null;
-            window.siyuan.storage[Constants.LOCAL_HISTORY][key] = element.clientWidth + "px";
-            setStorageVal(Constants.LOCAL_HISTORY, window.siyuan.storage[Constants.LOCAL_HISTORY]);
+            if (key) {
+                window.siyuan.storage[Constants.LOCAL_HISTORY][key] = previousElement.clientWidth + "px";
+                setStorageVal(Constants.LOCAL_HISTORY, window.siyuan.storage[Constants.LOCAL_HISTORY]);
+            }
         };
     });
 };
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index 5ed741c82..49ace8eab 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -28,9 +28,6 @@ import {blockRender} from "../render/blockRender";
 /// #if !BROWSER
 import {openBy} from "../../editor/util";
 /// #endif
-/// #if !MOBILE
-import {moveResize} from "../../dialog/moveResize";
-/// #endif
 import {fetchPost} from "../../util/fetch";
 import {isArrayEqual, isMobile} from "../../util/functions";
 import * as dayjs from "dayjs";
@@ -48,6 +45,7 @@ import {addScript} from "../util/addScript";
 import {confirmDialog} from "../../dialog/confirmDialog";
 import {pasteAsPlainText, pasteEscaped, pasteText} from "../util/paste";
 import {escapeHtml} from "../../util/escape";
+import {resizeSide} from "../../history/resizeSide";
 
 export class Toolbar {
     public element: HTMLElement;
@@ -986,14 +984,6 @@ export class Toolbar {
                 });
             }, Constants.TIMEOUT_LOAD);
         };
-        /// #if !MOBILE
-        moveResize(this.subElement, () => {
-            const pinElement = headerElement.querySelector('[data-type="pin"]');
-            pinElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin");
-            pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
-            this.subElement.firstElementChild.setAttribute("data-drag", "true");
-        });
-        /// #endif
         const textElement = this.subElement.querySelector(".b3-text-field") as HTMLTextAreaElement;
         if (types.includes("NodeHTMLBlock")) {
             textElement.value = Lute.UnEscapeHTMLStr(renderElement.querySelector("protyle-html").getAttribute("data-content") || "");
@@ -1296,7 +1286,7 @@ export class Toolbar {
         this.subElement.style.width = "";
         this.subElement.style.padding = "";
         this.subElement.innerHTML = `<div style="max-height:50vh" class="fn__flex">
-<div class="fn__flex-column" style="${isMobile() ? "width: 100%" : "width: 280px"}">
+<div class="fn__flex-column" style="${isMobile() ? "width: 100%" : "width: 256px"}">
     <div class="fn__flex" style="margin: 0 8px 4px 8px">
         <input class="b3-text-field fn__flex-1"/>
         <span class="fn__space"></span>
@@ -1306,9 +1296,14 @@ export class Toolbar {
     </div>
     <div class="b3-list fn__flex-1 b3-list--background" style="position: relative"><img style="margin: 0 auto;display: block;width: 64px;height: 64px" src="/stage/loading-pure.svg"></div>
 </div>
-<div style="width: 520px;${isMobile() || window.outerWidth < window.outerWidth / 2 + 520 ? "display:none" : ""};overflow: auto;"></div>
+<div class="toolbarResize" style="    cursor: col-resize;
+    box-shadow: 2px 0 0 0 var(--b3-theme-surface) inset, 3px 0 0 0 var(--b3-border-color) inset;
+    width: 5px;
+    margin-left: -2px;"></div>
+<div style="width: 520px;${isMobile() || window.outerWidth < window.outerWidth / 2 + 520 ? "display:none;" : ""}overflow: auto;"></div>
 </div>`;
         const listElement = this.subElement.querySelector(".b3-list");
+        resizeSide(this.subElement.querySelector(".toolbarResize"), listElement.parentElement);
         const previewElement = this.subElement.firstElementChild.lastElementChild;
         let previewPath: string;
         listElement.addEventListener("mouseover", (event) => {
diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts
index cacfb0835..46488d422 100644
--- a/app/src/protyle/ui/initUI.ts
+++ b/app/src/protyle/ui/initUI.ts
@@ -12,6 +12,9 @@ import {getContenteditableElement, getLastBlock} from "../wysiwyg/getBlock";
 import {genEmptyElement} from "../../block/util";
 import {transaction} from "../wysiwyg/transaction";
 import {focusByRange} from "../util/selection";
+/// #if !MOBILE
+import {moveResize} from "../../dialog/moveResize";
+/// #endif
 
 export const initUI = (protyle: IProtyle) => {
     protyle.contentElement = document.createElement("div");
@@ -47,6 +50,16 @@ export const initUI = (protyle: IProtyle) => {
 
     protyle.element.appendChild(protyle.toolbar.element);
     protyle.element.appendChild(protyle.toolbar.subElement);
+    /// #if !MOBILE
+    moveResize(protyle.toolbar.subElement, () => {
+        const pinElement = protyle.toolbar.subElement.querySelector('.block__icons [data-type="pin"]');
+        if (pinElement) {
+            pinElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin");
+            pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
+            protyle.toolbar.subElement.firstElementChild.setAttribute("data-drag", "true");
+        }
+    });
+    /// #endif
 
     protyle.element.append(protyle.highlight.styleElement);
 
diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts
index 9c42fe1fd..ccef5e2c9 100644
--- a/app/src/protyle/util/resize.ts
+++ b/app/src/protyle/util/resize.ts
@@ -23,7 +23,6 @@ export const recordBeforeResizeTop = () => {
             if (!topElement) {
                 return;
             }
-            console.log(topElement);
             topElement.setAttribute("data-resize-top", topElement.getBoundingClientRect().top.toString());
         }
     });