diff --git a/package-lock.json b/package-lock.json
index ec2e4f2..5f9d59c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@arco-design/web-react": "^2.48.2",
         "@codemirror/lang-sql": "^6.5.0",
         "@douyinfe/semi-ui": "^2.36.0",
         "@lezer/highlight": "^1.1.5",
@@ -25,7 +24,6 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
-        "react-resizable": "^3.0.5",
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -78,38 +76,6 @@
         "ajv": ">=8"
       }
     },
-    "node_modules/@arco-design/color": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@arco-design/color/-/color-0.4.0.tgz",
-      "integrity": "sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==",
-      "dependencies": {
-        "color": "^3.1.3"
-      }
-    },
-    "node_modules/@arco-design/web-react": {
-      "version": "2.49.2",
-      "resolved": "https://registry.npmjs.org/@arco-design/web-react/-/web-react-2.49.2.tgz",
-      "integrity": "sha512-oceXT0rgpitPwgXpSSjezfy7dzauCyeyviYGp9Dj/l2fftcAsYdjJnozbEBxuffQdpf+uIFVibbVwZ5jeZtyxg==",
-      "dependencies": {
-        "@arco-design/color": "^0.4.0",
-        "@babel/runtime": "^7.5.5",
-        "b-tween": "^0.3.3",
-        "b-validate": "^1.4.2",
-        "compute-scroll-into-view": "^1.0.17",
-        "dayjs": "^1.10.5",
-        "lodash": "^4.17.21",
-        "number-precision": "^1.3.1",
-        "react-focus-lock": "^2.9.1",
-        "react-transition-group": "^4.3.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "scroll-into-view-if-needed": "2.2.20",
-        "shallowequal": "^1.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
@@ -5573,16 +5539,6 @@
         "dequal": "^2.0.3"
       }
     },
-    "node_modules/b-tween": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/b-tween/-/b-tween-0.3.3.tgz",
-      "integrity": "sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA=="
-    },
-    "node_modules/b-validate": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/b-validate/-/b-validate-1.5.2.tgz",
-      "integrity": "sha512-zhIdocs1x9fJYBMc5Qe2kS3iJv8oRA55S3vV9ucdX+//ySV17PVuGGtwl6lwbbNvdjUt3Pt6ujL0GaVsXJy2ZA=="
-    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -6367,15 +6323,6 @@
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
       "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
     },
-    "node_modules/color": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-      "dependencies": {
-        "color-convert": "^1.9.3",
-        "color-string": "^1.6.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6392,28 +6339,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
-    "node_modules/color/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -7092,11 +7017,6 @@
         "date-fns": ">=2.0.0"
       }
     },
-    "node_modules/dayjs": {
-      "version": "1.11.8",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
-      "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -7244,11 +7164,6 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -7357,15 +7272,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8718,17 +8624,6 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
-    "node_modules/focus-lock": {
-      "version": "0.11.6",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.11.6.tgz",
-      "integrity": "sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==",
-      "dependencies": {
-        "tslib": "^2.0.3"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -13101,11 +12996,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/number-precision": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/number-precision/-/number-precision-1.6.0.tgz",
-      "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ=="
-    },
     "node_modules/nwsapi": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.5.tgz",
@@ -15075,17 +14965,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/react-clientside-effect": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
-      "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13"
-      },
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15210,28 +15089,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
-    "node_modules/react-focus-lock": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.4.tgz",
-      "integrity": "sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.11.6",
-        "prop-types": "^15.6.2",
-        "react-clientside-effect": "^1.2.6",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15245,18 +15102,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-resizable": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
-      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
-      "dependencies": {
-        "prop-types": "15.x",
-        "react-draggable": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">= 16.3"
-      }
-    },
     "node_modules/react-router": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
@@ -15374,21 +15219,6 @@
         "react-dom": "^16.3.0 || ^17.0.0"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/react-window": {
       "version": "1.8.9",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
@@ -15938,19 +15768,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.20",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.20.tgz",
-      "integrity": "sha512-P9kYMrhi9f6dvWwTGpO5I3HgjSU/8Mts7xL3lkoH5xlewK7O9Obdc5WmMCzppln7bCVGNmf3qfoZXrpCeyNJXw==",
-      "dependencies": {
-        "compute-scroll-into-view": "1.0.11"
-      }
-    },
-    "node_modules/scroll-into-view-if-needed/node_modules/compute-scroll-into-view": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz",
-      "integrity": "sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A=="
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16135,11 +15952,6 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16185,19 +15997,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -17338,47 +17137,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
-      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 6c9052a..b1a890c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@arco-design/web-react": "^2.48.2",
     "@codemirror/lang-sql": "^6.5.0",
     "@douyinfe/semi-ui": "^2.36.0",
     "@lezer/highlight": "^1.1.5",
