diff --git a/src/components/draw_area.jsx b/src/components/canvas.jsx
similarity index 99%
rename from src/components/draw_area.jsx
rename to src/components/canvas.jsx
index 0cf859b..4de9c77 100644
--- a/src/components/draw_area.jsx
+++ b/src/components/canvas.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
-import Rect from "./rect";
+import Table from "./table";
 
 export default function Canvas(props) {
   const [dragging, setDragging] = useState(-1);
@@ -180,7 +180,7 @@ export default function Canvas(props) {
 
           <rect width="100%" height="100%" fill="url(#grid)" />
           {props.tables.map((table, i) => (
-            <Rect
+            <Table
               key={table.id}
               id={i}
               tableData={table}
diff --git a/src/components/rect.jsx b/src/components/table.jsx
similarity index 99%
rename from src/components/rect.jsx
rename to src/components/table.jsx
index 716a633..56be75c 100644
--- a/src/components/rect.jsx
+++ b/src/components/table.jsx
@@ -18,7 +18,7 @@ import {
   Toast,
 } from "@douyinfe/semi-ui";
 
-const Rect = (props) => {
+export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
   const [name, setName] = useState(props.tableData.name);
@@ -455,6 +455,4 @@ const Rect = (props) => {
       </Modal>
     </g>
   );
-};
-
-export default Rect;
+}
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 6dba941..bf81822 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -4,7 +4,7 @@ import Sidebar from "../components/sidebar";
 import ControlPanel from "../components/control_panel";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import Canvas from "../components/draw_area";
+import Canvas from "../components/canvas";
 import EditorPanel from "../components/editor_panel";
 
 export default function Editor(props) {