diff --git a/package-lock.json b/package-lock.json
index 49953c0..09c6eb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "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",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -1864,6 +1865,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.22.3.tgz",
+      "integrity": "sha512-6bdmknScYKmt8I9VjsJuKKGr+TwUb555FTf6tT1P/ANlCjTHCiYLhiQ4X/O7J731w5NOqu8c1aYHEVuOwPz7jA==",
+      "dependencies": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.21.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
@@ -2284,6 +2297,148 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@douyinfe/semi-animation": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.36.0.tgz",
+      "integrity": "sha512-+VgtnsT1//EnotjicQnecL0jLSZhbwX3uRIGfu+bXB3fH1B6wd24xsMGOe+sjawOYyh1leqSdzPnelMxZbg7KQ==",
+      "dependencies": {
+        "bezier-easing": "^2.1.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-animation-react": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.36.0.tgz",
+      "integrity": "sha512-W9wYVBx+B8N2dyT8A8tNXI2WbLaYzJcqbpViukiKQO+W5s+GsNzWOCssWo/Aqt1+WS/Y3I309+auClpVHTkI8A==",
+      "dependencies": {
+        "@douyinfe/semi-animation": "2.12.0",
+        "@douyinfe/semi-animation-styled": "2.23.2",
+        "classnames": "^2.2.6"
+      }
+    },
+    "node_modules/@douyinfe/semi-animation-react/node_modules/@douyinfe/semi-animation": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz",
+      "integrity": "sha512-OAfL9Nk38ZPqfdKm9k4cvVXXzm16ALI4LxGNZ0qfe2RCLLnYGB/hNzTctoTDjYD35dFv0yroh3qsXtZuP2xNdg==",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.15.4",
+        "bezier-easing": "^2.1.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-animation-styled": {
+      "version": "2.23.2",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz",
+      "integrity": "sha512-cKaA1yGHPF76Rx7EZDZicj+1oX1su2wnqb/UGFOTquAwqWmkTfgQ+EKxCd/N704WH+RtmGf4xbrJKpBvvcEdSQ=="
+    },
+    "node_modules/@douyinfe/semi-foundation": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.36.0.tgz",
+      "integrity": "sha512-lcDxviFlYdoq9KQTYQ0S+7x1ia8vWdu/uH3ACWAIZyUQ3W5Zd7pmDdmw9QsfQgdViJb9GnrejFrzgFEi4iEQjA==",
+      "dependencies": {
+        "@douyinfe/semi-animation": "2.12.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "memoize-one": "^5.2.1",
+        "scroll-into-view-if-needed": "^2.2.24"
+      }
+    },
+    "node_modules/@douyinfe/semi-foundation/node_modules/@douyinfe/semi-animation": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz",
+      "integrity": "sha512-OAfL9Nk38ZPqfdKm9k4cvVXXzm16ALI4LxGNZ0qfe2RCLLnYGB/hNzTctoTDjYD35dFv0yroh3qsXtZuP2xNdg==",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.15.4",
+        "bezier-easing": "^2.1.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-foundation/node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
+    "node_modules/@douyinfe/semi-icons": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.36.0.tgz",
+      "integrity": "sha512-BGnbxCdZ9uhHqvIR73lhulF0jxDEWZU45PxxHDBvaAmx2zcvfMeDcdjJWIco0Pqeo5sfCwDEOYUHIWdq/9v7cw==",
+      "dependencies": {
+        "classnames": "^2.2.6"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-illustrations": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.36.0.tgz",
+      "integrity": "sha512-JTeCejgvPb8KqS+8dlOU5n5SoMQLcLK4FHfkMPcRA14ysmqdgNhrESLT+0WMNyB2A5RvfpNOBY/3ZGgi/veu5g==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-theme-default": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.36.0.tgz",
+      "integrity": "sha512-Z6U+Z9b0W3QJlFAFjR0dljLKl3/jFMXhwfefc9LHKiA/yaYJGzTEPgKiTDU7p98rTiCxjTvWkeZSb6/dI0kq3Q==",
+      "dependencies": {
+        "glob": "^7.1.6"
+      }
+    },
+    "node_modules/@douyinfe/semi-ui": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.36.0.tgz",
+      "integrity": "sha512-6xGoQsy6Li1GZmEhRgZ5bSXSYEz3HrzpbfylSJbYb866zsMCl4VRzq4BkB4tebwJz/WmK8JSE6mfFauMYrLqYQ==",
+      "dependencies": {
+        "@douyinfe/semi-animation": "2.36.0",
+        "@douyinfe/semi-animation-react": "2.36.0",
+        "@douyinfe/semi-foundation": "2.36.0",
+        "@douyinfe/semi-icons": "2.36.0",
+        "@douyinfe/semi-illustrations": "2.36.0",
+        "@douyinfe/semi-theme-default": "2.36.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "copy-text-to-clipboard": "^2.1.1",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-resizable": "^1.8.0",
+        "react-sortable-hoc": "^2.0.0",
+        "react-window": "^1.8.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.24",
+        "utility-types": "^3.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-ui/node_modules/react-resizable": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.11.1.tgz",
+      "integrity": "sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": "0.14.x || 15.x || 16.x || 17.x",
+        "react-dom": "0.14.x || 15.x || 16.x || 17.x"
+      }
+    },
+    "node_modules/@douyinfe/semi-ui/node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -5196,6 +5351,11 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
+    "node_modules/async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5576,6 +5736,11 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "node_modules/bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -5950,6 +6115,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -6203,6 +6373,17 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
+      "integrity": "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.30.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
@@ -6702,6 +6883,29 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -9392,6 +9596,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -12235,6 +12447,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -14894,6 +15111,21 @@
         }
       }
     },