@@ -20,7 +19,6 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index bb1f111..46917f4 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -235,7 +235,7 @@ export default function Canvas(props) {
   );
 
   return (
-    <div ref={drop} className="flex-grow" id="canvas">
+    <div ref={drop} className="flex-grow" id="canvas" onMouseUp={()=>props.setResize(false)}>
       <div ref={canvas} className="w-full h-screen">
         <svg
           onMouseMove={handleMouseMove}
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index c1c8d6f..53e9263 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -1,5 +1,4 @@
 import { React, useState, useRef } from "react";
-import { ResizableBox } from "react-resizable";
 import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
@@ -7,7 +6,6 @@ import { tags as t } from "@lezer/highlight";
 import Shape from "./shape";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
-import "react-resizable/css/styles.css";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
@@ -30,6 +28,14 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
+  const [width, setWidth] = useState(320);
+
+  const dragHandler = (e) => {
+    if (!props.resize) return;
+    const w = e.clientX;
+    if (w > 320) setWidth(w);
+  };
+
   const tabList = [
     { tab: "Tables", itemKey: "1" },
     { tab: "References", itemKey: "2" },
@@ -64,16 +70,12 @@ const EditorPanel = (props) => {
   ];
 
   return (
-    <ResizableBox
-      className="shadow-xl"
-      width={window.innerWidth * 0.23}
-      height={window.innerHeight}
-      resizeHandles={["e"]}
-      minConstraints={[window.innerWidth * 0.23, window.innerHeight]}
-      maxConstraints={[Infinity, Infinity]}
-      axis="x"
+    <div
+      className="h-screen flex overflow-clip relative"
+      onMouseMove={dragHandler}
+      onMouseUp={() => props.setResize(false)}
     >
-      <div className="overflow-auto h-full mt-2">
+      <div className="mt-2" style={{ width: `${width}px` }}>
         <Tabs
           type="card"
           tabList={tabList}
@@ -84,7 +86,6 @@ const EditorPanel = (props) => {
         >
           {contentList[parseInt(tab) - 1]}
         </Tabs>
-
         <button
           onClick={() => {
             const newArea = {
@@ -162,7 +163,14 @@ const EditorPanel = (props) => {
           parse
         </button>
       </div>
-    </ResizableBox>
+      <div
+        className="flex justify-center items-center p-1 h-full bg-slate-300 cursor-col-resize"
+        onMouseDown={() => props.setResize(true)}
+        onMouseUp={() => props.setResize(false)}
+      >
+        <div className="w-1 border-x border-white h-1/6" />
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 70f96a8..bcd811e 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -147,16 +147,20 @@ export default function TableOverview(props) {
         accordion
       >
         {props.tables.length <= 0 ? (
-          <Empty
-            image={
-              <IllustrationNoContent style={{ width: 160, height: 160 }} />
-            }
-            darkModeImage={
-              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
-            }
-            title="No tables"
-            description="Start building your diagram!"
-          />
+          <div className="select-none">
+            <Empty
+              image={
+                <IllustrationNoContent style={{ width: 160, height: 160 }} />
+              }
+              darkModeImage={
+                <IllustrationNoContentDark
+                  style={{ width: 160, height: 160 }}
+                />
+              }
+              title="No tables"
+              description="Start building your diagram!"
+            />
+          </div>
         ) : (
           props.tables.map((t, i) => (
             <div id={`${t.name}_scroll_id`} key={t.id}>
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 54c98d5..34afda4 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -11,6 +11,7 @@ export default function Editor(props) {
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
+  const [resize, setResize] = useState(false);
 
   return (
     <>
@@ -26,6 +27,8 @@ export default function Editor(props) {
             setRelationships={setRelationships}
             areas={areas}
             setAreas={setAreas}
+            resize={resize}
+            setResize={setResize}
           />
           <Canvas
             tables={tables}
@@ -36,6 +39,8 @@ export default function Editor(props) {
             setRelationships={setRelationships}
             areas={areas}
             setAreas={setAreas}
+            resize={resize}
+            setResize={setResize}
           />
         </DndProvider>
         <Sidebar />