diff --git a/src/components/Area.jsx b/src/components/Area.jsx
index 51b1b83..53b1521 100644
--- a/src/components/Area.jsx
+++ b/src/components/Area.jsx
@@ -10,9 +10,9 @@ import {
   Action,
   ObjectType,
   tableThemes,
-  defaultTableTheme,
+  defaultBlue,
   State,
-} from "../data/data";
+} from "../data/constants";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
 import useUndoRedo from "../hooks/useUndoRedo";
@@ -143,7 +143,7 @@ export default function Area(props) {
                               size="small"
                               onClick={() => {
                                 updateArea(props.areaData.id, {
-                                  color: defaultTableTheme,
+                                  color: defaultBlue,
                                 });
                                 setSaveState(State.SAVING);
                               }}
@@ -271,11 +271,10 @@ export default function Area(props) {
                       ...prev,
                       element: ObjectType.AREA,
                       id: props.areaData.id,
-                      currentTab: Tab.subject_areas,
+                      currentTab: Tab.AREAS,
                       open: true,
                     }));
-                    if (selectedElement.currentTab !== Tab.subject_areas)
-                      return;
+                    if (selectedElement.currentTab !== Tab.AREAS) return;
                     document
                       .getElementById(`scroll_area_${props.areaData.id}`)
                       .scrollIntoView({ behavior: "smooth" });
diff --git a/src/components/AreaOverview.jsx b/src/components/AreaOverview.jsx
index 9b32f78..b6ecfe9 100644
--- a/src/components/AreaOverview.jsx
+++ b/src/components/AreaOverview.jsx
@@ -20,12 +20,12 @@ import {
   IconDeleteStroked,
 } from "@douyinfe/semi-icons";
 import {
-  defaultTableTheme,
+  defaultBlue,
   tableThemes,
   Action,
   ObjectType,
   State,
-} from "../data/data";
+} from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useAreas from "../hooks/useAreas";
 import useSaveState from "../hooks/useSaveState";
@@ -140,7 +140,7 @@ export default function AreaOverview() {
                           type="tertiary"
                           size="small"
                           onClick={() => {
-                            updateArea(i, { color: defaultTableTheme });
+                            updateArea(i, { color: defaultBlue });
                             setSaveState(State.SAVING);
                           }}
                         >
diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
index 8ad97e6..438ba62 100644
--- a/src/components/Canvas.jsx
+++ b/src/components/Canvas.jsx
@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from "react";
 import Table from "./Table";
-import { Action, Cardinality, Constraint, ObjectType } from "../data/data";
+import { Action, Cardinality, Constraint, ObjectType } from "../data/constants";
 import Area from "./Area";
 import Relationship from "./Relationship";
 import Note from "./Note";
@@ -39,8 +39,8 @@ export default function Canvas() {
     endY: 0,
     name: "",
     cardinality: Cardinality.ONE_TO_ONE,
-    updateConstraint: Constraint.none,
-    deleteConstraint: Constraint.none,
+    updateConstraint: Constraint.NONE,
+    deleteConstraint: Constraint.NONE,
     mandatory: false,
   });
   const [offset, setOffset] = useState({ x: 0, y: 0 });
diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx
index 878e863..25a8019 100644
--- a/src/components/ControlPanel.jsx
+++ b/src/components/ControlPanel.jsx
@@ -44,7 +44,7 @@ import {
   jsonToSQLServer,
 } from "../utils/toSQL";
 import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
-import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
+import { ObjectType, Action, Tab, State, Cardinality } from "../data/constants";
 import jsPDF from "jspdf";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Validator } from "jsonschema";