+    "node_modules/react-sortable-hoc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
+      "integrity": "sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.7",
+        "react": "^16.3.0 || ^17.0.0",
+        "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",
@@ -14909,6 +15141,22 @@
         "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",
+      "integrity": "sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16889,6 +17137,14 @@
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
     },
+    "node_modules/utility-types": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index 19b4fab..74374fd 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "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",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 7f29496..40854d6 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -160,7 +160,7 @@ export default function ControlPanel() {
               title="Add"
               onClick={(e) => invert(e, Tool.ADD)}
             >
-              <i class="fa-solid fa-plus"></i> <IconCaretDown />
+              <i className="fa-solid fa-plus"></i> <IconCaretDown />
             </button>
             <ul
               className={`${
diff --git a/src/components/draw_area.jsx b/src/components/draw_area.jsx
index fbcb857..9904161 100644
--- a/src/components/draw_area.jsx
+++ b/src/components/draw_area.jsx
@@ -124,7 +124,7 @@ export default function Canvas(props) {
         const canvasRect = canvas.current.getBoundingClientRect();
         const x = offset.x - canvasRect.left - 100 * 0.5;
         const y = offset.y - canvasRect.top - 100 * 0.5;
-        const d = {
+        const newRectangle = {
           id: props.rectangles.length + 1,
           x,
           y,
@@ -132,11 +132,11 @@ export default function Canvas(props) {
           height: 100,
           label: `rect ${props.rectangles.length + 1}`,
         };
-        props.setRectangles([...props.rectangles, d]);
+        props.setRectangles([...props.rectangles, newRectangle]);
         props.setCode((prev) =>
           prev === ""
-            ? `CREATE TABLE \`${d.label}\`;`
-            : `${prev}\n\nCREATE TABLE \`${d.label}\`;`
+            ? `CREATE TABLE \`${newRectangle.label}\`;`
+            : `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
         );
       },
       collect: (monitor) => ({
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 52a87b2..7d2aea2 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -54,13 +54,13 @@ export default function EditorPanel(props) {
               y: 0,
               width: 240,
               height: 100,
-              label: `rect ${props.rectangles.length + 1}`,
+              name: `Table ${props.rectangles.length + 1}`,
             };
             props.setRectangles([...props.rectangles, newRectangle]);
             props.setCode((prev) =>
               prev === ""
-                ? `CREATE TABLE \`${newRectangle.label}\`;`
-                : `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
+                ? `CREATE TABLE \`${newRectangle.name}\`;`
+                : `${prev}\n\nCREATE TABLE \`${newRectangle.name}\`;`
             );
           }}
         >
