diff --git a/package-lock.json b/package-lock.json
index 9730319..f00be74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@arco-design/web-react": "^2.48.2",
         "@codemirror/lang-sql": "^6.5.0",
         "@lezer/highlight": "^1.1.5",
         "@testing-library/jest-dom": "^5.16.5",
@@ -61,6 +62,38 @@
         "node": ">=6.0.0"
       }
     },
+    "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.48.2",
+      "resolved": "https://registry.npmjs.org/@arco-design/web-react/-/web-react-2.48.2.tgz",
+      "integrity": "sha512-ZYhK422FhAYFRsFmofgULEaH21SVaA5EPAVuZCj4iRVBhgF+UUrv4FBsCVPzV5p13ZJugxEyRjvbr4Hyu6autQ==",
+      "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.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -5236,6 +5269,16 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "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",
@@ -5985,6 +6028,15 @@
       "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": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5998,6 +6050,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "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/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -6091,6 +6152,11 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6654,6 +6720,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6793,6 +6864,11 @@
       "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",
@@ -6901,6 +6977,15 @@
         "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",
@@ -8317,6 +8402,17 @@
       "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",
@@ -12522,6 +12618,11 @@
         "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.4",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
@@ -14492,6 +14593,17 @@
         "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",
@@ -14676,6 +14788,28 @@
       "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",
@@ -14803,6 +14937,21 @@
         }
       }
     },
+    "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/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14992,6 +15141,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -15350,6 +15504,19 @@
         "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",
@@ -15534,6 +15701,11 @@
       "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",
@@ -15579,6 +15751,19 @@
       "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",