@@ -581,9 +581,9 @@ export default function ControlPanel({
         setSelectedElement((prev) => ({
           ...prev,
           open: true,
-          currentTab: Tab.tables,
+          currentTab: Tab.TABLES,
         }));
-        if (selectedElement.currentTab !== Tab.tables) return;
+        if (selectedElement.currentTab !== Tab.TABLES) return;
         document
           .getElementById(`scroll_table_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
@@ -592,9 +592,9 @@ export default function ControlPanel({
       if (layout.sidebar) {
         setSelectedElement((prev) => ({
           ...prev,
-          currentTab: Tab.subject_areas,
+          currentTab: Tab.AREAS,
         }));
-        if (selectedElement.currentTab !== Tab.subject_areas) return;
+        if (selectedElement.currentTab !== Tab.AREAS) return;
         document
           .getElementById(`scroll_area_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
@@ -609,10 +609,10 @@ export default function ControlPanel({
       if (layout.sidebar) {
         setSelectedElement((prev) => ({
           ...prev,
-          currentTab: Tab.notes,
+          currentTab: Tab.NOTES,
           open: false,
         }));
-        if (selectedElement.currentTab !== Tab.notes) return;
+        if (selectedElement.currentTab !== Tab.NOTES) return;
         document
           .getElementById(`scroll_note_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
diff --git a/src/components/Note.jsx b/src/components/Note.jsx
index 04fd953..8a803b9 100644
--- a/src/components/Note.jsx
+++ b/src/components/Note.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
+import { Action, ObjectType, noteThemes, Tab, State } from "../data/constants";
 import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
 import {
   IconEdit,
@@ -257,9 +257,9 @@ export default function Note({ data, onMouseDown }) {
                     if (layout.sidebar) {
                       setSelectedElement((prev) => ({
                         ...prev,
-                        currentTab: Tab.notes,
+                        currentTab: Tab.NOTES,
                       }));
-                      if (selectedElement.currentTab !== Tab.notes) return;
+                      if (selectedElement.currentTab !== Tab.NOTES) return;
                       document
                         .getElementById(`scroll_note_${data.id}`)
                         .scrollIntoView({ behavior: "smooth" });
diff --git a/src/components/NotesOverview.jsx b/src/components/NotesOverview.jsx
index 826ecb2..5e5c90f 100644
--- a/src/components/NotesOverview.jsx
+++ b/src/components/NotesOverview.jsx
@@ -21,7 +21,7 @@ import {
   IconSearch,
   IconCheckboxTick,
 } from "@douyinfe/semi-icons";
-import { noteThemes, Action, ObjectType } from "../data/data";
+import { noteThemes, Action, ObjectType } from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useNotes from "../hooks/useNotes";
 
diff --git a/src/components/ReferenceOverview.jsx b/src/components/ReferenceOverview.jsx
index d953d2a..80c47cd 100644
--- a/src/components/ReferenceOverview.jsx
+++ b/src/components/ReferenceOverview.jsx
@@ -20,7 +20,7 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { Cardinality, Constraint, Action, ObjectType } from "../data/data";
+import { Cardinality, Constraint, Action, ObjectType } from "../data/constants";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 
diff --git a/src/components/Relationship.jsx b/src/components/Relationship.jsx
index a90f52b..2b01d85 100644
--- a/src/components/Relationship.jsx
+++ b/src/components/Relationship.jsx
@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { Cardinality } from "../data/data";
+import { Cardinality } from "../data/constants";
 import useSettings from "../hooks/useSettings";
 import { calcPath } from "../utils/calcPath";
 
diff --git a/src/components/SidePanel.jsx b/src/components/SidePanel.jsx
index 60fd3e5..b3215e7 100644
--- a/src/components/SidePanel.jsx
+++ b/src/components/SidePanel.jsx
@@ -1,5 +1,5 @@
 import { Tabs } from "@douyinfe/semi-ui";
-import { Tab } from "../data/data";
+import { Tab } from "../data/constants";
 import TableOverview from "./TableOverview";
 import ReferenceOverview from "./ReferenceOverview";
 import AreaOverview from "./AreaOverview";
@@ -14,11 +14,11 @@ export default function SidePanel({ width, resize, setResize }) {
   const { selectedElement, setSelectedElement } = useSelect();
 
   const tabList = [
-    { tab: "Tables", itemKey: Tab.tables },
-    { tab: "Relationships", itemKey: Tab.relationships },
-    { tab: "Subject Areas", itemKey: Tab.subject_areas },
-    { tab: "Notes", itemKey: Tab.notes },
-    { tab: "Types", itemKey: Tab.types },
+    { tab: "Tables", itemKey: Tab.TABLES },
+    { tab: "Relationships", itemKey: Tab.RELATIONSHIPS },
+    { tab: "Subject Areas", itemKey: Tab.AREAS },
+    { tab: "Notes", itemKey: Tab.NOTES },
+    { tab: "Types", itemKey: Tab.TYPES },
   ];
   const contentList = [
     <TableOverview key={1} />,
diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
index 8027554..8c8bfc5 100644
--- a/src/components/SimpleCanvas.jsx
+++ b/src/components/SimpleCanvas.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from "react";
-import { Cardinality } from "../data/data";
+import { Cardinality } from "../data/constants";
 import { calcPath } from "../utils/calcPath";
 
 function Table({ table, grab }) {
diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index d2cde55..874cd68 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -2,11 +2,11 @@ import { useState } from "react";
 import {
   sqlDataTypes,
   tableThemes,
-  defaultTableTheme,
+  defaultBlue,
   Tab,
   Action,
   ObjectType,
-} from "../data/data";
+} from "../data/constants";
 import {
   IconEdit,
   IconMore,
@@ -120,12 +120,12 @@ export default function Table(props) {
                     } else {
                       setSelectedElement((prev) => ({
                         ...prev,
-                        currentTab: Tab.tables,
+                        currentTab: Tab.TABLES,
                         element: ObjectType.TABLE,
                         id: props.tableData.id,
                         open: true,
                       }));
-                      if (selectedElement.currentTab !== Tab.tables) return;
+                      if (selectedElement.currentTab !== Tab.TABLES) return;
                       document
                         .getElementById(`scroll_table_${props.tableData.id}`)
                         .scrollIntoView({ behavior: "smooth" });
@@ -1058,13 +1058,13 @@ export default function Table(props) {
                               component: "self",
                               tid: props.tableData.id,
                               undo: { color: props.tableData.color },
-                              redo: { color: defaultTableTheme },
+                              redo: { color: defaultBlue },
                               message: `Edit table color to default`,
                             },
                           ]);
                           setRedoStack([]);
                           updateTable(props.tableData.id, {
-                            color: defaultTableTheme,
+                            color: defaultBlue,
                           });
                         }}
                       >
diff --git a/src/components/TableOverview.jsx b/src/components/TableOverview.jsx
index a1a6ea7..6e15d72 100644
--- a/src/components/TableOverview.jsx
+++ b/src/components/TableOverview.jsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 import {
   Action,
   ObjectType,
-  defaultTableTheme,
+  defaultBlue,
   sqlDataTypes,
   tableThemes,
-} from "../data/data";
+} from "../data/constants";
 import {
   Collapse,
   Row,
@@ -946,12 +946,12 @@ export default function TableOverview() {
                                     component: "self",
                                     tid: i,
                                     undo: { color: t.color },
-                                    redo: { color: defaultTableTheme },
+                                    redo: { color: defaultBlue },
                                     message: `Edit table color to default`,
                                   },
                                 ]);
                                 setRedoStack([]);
-                                updateTable(i, { color: defaultTableTheme });
+                                updateTable(i, { color: defaultBlue });
                               }}
                             >
                               Clear
diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx
index d574064..e5a117f 100644
--- a/src/components/Todo.jsx
+++ b/src/components/Todo.jsx
@@ -19,7 +19,7 @@ import {
   IconDeleteStroked,
   IconCaretdown,
 } from "@douyinfe/semi-icons";
-import { State } from "../data/data";
+import { State } from "../data/constants";
 import useTasks from "../hooks/useTasks";
 import useSaveState from "../hooks/useSaveState";
 
diff --git a/src/components/TypesOverview.jsx b/src/components/TypesOverview.jsx
index 9203388..6b673a5 100644
--- a/src/components/TypesOverview.jsx
+++ b/src/components/TypesOverview.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Action, ObjectType, sqlDataTypes } from "../data/data";
+import { Action, ObjectType, sqlDataTypes } from "../data/constants";
 import {
   Collapse,
   Row,
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index e3f2c01..eea4b87 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import ControlPanel from "../components/ControlPanel";
 import Canvas from "../components/Canvas";
 import SidePanel from "../components/SidePanel";
-import { State } from "../data/data";
+import { State } from "../data/constants";
 import { db } from "../data/db";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
diff --git a/src/context/AreasContext.jsx b/src/context/AreasContext.jsx
index e29f9ac..18d149b 100644
--- a/src/context/AreasContext.jsx
+++ b/src/context/AreasContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { Action, ObjectType, defaultTableTheme } from "../data/data";
+import { Action, ObjectType, defaultBlue } from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useTransform from "../hooks/useTransform";
 import useSelect from "../hooks/useSelect";
@@ -29,7 +29,7 @@ export default function AreasContextProvider({ children }) {
           y: -transform.pan.y,
           width: 200,
           height: 200,
-          color: defaultTableTheme,
+          color: defaultBlue,
         },
       ]);
     }
diff --git a/src/context/NotesContext.jsx b/src/context/NotesContext.jsx
index 2acf498..b9c34d3 100644
--- a/src/context/NotesContext.jsx
+++ b/src/context/NotesContext.jsx
@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
 import useTransform from "../hooks/useTransform";
-import { Action, ObjectType, defaultNoteTheme } from "../data/data";
+import { Action, ObjectType, defaultNoteTheme } from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
 
diff --git a/src/context/SaveStateContext.jsx b/src/context/SaveStateContext.jsx
index 1e00232..791c114 100644
--- a/src/context/SaveStateContext.jsx
+++ b/src/context/SaveStateContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { State } from "../data/data";
+import { State } from "../data/constants";
 
 export const SaveStateContext = createContext(null);
 
diff --git a/src/context/SelectContext.jsx b/src/context/SelectContext.jsx
index 11f409e..bd1fd70 100644
--- a/src/context/SelectContext.jsx
+++ b/src/context/SelectContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { ObjectType, Tab } from "../data/data";
+import { ObjectType, Tab } from "../data/constants";
 
 export const SelectContext = createContext(null);
 
@@ -9,7 +9,7 @@ export default function SelectContextProvider({ children }) {
     id: -1,
     openDialogue: false,
     openCollapse: false,
-    currentTab: Tab.tables,
+    currentTab: Tab.TABLES,
     open: false, // open popover or sidesheet when sidebar is disabled
     openFromToolbar: false, // this is to handle triggering onClickOutside when sidebar is disabled
   });
diff --git a/src/context/TablesContext.jsx b/src/context/TablesContext.jsx
index a5ab5c6..2607819 100644
--- a/src/context/TablesContext.jsx
+++ b/src/context/TablesContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { Action, ObjectType, defaultTableTheme } from "../data/data";
+import { Action, ObjectType, defaultBlue } from "../data/constants";
 import useTransform from "../hooks/useTransform";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
@@ -44,7 +44,7 @@ export default function TablesContextProvider({ children }) {
           ],
           comment: "",
           indices: [],
-          color: defaultTableTheme,
+          color: defaultBlue,
         },
       ]);
     }
diff --git a/src/context/TypesContext.jsx b/src/context/TypesContext.jsx
index f6559e7..0aaab0a 100644
--- a/src/context/TypesContext.jsx
+++ b/src/context/TypesContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { Action, ObjectType } from "../data/data";
+import { Action, ObjectType } from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 
 export const TypesContext = createContext(null);
diff --git a/src/data/constants.js b/src/data/constants.js
new file mode 100644
index 0000000..8386d3a
--- /dev/null
+++ b/src/data/constants.js
@@ -0,0 +1,98 @@
+export const sqlDataTypes = [
+  "INT",
+  "SMALLINT",
+  "BIGINT",
+  "DECIMAL",
+  "NUMERIC",
+  "FLOAT",
+  "DOUBLE",
+  "REAL",
+  "CHAR",
+  "VARCHAR",
+  "TEXT",
+  "DATE",
+  "TIME",
+  "TIMESTAMP",
+  "DATETIME",
+  "BOOLEAN",
+  "BINARY",
+  "VARBINARY",
+  "BLOB",
+  "JSON",
+  "UUID",
+  "ENUM",
+  "SET",
+];
+
+export const tableThemes = [
+  "#f03c3c",
+  "#ff4f81",
+  "#bc49c4",
+  "#a751e8",
+  "#7c4af0",
+  "#6360f7",
+  "#7d9dff",
+  "#32c9b0",
+  "#3cde7d",
+  "#89e667",
+  "#ffe159",
+  "#ff9159",
+];
+
+export const noteThemes = [
+  "#ffdfd9",
+  "#fcf7ac",
+  "#cffcb1",
+  "#c7d2ff",
+  "#e7c7ff",
+];
+
+export const defaultBlue = "#175e7a";
+export const defaultNoteTheme = "#fcf7ac";
+
+export const Cardinality = {
+  ONE_TO_ONE: "One to one",
+  ONE_TO_MANY: "One to many",
+  MANY_TO_ONE: "Many to one",
+};
+
+export const Constraint = {
+  NONE: "No action",
+  RESTRICT: "Restrict",
+  CASCADE: "Cascade",
+  SET_NULL: "Set null",
+  SET_DEFAULT: "Set default",
+};
+
+export const Tab = {
+  TABLES: "1",
+  RELATIONSHIPS: "2",
+  AREAS: "3",
+  NOTES: "4",
+  TYPES: "5",
+};
+
+export const ObjectType = {
+  NONE: 0,
+  TABLE: 1,
+  AREA: 2,
+  NOTE: 3,
+  RELATIONSHIP: 4,
+  TYPE: 5,
+};
+
+export const Action = {
+  ADD: 0,
+  MOVE: 1,
+  DELETE: 2,
+  EDIT: 3,
+  PAN: 4,
+};
+
+export const State = {
+  NONE: 0,
+  SAVING: 1,
+  SAVED: 2,
+  LOADING: 3,
+  ERROR: 4,
+};
diff --git a/src/data/data.js b/src/data/data.js
deleted file mode 100644
index d96441e..0000000
--- a/src/data/data.js
+++ /dev/null
@@ -1,128 +0,0 @@
-const sqlDataTypes = [
-  "INT",
-  "SMALLINT",
-  "BIGINT",
-  "DECIMAL",
-  "NUMERIC",
-  "FLOAT",
-  "DOUBLE",
-  "REAL",
-  "CHAR",
-  "VARCHAR",
-  "TEXT",
-  "DATE",
-  "TIME",
-  "TIMESTAMP",
-  "DATETIME",
-  "BOOLEAN",
-  "BINARY",
-  "VARBINARY",
-  "BLOB",
-  "JSON",
-  "UUID",
-  "ENUM",
-  "SET",
-];
-
-const tableThemes = [
-  "#f03c3c",
-  "#ff4f81",
-  "#bc49c4",
-  "#a751e8",
-  "#7c4af0",
-  "#6360f7",
-  "#7d9dff",
-  "#32c9b0",
-  "#3cde7d",
-  "#89e667",
-  "#ffe159",
-  "#ff9159",
-];
-
-const noteThemes = ["#ffdfd9", "#fcf7ac", "#cffcb1", "#c7d2ff", "#e7c7ff"];
-
-const avatarThemes = [
-  "amber",
-  "blue",
-  "cyan",
-  "green",
-  "grey",
-  "indigo",
-  "light-blue",
-  "light-green",
-  "lime",
-  "orange",
-  "pink",
-  "red",
-  "teal",
-  "violet",
-  "yellow",
-  "white",
-];
-
-const defaultTableTheme = "#175e7a";
-const defaultNoteTheme = "#fcf7ac";
-const bgBlue = "#124559";
-
-const Cardinality = {
-  ONE_TO_ONE: "One to one",
-  ONE_TO_MANY: "One to many",
-  MANY_TO_ONE: "Many to one",
-};
-
-const Constraint = {
-  none: "No action",
-  restrict: "Restrict",
-  cascade: "Cascade",
-  setNull: "Set null",
-  setDefault: "Set default",
-};
-
-const Tab = {
-  tables: "1",
-  relationships: "2",
-  subject_areas: "3",
-  notes: "4",
-  types: "5",
-};
-
-const ObjectType = {
-  NONE: 0,
-  TABLE: 1,
-  AREA: 2,
-  NOTE: 3,
-  RELATIONSHIP: 4,
-  TYPE: 5,
-};
-
-const Action = {
-  ADD: 0,
-  MOVE: 1,
-  DELETE: 2,
-  EDIT: 3,
-  PAN: 4,
-};
-
-const State = {
-  NONE: 0,
-  SAVING: 1,
-  SAVED: 2,
-  LOADING: 3,
-  ERROR: 4,
-};
-
-export {
-  bgBlue,
-  sqlDataTypes,
-  tableThemes,
-  noteThemes,
-  defaultTableTheme,
-  defaultNoteTheme,
-  avatarThemes,
-  Cardinality,
-  Constraint,
-  Tab,
-  ObjectType,
-  Action,
-  State,
-};
diff --git a/src/utils/toSQL.js b/src/utils/toSQL.js
index cdefb83..8d0d496 100644
--- a/src/utils/toSQL.js
+++ b/src/utils/toSQL.js
@@ -1,4 +1,4 @@
-import { sqlDataTypes } from "../data/data";
+import { sqlDataTypes } from "../data/constants";
 
 function getJsonType(f) {
   if (!sqlDataTypes.includes(f.type)) {