diff --git a/src/components/AreasOverview.jsx b/src/components/AreasOverview.jsx
index 34e46b5..f2c8809 100644
--- a/src/components/AreasOverview.jsx
+++ b/src/components/AreasOverview.jsx
@@ -24,7 +24,7 @@ import {
 import useUndoRedo from "../hooks/useUndoRedo";
 import useAreas from "../hooks/useAreas";
 import useSaveState from "../hooks/useSaveState";
-import NoElements from "./NoElements";
+import Empty from "./Empty";
 
 export default function AreasOverview() {
   const { setSaveState } = useSaveState();
@@ -73,7 +73,7 @@ export default function AreasOverview() {
         </Col>
       </Row>
       {areas.length <= 0 ? (
-        <NoElements
+        <Empty
           title="No subject areas"
           text="Add subject areas to organize tables!"
         />
diff --git a/src/components/NoElements.jsx b/src/components/Empty.jsx
similarity index 76%
rename from src/components/NoElements.jsx
rename to src/components/Empty.jsx
index b38aa03..9aa9af1 100644
--- a/src/components/NoElements.jsx
+++ b/src/components/Empty.jsx
@@ -2,12 +2,12 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { Empty } from "@douyinfe/semi-ui";
+import { Empty as SemiUIEmpty } from "@douyinfe/semi-ui";
 
-export default function NoElements({ title, text }) {
+export default function Empty({ title, text }) {
   return (
     <div className="select-none mt-2">
-      <Empty
+      <SemiUIEmpty
         image={<IllustrationNoContent style={{ width: 154, height: 154 }} />}
         darkModeImage={
           <IllustrationNoContentDark style={{ width: 154, height: 154 }} />
diff --git a/src/components/NotesOverview.jsx b/src/components/NotesOverview.jsx
index fe8963d..1b5c12e 100644
--- a/src/components/NotesOverview.jsx
+++ b/src/components/NotesOverview.jsx
@@ -19,7 +19,7 @@ import {
 import { noteThemes, Action, ObjectType } from "../data/constants";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useNotes from "../hooks/useNotes";
-import NoElements from "./NoElements";
+import Empty from "./Empty";
 
 export default function NotesOverview() {
   const { notes, updateNote, addNote, deleteNote } = useNotes();
@@ -69,7 +69,7 @@ export default function NotesOverview() {
         </Col>
       </Row>
       {notes.length <= 0 ? (
-        <NoElements title="No text notes" text="Add notes cuz why not!" />
+        <Empty title="No text notes" text="Add notes cuz why not!" />
       ) : (
         <Collapse
           activeKey={activeKey}
diff --git a/src/components/RelationshipsOverview.jsx b/src/components/RelationshipsOverview.jsx
index 0ca2053..02f48c1 100644
--- a/src/components/RelationshipsOverview.jsx
+++ b/src/components/RelationshipsOverview.jsx
@@ -18,7 +18,7 @@ import {
 import { Cardinality, Constraint, Action, ObjectType } from "../data/constants";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
-import NoElements from "./NoElements";
+import Empty from "./Empty";
 
 export default function RelationshipsOverview() {
   const { relationships } = useTables();
@@ -62,7 +62,7 @@ export default function RelationshipsOverview() {
         accordion
       >
         {relationships.length <= 0 ? (
-          <NoElements
+          <Empty
             title="No relationships"
             text="Drag to connect fields and form relationships!"
           />
diff --git a/src/components/TablesOverview.jsx b/src/components/TablesOverview.jsx
index 32e197c..932e02e 100644
--- a/src/components/TablesOverview.jsx
+++ b/src/components/TablesOverview.jsx
@@ -35,7 +35,7 @@ import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
 import useTypes from "../hooks/useTypes";
-import NoElements from "./NoElements";
+import NoElements from "./Empty";
 
 export default function TablesOverview() {
   const [searchText, setSearchText] = useState("");
diff --git a/src/components/TypesOverview.jsx b/src/components/TypesOverview.jsx
index 83720f9..cd4fb8f 100644
--- a/src/components/TypesOverview.jsx
+++ b/src/components/TypesOverview.jsx
@@ -25,7 +25,7 @@ import {
 import { isSized, hasPrecision, getSize } from "../utils/toSQL";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useTypes from "../hooks/useTypes";
-import NoElements from "./NoElements";
+import NoElements from "./Empty";
 
 export default function TypesOverview() {
   const [value, setValue] = useState("");