@@ -16687,6 +16872,47 @@
         "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 b9764a6..d73a7a8 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@arco-design/web-react": "^2.48.2",
     "@codemirror/lang-sql": "^6.5.0",
     "@lezer/highlight": "^1.1.5",
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/src/components/draw_area.jsx b/src/components/draw_area.jsx
index 0cb9b7e..6982d20 100644
--- a/src/components/draw_area.jsx
+++ b/src/components/draw_area.jsx
@@ -1,47 +1,89 @@
-import React, { useEffect, useRef } from "react";
-import { dia, shapes } from "jointjs";
+import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
+import Rect from "./rect";
+
+export default function Canvas(props) {
+  const [dragging, setDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
 
-export default function DrawArea(props) {
   const canvas = useRef(null);
 
-  const [, drop] = useDrop(() => ({
-    accept: "CARD",
-    drop: (item, monitor) => {
-      const offset = monitor.getClientOffset();
-      const canvasRect = canvas.current.getBoundingClientRect();
-      const x = offset.x - canvasRect.left - item.size.width * 0.5;
-      const y = offset.y - canvasRect.top - item.size.height * 0.5;
-      if (item.type === "rect") {
-        const rect = new shapes.standard.Rectangle();
-        rect.position(x, y);
-        rect.resize(item.size.width, item.size.height);
-        rect.attr(item.attrs);
-        rect.addTo(props.graph);
-        props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
-      }
-    },
-    collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-    }),
-  }));
-
-  useEffect(() => {
-    new dia.Paper({
-      el: document.getElementById("canvas"),
-      background: {
-        color: "#aec3b0",
-      },
-      model: props.graph,
-      width: "100%",
-      gridSize: 1,
-      interactive: true,
+  const handleMouseDown = (event, id) => {
+    const { clientX, clientY } = event;
+    const rectangle = props.rectangles.find((rect) => rect.id === id);
+    setOffset({
+      x: clientX - rectangle.x,
+      y: clientY - rectangle.y,
     });
-  }, [props.graph]);
+    setDragging(id);
+  };
+
+  const handleMouseMove = (event) => {
+    if (dragging === false) return;
+    const { clientX, clientY } = event;
+    const updatedRectangles = props.rectangles.map((rect) => {
+      if (rect.id === dragging) {
+        return {
+          ...rect,
+          x: clientX - offset.x,
+          y: clientY - offset.y,
+        };
+      }
+      return rect;
+    });
+    props.setRectangles(updatedRectangles);
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+  };
+
+  const [, drop] = useDrop(
+    () => ({
+      accept: "CARD",
+      drop: (item, monitor) => {
+        const offset = monitor.getClientOffset();
+        const canvasRect = canvas.current.getBoundingClientRect();
+        const x = offset.x - canvasRect.left - 100 * 0.5;
+        const y = offset.y - canvasRect.top - 100 * 0.5;
+        const newRectangle = {
+          id: props.rectangles.length + 1,
+          x,
+          y,
+          width: 100,
+          height: 100,
+          label: `rect ${props.rectangles.length + 1}`,
+        };
+        props.setRectangles([...props.rectangles, newRectangle]);
+      },
+      collect: (monitor) => ({
+        isOver: !!monitor.isOver(),
+      }),
+    }),
+    [props.rectangles]
+  );
 
   return (
-    <div ref={drop} className="flex-grow">
-      <div id="canvas" ref={canvas}></div>
+    <div ref={drop} className="flex-grow" id="canvas">
+      <div ref={canvas} className="w-full h-screen">
+        <svg
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          style={{ width: "100%", height: "100%" }}
+        >
+          {props.rectangles.map((rectangle) => (
+            <Rect
+              key={rectangle.id}
+              x={rectangle.x}
+              y={rectangle.y}
+              label={rectangle.label}
+              width={rectangle.width}
+              height={rectangle.height}
+              onMouseDown={(event) => handleMouseDown(event, rectangle.id)}
+            />
+          ))}
+        </svg>
+      </div>
     </div>
   );
 }
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 950b5f5..845933c 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -49,20 +49,15 @@ export default function EditorPanel(props) {
         <br />
         <button
           onClick={() => {
-            const rect = new shapes.standard.Rectangle();
-            rect.position(100, 100);
-            rect.resize(100, 40);
-            rect.attr({
-              body: {
-                fill: "#7039FF",
-              },
-              label: {
-                text: "hi",
-                fill: "white",
-              },
-            });
-            rect.addTo(props.graph);
-            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
+            const newRectangle = {
+              id: props.rectangles.length + 1,
+              x: 0,
+              y: 0,
+              width: 100,
+              height: 100,
+              label: `rect ${props.rectangles.length + 1}`,
+            };
+            props.setRectangles([...props.rectangles, newRectangle]);
           }}
         >
           add
diff --git a/src/components/rect.jsx b/src/components/rect.jsx
new file mode 100644
index 0000000..45c2bfa
--- /dev/null
+++ b/src/components/rect.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Rect = (props) => {
+  return (
+    <g>
+      <rect
+        key={props.id}
+        x={props.x}
+        y={props.y}
+        width={props.width}
+        height={props.height}
+        style={{ fill: "blue", cursor: "move" }}
+        onMouseDown={props.onMouseDown}
+      />
+      <text
+        x={props.x + 50}
+        y={props.y + 50}
+        textAnchor="middle"
+        style={{ fill: "white" }}
+      >
+        {props.label}
+      </text>
+    </g>
+  );
+};
+
+export default Rect;
diff --git a/src/components/shape.jsx b/src/components/shape.jsx
index dfd2ba3..dade724 100644
--- a/src/components/shape.jsx
+++ b/src/components/shape.jsx
@@ -1,25 +1,9 @@
-import {React} from "react"
+import { React } from "react";
 import { useDrag } from "react-dnd";
 
-export default function Shape (){
-  const rectData = {
-    type: "rect",
-    position: { x: 100, y: 100 },
-    size: { width: 100, height: 40 },
-    attrs: {
-      body: {
-        fill: "#7039FF",
-      },
-      label: {
-        text: "hi",
-        fill: "white",
-      },
-    },
-  };
-
+export default function Shape() {
   const [{ isDragging }, drag] = useDrag(() => ({
     type: "CARD",
-    item: rectData,
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),
@@ -38,4 +22,4 @@ export default function Shape (){
       rect
     </div>
   );
-};
+}
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 621eeb7..cbe3107 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -1,16 +1,25 @@
-import { React, useState, useMemo } from "react";
+import React, { useState } from "react";
 import Header from "../components/header";
 import Sidebar from "../components/sidebar";
 import ControlPanel from "../components/control_panel";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { dia } from "jointjs";
-import DrawArea from "../components/draw_area";
+import Canvas from "../components/draw_area";
 import EditorPanel from "../components/editor_panel";
 
+// class Graph {
+//   constructor() {
+//     this.nodes = [];
+//   }
+
+//   setNodes(nodes) {
+//     this.nodes = nodes;
+//   }
+// }
+
 export default function Editor(props) {
-  const graph = useMemo(() => new dia.Graph(), []);
   const [code, setCode] = useState("");
+  const [rectangles, setRectangles] = useState([]);
 
   return (
     <>
@@ -18,8 +27,18 @@ export default function Editor(props) {
       <ControlPanel />
       <div className="flex h-full">
         <DndProvider backend={HTML5Backend}>
-          <EditorPanel graph={graph} code={code} setCode={setCode}/>
-          <DrawArea graph={graph} code={code} setCode={setCode}/>
+          <EditorPanel
+            rectangles={rectangles}
+            setRectangles={setRectangles}
+            code={code}
+            setCode={setCode}
+          />
+          <Canvas
+            rectangles={rectangles}
+            setRectangles={setRectangles}
+            code={code}
+            setCode={setCode}
+          />
         </DndProvider>
         <Sidebar />
       </div>
diff --git a/src/pages/landing_page.jsx b/src/pages/landing_page.jsx
index f338f79..7f44b8d 100644
--- a/src/pages/landing_page.jsx
+++ b/src/pages/landing_page.jsx
@@ -5,6 +5,7 @@ export default function LandingPage() {
   return (
     <div>
       <Link to="/editor">editor</Link>
+      <br />
       LandingPage  
     </div>
   );