@@ -97,7 +97,7 @@ export default function EditorPanel(props) {
                     y: 0,
                     width: 240,
                     height: 100,
-                    label: `rect ${props.rectangles.length + 1}`,
+                    name: `rect ${props.rectangles.length + 1}`,
                   };
                   props.setRectangles([...props.rectangles, newRectangle]);
                 });
diff --git a/src/components/rect.jsx b/src/components/rect.jsx
index a3e904c..cf6e757 100644
--- a/src/components/rect.jsx
+++ b/src/components/rect.jsx
@@ -5,13 +5,45 @@ import {
   IconDelete,
   IconPlus,
   IconMinus,
-} from "@arco-design/web-react/icon";
+} from "@douyinfe/semi-icons";
+import { Modal, Form, Checkbox, Row, Col } from "@douyinfe/semi-ui";
 
 const Rect = (props) => {
   const [node, setNode] = useState(Node.NONE);
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  const [name, setName] = useState("New table");
+  const [name, setName] = useState("New Table");
+  const [visible, setVisible] = useState(false);
+
+  const handleOk = () => {
+    setVisible(false);
+  };
+
+  const sqlDataTypes = [
+    "INT",
+    "SMALLINT",
+    "BIGINT",
+    "DECIMAL",
+    "NUMERIC",
+    "FLOAT",
+    "REAL",
+    "DOUBLE PRECISION",
+    "CHAR",
+    "VARCHAR",
+    "TEXT",
+    "DATE",
+    "TIME",
+    "TIMESTAMP",
+    "INTERVAL",
+    "BOOLEAN",
+    "BINARY",
+    "VARBINARY",
+    "BLOB",
+    "CLOB",
+    "UUID",
+    "XML",
+    "JSON",
+  ];
 
   const [fields, setFields] = useState([
     {
@@ -83,18 +115,7 @@ const Rect = (props) => {
                 <button
                   className="btn bg-green-600 text-white text-xs py-1 px-2 me-2 opacity-80"
                   onClick={(e) => {
-                    setFields([
-                      ...fields,
-                      {
-                        name: "age",
-                        type: "numeric",
-                        default: "n/a",
-                        primary: false,
-                        unique: false,
-                        notNull: true,
-                        increment: false,
-                      },
-                    ]);
+                    setVisible(true);
                   }}
                 >
                   <IconPlus />
@@ -108,6 +129,7 @@ const Rect = (props) => {
           {fields.map((e, i) => {
             return (
               <div
+                key={i}
                 className={`${
                   i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
                 } h-[36px] p-2 flex justify-between`}
@@ -221,6 +243,50 @@ const Rect = (props) => {
         }}
         style={{ fill: node === Node.BOTTOM ? "green" : "black" }}
       />
+      <Modal
+        title="Add new field"
+        visible={visible}
+        onOk={handleOk}
+        afterClose={handleOk}
+        onCancel={handleOk}
+        centered
+        closeOnEsc={true}
+        okText="Add"
+        cancelText="Cancel"
+      >
+        <Form labelPosition="left" labelAlign="right">
+          <Row>
+            <Col span={11}>
+              <Form.Input field="name" label="Name" trigger="blur" />
+            </Col>
+            <Col span={2}></Col>
+            <Col span={11}>
+              <Form.Input field="default" label="Default" trigger="blur" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24}>
+              <Form.Select
+                field="type"
+                label="Type"
+                className="w-full"
+                optionList={sqlDataTypes.map((value, index) => {
+                  return {
+                    label: value,
+                    value: index,
+                  };
+                })}
+              ></Form.Select>
+              <div className="flex justify-around mt-2">
+                <Checkbox value="A">Primary</Checkbox>
+                <Checkbox value="B">Unique</Checkbox>
+                <Checkbox value="C">Not null</Checkbox>
+                <Checkbox value="D">Increment</Checkbox>
+              </div>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
     </g>
   );
 };