diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index d1626a0..5c74ff0 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import Table from "./table";
+import { defaultTableTheme } from "../data/data";
 
 export default function Canvas(props) {
   const [dragging, setDragging] = useState(-1);
@@ -86,14 +87,14 @@ export default function Canvas(props) {
       });
       props.setTables(updatedTables);
       const updatedRelationShips = relationships.map((r) => {
-        if (r.startTableId === dragging - 1) {
+        if (r.startTableId === dragging) {
           return {
             ...r,
             startX: props.tables[r.startTableId].x + 15,
             startY:
               props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19,
           };
-        } else if (r.endTableId === dragging - 1) {
+        } else if (r.endTableId === dragging) {
           return {
             ...r,
             endX: props.tables[r.endTableId].x + 15,
@@ -160,8 +161,8 @@ export default function Canvas(props) {
         const x = offset.x - canvasRect.left - 100 * 0.5;
         const y = offset.y - canvasRect.top - 100 * 0.5;
         const newTable = {
-          id: props.tables.length + 1,
-          name: `Table ${props.tables.length + 1}`,
+          id: props.tables.length,
+          name: `Table ${props.tables.length}`,
           x: x,
           y: y,
           fields: [
@@ -178,6 +179,7 @@ export default function Canvas(props) {
           ],
           comment: "",
           indices: [],
+          color: defaultTableTheme,
         };
         props.setTables((prev) => [...prev, newTable]);
         props.setCode((prev) =>
@@ -235,7 +237,7 @@ export default function Canvas(props) {
           {props.tables.map((table, i) => (
             <Table
               key={table.id}
-              id={i}
+              id={table.id}
               tableData={table}
               tables={props.tables}
               setTables={props.setTables}
diff --git a/src/components/diagram_overview.jsx b/src/components/diagram_overview.jsx
index 152de97..58e5c44 100644
--- a/src/components/diagram_overview.jsx
+++ b/src/components/diagram_overview.jsx
@@ -1,5 +1,5 @@
 import { React } from "react";
-import { sqlDataTypes } from "../data/data";
+import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
 import {
   Collapse,
   Input,
@@ -17,9 +17,16 @@ import {
   IconKeyStroked,
   IconColorPalette,
   IconDeleteStroked,
+  IconCheckboxTick,
 } from "@douyinfe/semi-icons";
 
 export default function DiagramOverview(props) {
+  const updateColor = (id, c) => {
+    const updatedTables = [...props.tables];
+    updatedTables[id] = { ...updatedTables[id], color: c };
+    props.setTables(updatedTables);
+  };
+
   return (
     <Collapse>
       {props.tables.map((t, i) => (
@@ -33,8 +40,8 @@ export default function DiagramOverview(props) {
           itemKey={`${i}`}
         >
           {t.fields.map((f, j) => (
-            <Form>
-              <div key={j}>
+            <Form key={j}>
+              <div>
                 <Row
                   type="flex"
                   justify="start"
@@ -101,16 +108,15 @@ export default function DiagramOverview(props) {
                                 defaultChecked={f.increment}
                               ></Checkbox>
                             </div>
-                            <label htmlFor="comment" className="font-medium">
-                              Comment
-                            </label>
                             <Form.TextArea
+                              field="comment"
+                              label="Comment"
                               initValue={f.comment}
                               autosize
                               rows={2}
                             />
                           </Form>
-                          <div className="flex justify-end">
+                          <div className="flex justify-end mt-2">
                             <Button icon={<IconDeleteStroked />} type="danger">
                               Delete
                             </Button>
@@ -152,7 +158,66 @@ export default function DiagramOverview(props) {
           </Card>
           <Row gutter={6} className="mt-2">
             <Col span={8}>
-              <Button type="tertiary" icon={<IconColorPalette />}></Button>
+              <Popover
+                content={
+                  <div>
+                    <div className="flex justify-between items-center p-2">
+                      <div className="font-medium">Theme</div>
+                      <Button
+                        type="tertiary"
+                        size="small"
+                        onClick={() => updateColor(i, defaultTableTheme)}
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                    <hr />
+                    <div className="py-3">
+                      <div>
+                        {tableThemes
+                          .slice(0, Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() => updateColor(i, c)}
+                            >
+                              {t.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                      </div>
+                      <div className="mt-3">
+                        {tableThemes
+                          .slice(Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() => updateColor(i, c)}
+                            >
+                              {t.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                      </div>
+                    </div>
+                  </div>
+                }
+                trigger="click"
+                position="bottomLeft"
+                showArrow
+              >
+                <Button type="tertiary" icon={<IconColorPalette />}></Button>
+              </Popover>
             </Col>
             <Col span={8}>
               <Button block>Add index</Button>
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 3dff824..1b1058a 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -11,6 +11,7 @@ import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
 import DiagramOverview from "./diagram_overview";
+import { defaultTableTheme } from "../data/data";
 
 const myTheme = createTheme({
   dark: "light",
@@ -37,7 +38,7 @@ export default function EditorPanel(props) {
   ];
   const contentList = [
     <div>
-      <DiagramOverview tables={props.tables} />
+      <DiagramOverview tables={props.tables} setTables={props.setTables} />
     </div>,
     <div>
       <Shape />
@@ -79,8 +80,8 @@ export default function EditorPanel(props) {
         <button
           onClick={() => {
             const newTable = {
-              id: props.tables.length + 1,
-              name: `Table ${props.tables.length + 1}`,
+              id: props.tables.length,
+              name: `Table ${props.tables.length}`,
               x: 0,
               y: 0,
               fields: [
@@ -97,6 +98,7 @@ export default function EditorPanel(props) {
               ],
               comment: "",
               indices: [],
+              color: defaultTableTheme,
             };
             props.setTables((prev) => {
               const updatedTables = [...prev, newTable];
@@ -137,8 +139,8 @@ export default function EditorPanel(props) {
                   }
                   map.current.set(t.table, t);
                   const newTable = {
-                    id: props.tables.length + 1,
-                    name: `Table ${props.tables.length + 1}`,
+                    id: props.tables.length,
+                    name: `Table ${props.tables.length}`,
                     x: 0,
                     y: 0,
                     fields: [
@@ -155,6 +157,7 @@ export default function EditorPanel(props) {
                     ],
                     comment: "",
                     indices: [],
+                    color: defaultTableTheme,
                   };
                   props.setTables((prev) => [...prev, newTable]);
                 });
diff --git a/src/components/table.jsx b/src/components/table.jsx
index 01017cb..4db8dc0 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -113,7 +113,10 @@ export default function Table(props) {
             isHovered ? "border-sky-500" : "border-gray-500"
           } bg-gray-300 select-none rounded-md`}
         >
-          <div className="p-3 font-bold text-slate-800 h-[40px] bg-gray-400 rounded-t-md flex justify-between items-center">
+          <div
+            style={{ backgroundColor: props.tableData.color }}
+            className={`p-3 font-bold text-slate-800 h-[40px] rounded-t-md flex justify-between items-center`}
+          >
             {
               <form
                 onSubmit={(e) => e.preventDefault()}
@@ -138,10 +141,7 @@ export default function Table(props) {
             }
             {isHovered && (
               <div className="flex justify-end items-center">
-                <button
-                  className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
-                  // onClick={() => setSideSheetOn(true)}
-                >
+                <button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
                   <IconEdit />
                 </button>
                 <button
diff --git a/src/data/data.js b/src/data/data.js
index 20f712a..e90de98 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -1,87 +1,102 @@
 const menu = {
-    File: {
-      New: [],
-      "New window": [],
-      Save: [],
-      "Save as": [],
-      Share: [],
-      Rename: [],
-      Import: [],
-      "Export as": [".png", ".jpg", ".pdf", ".xml"],
-      "Export source": ["MySQL", "PostgreSQL", "DBML"],
-      Properties: [],
-      Close: [],
-    },
-    Edit: {
-      Undo: [],
-      Redo: [],
-      Cut: [],
-      Copy: [],
-      "Copy as image": [],
-      Paste: [],
-      Delete: [],
-      "Edit table": [],
-    },
-    View: {
-      Toolbar: [],
-      Grid: [],
-      Sidebar: [],
-      Editor: [],
-      "Reset view": [],
-      "View schema": [],
-      Theme: ["Light", "Dark"],
-      "Zoom in": [],
-      "Zoom out": [],
-      Fullscreen: [],
-    },
-    Insert: {
-      "New table": [],
-      "New relationship": [],
-      Note: [],
-      Image: [],
-      Textbox: [],
-      Shape: ["Rhombus", "Rectangle"],
-    },
-    Logs: {
-      "Open logs": [],
-      "Commit changes": [],
-      "Revert changes": [],
-      "View commits": [],
-    },
-    Help: {
-      Shortcuts: [],
-      "Ask us on discord": [],
-      "Tweet us": [],
-      "Found a bug": [],
-    },
+  File: {
+    New: [],
+    "New window": [],
+    Save: [],
+    "Save as": [],
+    Share: [],
+    Rename: [],
+    Import: [],
+    "Export as": [".png", ".jpg", ".pdf", ".xml"],
+    "Export source": ["MySQL", "PostgreSQL", "DBML"],
+    Properties: [],
+    Close: [],
+  },
+  Edit: {
+    Undo: [],
+    Redo: [],
+    Cut: [],
+    Copy: [],
+    "Copy as image": [],
+    Paste: [],
+    Delete: [],
+    "Edit table": [],
+  },
+  View: {
+    Toolbar: [],
+    Grid: [],
+    Sidebar: [],
+    Editor: [],
+    "Reset view": [],
+    "View schema": [],
+    Theme: ["Light", "Dark"],
+    "Zoom in": [],
+    "Zoom out": [],
+    Fullscreen: [],
+  },
+  Insert: {
+    "New table": [],
+    "New relationship": [],
+    Note: [],
+    Image: [],
+    Textbox: [],
+    Shape: ["Rhombus", "Rectangle"],
+  },
+  Logs: {
+    "Open logs": [],
+    "Commit changes": [],
+    "Revert changes": [],
+    "View commits": [],
+  },
+  Help: {
+    Shortcuts: [],
+    "Ask us on discord": [],
+    "Tweet us": [],
+    "Found a bug": [],
+  },
 };
-  
-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",
-  ];
 
-  
-export {menu, sqlDataTypes};
-  
\ No newline at end of file
+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 tableThemes = [
+  "#f03c3c",
+  "#ff4f81",
+  "#bc49c4",
+  "#a751e8",
+  "#7c4af0",
+  "#6360f7",
+  "#7d9dff",
+  "#32c9b0",
+  "#3cde7d",
+  "#89e667",
+  "#ffe159",
+  "#ff9159",
+];
+
+const defaultTableTheme = "#9e9e9e"
+
+export { menu, sqlDataTypes, tableThemes, defaultTableTheme };