diff --git a/src/components/area_overview.jsx b/src/components/area_overview.jsx
index bd66a46..0c2e0a0 100644
--- a/src/components/area_overview.jsx
+++ b/src/components/area_overview.jsx
@@ -28,7 +28,7 @@ import {
 import { AreaContext, UndoRedoContext } from "../pages/editor";
 
 export default function AreaOverview(props) {
-  const { areas, setAreas, addArea, deleteArea } = useContext(AreaContext);
+  const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [editField, setEditField] = useState({});
   const [value, setValue] = useState("");
@@ -48,20 +48,6 @@ export default function AreaOverview(props) {
     );
   };
 
-  const updateArea = (aid, updatedValues) => {
-    setAreas((prev) =>
-      prev.map((a, i) => {
-        if (aid === i) {
-          return {
-            ...a,
-            ...updatedValues,
-          };
-        }
-        return a;
-      })
-    );
-  };
-
   return (
     <div>
       <Row gutter={6}>
@@ -134,7 +120,6 @@ export default function AreaOverview(props) {
                       },
                     ]);
                     setRedoStack([]);
-                    setEditField({});
                   }}
                 />
               </Col>
@@ -176,7 +161,6 @@ export default function AreaOverview(props) {
                                     },
                                   ]);
                                   setRedoStack([]);
-                                  setEditField({});
                                   updateArea(i, { color: c });
                                 }}
                               >
@@ -210,7 +194,6 @@ export default function AreaOverview(props) {
                                     },
                                   ]);
                                   setRedoStack([]);
-                                  setEditField({});
                                   updateArea(i, { color: c });
                                 }}
                               >
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 0034a52..189fd9d 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -13,10 +13,10 @@ import {
 import Note from "./note";
 
 export default function Canvas(props) {
-  const { tables, moveTable, relationships, addRelationship } =
+  const { tables, updateTable, relationships, addRelationship } =
     useContext(TableContext);
-  const { areas, setAreas, moveArea } = useContext(AreaContext);
-  const { notes, moveNote } = useContext(NoteContext);
+  const { areas, setAreas, updateArea } = useContext(AreaContext);
+  const { notes, updateNote } = useContext(NoteContext);
   const { settings, setSettings } = useContext(SettingsContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [dragging, setDragging] = useState({
@@ -128,7 +128,7 @@ export default function Canvas(props) {
     } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
       const dx = e.clientX / settings.zoom - offset.x;
       const dy = e.clientY / settings.zoom - offset.y;
-      moveTable(dragging.id, dx, dy);
+      updateTable(dragging.id, { x: dx, y: dy }, true);
     } else if (
       dragging.element === ObjectType.AREA &&
       dragging.id >= 0 &&
@@ -136,11 +136,11 @@ export default function Canvas(props) {
     ) {
       const dx = e.clientX / settings.zoom - offset.x;
       const dy = e.clientY / settings.zoom - offset.y;
-      moveArea(dragging.id, dx, dy);
+      updateArea(dragging.id, { x: dx, y: dy });
     } else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) {
       const dx = e.clientX / settings.zoom - offset.x;
       const dy = e.clientY / settings.zoom - offset.y;
-      moveNote(dragging.id, dx, dy);
+      updateNote(dragging.id, { x: dx, y: dy });
     } else if (areaResize.id !== -1) {
       if (areaResize.dir === "none") return;
 
@@ -241,16 +241,13 @@ export default function Canvas(props) {
       setRedoStack([]);
     }
     setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 });
-    // NOTE: consider just saving the offset to sub and add in undo redo
     if (panning.state && didPan()) {
       setUndoStack((prev) => [
         ...prev,
         {
           action: Action.PAN,
-          data: {
-            undo: { x: panning.x, y: panning.y },
-            redo: settings.pan,
-          },
+          undo: { x: panning.x, y: panning.y },
+          redo: settings.pan,
         },
       ]);
       setRedoStack([]);
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 6f899bc..83a6d25 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -81,16 +81,16 @@ export default function ControlPanel(props) {
     tables,
     setTables,
     addTable,
-    moveTable,
+    updateTable,
     deleteTable,
     updateField,
     setRelationships,
     addRelationship,
     deleteRelationship,
   } = useContext(TableContext);
-  const { notes, setNotes, moveNote, addNote, deleteNote } =
+  const { notes, setNotes, updateNote, addNote, deleteNote } =
     useContext(NoteContext);
-  const { areas, setAreas, moveArea, addArea, deleteArea } =
+  const { areas, setAreas, updateArea, addArea, deleteArea } =
     useContext(AreaContext);
   const { undoStack, redoStack, setUndoStack, setRedoStack } =
     useContext(UndoRedoContext);
@@ -134,19 +134,19 @@ export default function ControlPanel(props) {
           ...prev,
           { ...a, x: tables[a.id].x, y: tables[a.id].y },
         ]);
-        moveTable(a.id, a.x, a.y);
+        updateTable(a.id, { x: a.x, y: a.y }, true);
       } else if (a.element === ObjectType.AREA) {
         setRedoStack((prev) => [
           ...prev,
           { ...a, x: areas[a.id].x, y: areas[a.id].y },
         ]);
-        moveArea(a.id, a.x, a.y);
+        updateArea(a.id, { x: a.x, y: a.y });
       } else if (a.element === ObjectType.NOTE) {
         setRedoStack((prev) => [
           ...prev,
           { ...a, x: notes[a.id].x, y: notes[a.id].y },
         ]);
-        moveNote(a.id, a.x, a.y);
+        updateNote(a.id, { x: a.x, y: a.y });
       }
     } else if (a.action === Action.DELETE) {
       if (a.element === ObjectType.TABLE) {
@@ -170,17 +170,10 @@ export default function ControlPanel(props) {
           })
         );
       } else if (a.element === ObjectType.NOTE) {
-        setNotes((prev) =>
-          prev.map((n) => {
-            if (n.id === a.nid) {
-              return { ...n, ...a.undo };
-            }
-            return n;
-          })
-        );
+        updateNote(a.nid, a.undo);
       } else if (a.element === ObjectType.TABLE) {
         if (a.component === "field") {
-          updateField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values);
+          updateField(a.tid, a.fid, a.undo);
         } else if (a.component === "field_delete") {
           setTables((prev) =>
             prev.map((t, i) => {
@@ -207,17 +200,7 @@ export default function ControlPanel(props) {
             })
           );
         } else if (a.component === "comment") {
-          setTables((prev) =>
-            prev.map((t, i) => {
-              if (t.id === a.data.undo.tid) {
-                return {
-                  ...t,
-                  ...a.data.undo.values,
-                };
-              }
-              return t;
-            })
-          );
+          updateTable(a.tid, a.undo, false);
         } else if (a.component === "index_add") {
           setTables((prev) =>
             prev.map((table, i) => {
@@ -233,19 +216,16 @@ export default function ControlPanel(props) {
             })
           );
         } else if (a.component === "index") {
-          setTables((prev) =>
-            prev.map((table, i) => {
-              if (a.tid === i) {
-                return {
-                  ...table,
-                  indices: table.indices.map((idx) =>
-                    idx.id === a.iid ? { ...idx, ...a.undo.values } : idx
-                  ),
-                };
-              }
-              return table;
-            })
-          );
+          updateTable(a.tid, {
+            indices: tables[a.tid].indices.map((index) =>
+              index.id === a.iid
+                ? {
+                    ...index,
+                    ...a.undo,
+                  }
+                : index
+            ),
+          });
         } else if (a.component === "index_delete") {
           setTables((prev) =>
             prev.map((table, i) => {
@@ -261,16 +241,14 @@ export default function ControlPanel(props) {
             })
           );
         } else if (a.component === "self") {
-          setTables((prev) =>
-            prev.map((t) => (t.id === a.tid ? { ...t, ...a.undo } : t))
-          );
+          updateTable(a.tid, a.undo);
         }
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
       setSettings((prev) => ({
         ...prev,
-        pan: a.data.undo,
+        pan: a.undo,
       }));
       setRedoStack((prev) => [...prev, a]);
     }
@@ -296,19 +274,19 @@ export default function ControlPanel(props) {
           ...prev,
           { ...a, x: tables[a.id].x, y: tables[a.id].y },
         ]);
-        moveTable(a.id, a.x, a.y);
+        updateTable(a.id, { x: a.x, y: a.y }, true);
       } else if (a.element === ObjectType.AREA) {
         setUndoStack((prev) => [
           ...prev,
           { ...a, x: areas[a.id].x, y: areas[a.id].y },
         ]);
-        moveArea(a.id, a.x, a.y);
+        updateArea(a.id, { x: a.x, y: a.y });
       } else if (a.element === ObjectType.NOTE) {
         setUndoStack((prev) => [
           ...prev,
           { ...a, x: notes[a.id].x, y: notes[a.id].y },
         ]);
-        moveNote(a.id, a.x, a.y);
+        updateNote(a.id, { x: a.x, y: a.y });
       }
     } else if (a.action === Action.DELETE) {
       if (a.element === ObjectType.TABLE) {
@@ -332,69 +310,36 @@ export default function ControlPanel(props) {
           })
         );
       } else if (a.element === ObjectType.NOTE) {
-        setNotes((prev) =>
-          prev.map((n) => {
-            if (n.id === a.nid) {
-              return { ...n, ...a.redo };
-            }
-            return n;
-          })
-        );
+        updateNote(a.nid, a.redo);
       } else if (a.element === ObjectType.TABLE) {
         if (a.component === "field") {
-          updateField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values);
+          updateField(a.tid, a.fid, a.redo);
         } else if (a.component === "field_delete") {
-          setTables((prev) =>
-            prev.map((t, i) => {
-              if (t.id === a.tid) {
-                return {
-                  ...t,
-                  fields: t.fields
-                    .filter((e) => e.id !== a.data.id)
-                    .map((t, i) => ({ ...t, id: i })),
-                };
-              }
-              return t;
-            })
-          );
+          updateTable(a.tid, {
+            fields: tables[a.tid].fields
+              .filter((field) => field.id !== a.data.id)
+              .map((e, i) => ({ ...e, id: i })),
+          });
         } else if (a.component === "field_add") {
-          setTables((prev) =>
-            prev.map((t, i) => {
-              if (t.id === a.tid) {
-                return {
-                  ...t,
-                  fields: [
-                    ...t.fields,
-                    {
-                      name: "",
-                      type: "",
-                      default: "",
-                      check: "",
-                      primary: false,
-                      unique: false,
-                      notNull: false,
-                      increment: false,
-                      comment: "",
-                      id: t.fields.length,
-                    },
-                  ],
-                };
-              }
-              return t;
-            })
-          );
+          updateTable(a.tid, {
+            fields: [
+              ...tables[a.tid].fields,
+              {
+                name: "",
+                type: "",
+                default: "",
+                check: "",
+                primary: false,
+                unique: false,
+                notNull: false,
+                increment: false,
+                comment: "",
+                id: tables[a.tid].fields.length,
+              },
+            ],
+          });
         } else if (a.component === "comment") {
-          setTables((prev) =>
-            prev.map((t, i) => {
-              if (t.id === a.data.redo.tid) {
-                return {
-                  ...t,
-                  ...a.data.redo.values,
-                };
-              }
-              return t;
-            })
-          );
+          updateTable(a.tid, a.redo, false);
         } else if (a.component === "index_add") {
           setTables((prev) =>
             prev.map((table) => {
@@ -415,44 +360,31 @@ export default function ControlPanel(props) {
             })
           );
         } else if (a.component === "index") {
-          setTables((prev) =>
-            prev.map((table, i) => {
-              if (a.tid === i) {
-                return {
-                  ...table,
-                  indices: table.indices.map((idx) =>
-                    idx.id === a.iid ? { ...idx, ...a.redo.values } : idx
-                  ),
-                };
-              }
-              return table;
-            })
-          );
+          updateTable(a.tid, {
+            indices: tables[a.tid].indices.map((index) =>
+              index.id === a.iid
+                ? {
+                    ...index,
+                    ...a.redo,
+                  }
+                : index
+            ),
+          });
         } else if (a.component === "index_delete") {
-          setTables((prev) =>
-            prev.map((table, i) => {
-              if (table.id === a.tid) {
-                return {
-                  ...table,
-                  indices: table.indices
-                    .filter((e) => e.id !== a.data.id)
-                    .map((t, i) => ({ ...t, id: i })),
-                };
-              }
-              return table;
-            })
-          );
+          updateTable(a.tid, {
+            indices: tables[a.tid].indices
+              .filter((e) => e.id !== a.data.id)
+              .map((t, i) => ({ ...t, id: i })),
+          });
         } else if (a.component === "self") {
-          setTables((prev) =>
-            prev.map((t) => (t.id === a.tid ? { ...t, ...a.redo } : t))
-          );
+          updateTable(a.tid, a.redo);
         }
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
       setSettings((prev) => ({
         ...prev,
-        pan: a.data.redo,
+        pan: a.redo,
       }));
       setUndoStack((prev) => [...prev, a]);
     }
diff --git a/src/components/note.jsx b/src/components/note.jsx
index 7d149cf..25c2dfa 100644
--- a/src/components/note.jsx
+++ b/src/components/note.jsx
@@ -3,7 +3,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor";
 import { Action, ObjectType } from "../data/data";
 
 export default function Note(props) {
-  const { setNotes } = useContext(NoteContext);
+  const { updateNote } = useContext(NoteContext);
   const w = 180;
   const r = 3;
   const fold = 24;
@@ -14,14 +14,7 @@ export default function Note(props) {
     textarea.style.height = "0";
     textarea.style.height = textarea.scrollHeight + "px";
     const newHeight = textarea.scrollHeight + 41;
-    setNotes((prev) =>
-      prev.map((n) => {
-        if (n.id === props.data.id) {
-          return { ...n, content: e.target.value, height: newHeight };
-        }
-        return n;
-      })
-    );
+    updateNote(props.data.id, { content: e.target.value, height: newHeight });
   };
 
   return (
@@ -94,7 +87,6 @@ export default function Note(props) {
                 },
               ]);
               setRedoStack([]);
-              setEditField({});
             }}
             className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
             style={{ backgroundColor: props.data.color }}
diff --git a/src/components/notes_overview.jsx b/src/components/notes_overview.jsx
index bda90df..61e01cb 100644
--- a/src/components/notes_overview.jsx
+++ b/src/components/notes_overview.jsx
@@ -24,7 +24,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor";
 import { noteThemes, Action, ObjectType } from "../data/data";
 
 export default function NotesOverview(props) {
-  const { notes, setNotes, addNote, deleteNote } = useContext(NoteContext);
+  const { notes, updateNote, addNote, deleteNote } = useContext(NoteContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [value, setValue] = useState("");
   const [editField, setEditField] = useState({});
@@ -45,17 +45,6 @@ export default function NotesOverview(props) {
     );
   };
 
-  const updateNote = (id, values) => {
-    setNotes((prev) =>
-      prev.map((note) => {
-        if (note.id === id) {
-          return { ...note, ...values };
-        }
-        return note;
-      })
-    );
-  };
-
   return (
     <div>
       <Row gutter={6}>
@@ -145,7 +134,6 @@ export default function NotesOverview(props) {
                       },
                     ]);
                     setRedoStack([]);
-                    setEditField({});
                   }}
                   rows={3}
                 />
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 852200a..516dd9e 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -38,7 +38,7 @@ import { TableContext, UndoRedoContext } from "../pages/editor";
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const [value, setValue] = useState("");
-  const { tables, setTables, addTable, deleteTable, updateField } =
+  const { tables, addTable, deleteTable, updateField, updateTable } =
     useContext(TableContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [editField, setEditField] = useState({});
@@ -58,20 +58,6 @@ export default function TableOverview(props) {
     );
   };
 
-  const updateTable = (tid, updatedValues) => {
-    setTables((prev) =>
-      prev.map((table, i) => {
-        if (tid === i) {
-          return {
-            ...table,
-            ...updatedValues,
-          };
-        }
-        return table;
-      })
-    );
-  };
-
   return (
     <>
       <Row gutter={6}>
@@ -82,7 +68,6 @@ export default function TableOverview(props) {
             showClear
             prefix={<IconSearch />}
             placeholder="Search..."
-            emptyContent={<div className="p-3">No tables found</div>}
             onSearch={(v) => handleStringSearch(v)}
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
@@ -138,16 +123,9 @@ export default function TableOverview(props) {
                       <Input
                         field="name"
                         value={f.name}
-                        className="m-0"
                         placeholder="Name"
                         onChange={(value) => updateField(i, j, { name: value })}
-                        onFocus={(e) =>
-                          setEditField({
-                            tid: i,
-                            fid: j,
-                            values: { name: e.target.value },
-                          })
-                        }
+                        onFocus={(e) => setEditField({ name: e.target.value })}
                         onBlur={(e) => {
                           if (e.target.value === editField.name) return;
                           setUndoStack((prev) => [
@@ -156,18 +134,13 @@ export default function TableOverview(props) {
                               action: Action.EDIT,
                               element: ObjectType.TABLE,
                               component: "field",
-                              data: {
-                                undo: editField,
-                                redo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { name: e.target.value },
-                                },
-                              },
+                              tid: i,
+                              fid: j,
+                              undo: editField,
+                              redo: { name: e.target.value },
                             },
                           ]);
                           setRedoStack([]);
-                          setEditField({});
                         }}
                       />
                     </Col>
@@ -191,22 +164,13 @@ export default function TableOverview(props) {
                               action: Action.EDIT,
                               element: ObjectType.TABLE,
                               component: "field",
-                              data: {
-                                undo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { type: f.type },
-                                },
-                                redo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { type: value },
-                                },
-                              },
+                              tid: i,
+                              fid: j,
+                              undo: { type: f.type },
+                              redo: { type: value },
                             },
                           ]);
                           setRedoStack([]);
-                          setEditField({});
                           updateField(i, j, { type: value });
                         }}
                       ></Select>
@@ -223,22 +187,13 @@ export default function TableOverview(props) {
                               action: Action.EDIT,
                               element: ObjectType.TABLE,
                               component: "field",
-                              data: {
-                                undo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { notNull: f.notNull },
-                                },
-                                redo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { notNull: !f.notNull },
-                                },
-                              },
+                              tid: i,
+                              fid: j,
+                              undo: { notNull: f.notNull },
+                              redo: { notNull: !f.notNull },
                             },
                           ]);
                           setRedoStack([]);
-                          setEditField({});
                           updateField(i, j, { notNull: !f.notNull });
                         }}
                       >
@@ -257,22 +212,13 @@ export default function TableOverview(props) {
                               action: Action.EDIT,
                               element: ObjectType.TABLE,
                               component: "field",
-                              data: {
-                                undo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { primary: f.primary },
-                                },
-                                redo: {
-                                  tid: i,
-                                  fid: j,
-                                  values: { primary: !f.primary },
-                                },
-                              },
+                              tid: i,
+                              fid: j,
+                              undo: { primary: f.primary },
+                              redo: { primary: !f.primary },
                             },
                           ]);
                           setRedoStack([]);
-                          setEditField({});
                           updateField(i, j, { primary: !f.primary });
                         }}
                         icon={<IconKeyStroked />}
@@ -291,11 +237,7 @@ export default function TableOverview(props) {
                                 updateField(i, j, { default: value })
                               }
                               onFocus={(e) =>
-                                setEditField({
-                                  tid: i,
-                                  fid: j,
-                                  values: { default: e.target.value },
-                                })
+                                setEditField({ default: e.target.value })
                               }
                               onBlur={(e) => {
                                 if (e.target.value === editField.default)
@@ -306,18 +248,13 @@ export default function TableOverview(props) {
                                     action: Action.EDIT,
                                     element: ObjectType.TABLE,
                                     component: "field",
-                                    data: {
-                                      undo: editField,
-                                      redo: {
-                                        tid: i,
-                                        fid: j,
-                                        values: { default: e.target.value },
-                                      },
-                                    },
+                                    tid: i,
+                                    fid: j,
+                                    undo: editField,
+                                    redo: { default: e.target.value },
                                   },
                                 ]);
                                 setRedoStack([]);
-                                setEditField({});
                               }}
                             />
                             <div className="font-semibold">
@@ -331,11 +268,7 @@ export default function TableOverview(props) {
                                 updateField(i, j, { check: value })
                               }
                               onFocus={(e) =>
-                                setEditField({
-                                  tid: i,
-                                  fid: j,
-                                  values: { check: e.target.value },
-                                })
+                                setEditField({ check: e.target.value })
                               }
                               onBlur={(e) => {
                                 if (e.target.value === editField.check) return;
@@ -345,18 +278,13 @@ export default function TableOverview(props) {
                                     action: Action.EDIT,
                                     element: ObjectType.TABLE,
                                     component: "field",
-                                    data: {
-                                      undo: editField,
-                                      redo: {
-                                        tid: i,
-                                        fid: j,
-                                        values: { check: e.target.value },
-                                      },
-                                    },
+                                    tid: i,
+                                    fid: j,
+                                    undo: editField,
+                                    redo: { check: e.target.value },
                                   },
                                 ]);
                                 setRedoStack([]);
-                                setEditField({});
                               }}
                             />
                             <div className="flex justify-between items-center my-3">
@@ -371,28 +299,19 @@ export default function TableOverview(props) {
                                       action: Action.EDIT,
                                       element: ObjectType.TABLE,
                                       component: "field",
-                                      data: {
-                                        undo: {
-                                          tid: i,
-                                          fid: j,
-                                          values: {
-                                            [checkedValues.target.value]:
-                                              !checkedValues.target.checked,
-                                          },
-                                        },
-                                        redo: {
-                                          tid: i,
-                                          fid: j,
-                                          values: {
-                                            [checkedValues.target.value]:
-                                              checkedValues.target.checked,
-                                          },
-                                        },
+                                      tid: i,
+                                      fid: j,
+                                      undo: {
+                                        [checkedValues.target.value]:
+                                          !checkedValues.target.checked,
+                                      },
+                                      redo: {
+                                        [checkedValues.target.value]:
+                                          checkedValues.target.checked,
                                       },
                                     },
                                   ]);
                                   setRedoStack([]);
-                                  setEditField({});
                                   updateField(i, j, {
                                     [checkedValues.target.value]:
                                       checkedValues.target.checked,
@@ -412,28 +331,19 @@ export default function TableOverview(props) {
                                       action: Action.EDIT,
                                       element: ObjectType.TABLE,
                                       component: "field",
-                                      data: {
-                                        undo: {
-                                          tid: i,
-                                          fid: j,
-                                          values: {
-                                            [checkedValues.target.value]:
-                                              !checkedValues.target.checked,
-                                          },
-                                        },
-                                        redo: {
-                                          tid: i,
-                                          fid: j,
-                                          values: {
-                                            [checkedValues.target.value]:
-                                              checkedValues.target.checked,
-                                          },
-                                        },
+                                      tid: i,
+                                      fid: j,
+                                      undo: {
+                                        [checkedValues.target.value]:
+                                          !checkedValues.target.checked,
+                                      },
+                                      redo: {
+                                        [checkedValues.target.value]:
+                                          checkedValues.target.checked,
                                       },
                                     },
                                   ]);
                                   setRedoStack([]);
-                                  setEditField({});
                                   updateField(i, j, {
                                     [checkedValues.target.value]:
                                       checkedValues.target.checked,
@@ -453,11 +363,7 @@ export default function TableOverview(props) {
                                 updateField(i, j, { comment: value })
                               }
                               onFocus={(e) =>
-                                setEditField({
-                                  tid: i,
-                                  fid: j,
-                                  values: { comment: e.target.value },
-                                })
+                                setEditField({ comment: e.target.value })
                               }
                               onBlur={(e) => {
                                 if (e.target.value === editField.comment)
@@ -468,18 +374,13 @@ export default function TableOverview(props) {
                                     action: Action.EDIT,
                                     element: ObjectType.TABLE,
                                     component: "field",
-                                    data: {
-                                      undo: editField,
-                                      redo: {
-                                        tid: i,
-                                        fid: j,
-                                        values: { comment: e.target.value },
-                                      },
-                                    },
+                                    tid: i,
+                                    fid: j,
+                                    undo: editField,
+                                    redo: { comment: e.target.value },
                                   },
                                 ]);
                                 setRedoStack([]);
-                                setEditField({});
                               }}
                             />
                             <Button
@@ -498,19 +399,11 @@ export default function TableOverview(props) {
                                   },
                                 ]);
                                 setRedoStack([]);
-                                setTables((prev) =>
-                                  prev.map((table) => {
-                                    if (table.id === i) {
-                                      return {
-                                        ...table,
-                                        fields: table.fields.filter(
-                                          (field, k) => k !== j
-                                        ),
-                                      };
-                                    }
-                                    return table;
-                                  })
-                                );
+                                updateTable(i, {
+                                  fields: t.fields
+                                    .filter((field) => field.id !== j)
+                                    .map((e, i) => ({ ...e, id: i })),
+                                });
                               }}
                             >
                               Delete field
@@ -562,42 +455,27 @@ export default function TableOverview(props) {
                                     tid: i,
                                     iid: k,
                                     undo: {
-                                      values: {
-                                        fields: [...idx.fields],
-                                        name: `${idx.fields.join("_")}_index`,
-                                      },
+                                      fields: [...idx.fields],
+                                      name: `${idx.fields.join("_")}_index`,
                                     },
                                     redo: {
-                                      values: {
-                                        fields: [...value],
-                                        name: `${value.join("_")}_index`,
-                                      },
+                                      fields: [...value],
+                                      name: `${value.join("_")}_index`,
                                     },
                                   },
                                 ]);
                                 setRedoStack([]);
-                                setEditField({});
-                                setTables((prev) =>
-                                  prev.map((table, i) => {
-                                    if (table.id === i) {
-                                      return {
-                                        ...table,
-                                        indices: table.indices.map((index) =>
-                                          index.id === k
-                                            ? {
-                                                ...index,
-                                                fields: [...value],
-                                                name: `${value.join(
-                                                  "_"
-                                                )}_index`,
-                                              }
-                                            : index
-                                        ),
-                                      };
-                                    }
-                                    return table;
-                                  })
-                                );
+                                updateTable(i, {
+                                  indices: t.indices.map((index) =>
+                                    index.id === k
+                                      ? {
+                                          ...index,
+                                          fields: [...value],
+                                          name: `${value.join("_")}_index`,
+                                        }
+                                      : index
+                                  ),
+                                });
                               }}
                             />
                             <Popover
@@ -625,24 +503,14 @@ export default function TableOverview(props) {
                                         },
                                       ]);
                                       setRedoStack([]);
-                                      setTables((prev) =>
-                                        prev.map((table) => {
-                                          if (table.id === i) {
-                                            return {
-                                              ...table,
-                                              indices: table.indices
-                                                .filter(
-                                                  (index) => index.id !== idx.id
-                                                )
-                                                .map((e, j) => ({
-                                                  ...e,
-                                                  id: j,
-                                                })),
-                                            };
-                                          }
-                                          return table;
-                                        })
-                                      );
+                                      updateTable(i, {
+                                        indices: t.indices
+                                          .filter((e) => e.id !== k)
+                                          .map((e, j) => ({
+                                            ...e,
+                                            id: j,
+                                          })),
+                                      });
                                     }}
                                   >
                                     Delete
@@ -674,18 +542,15 @@ export default function TableOverview(props) {
                     <Collapse.Panel header="Comment" itemKey="1">
                       <TextArea
                         field="comment"
-                        showClear
-                        onClear={() => updateTable(i, { comment: "" })}
                         value={t.comment}
                         autosize
                         placeholder="Add comment"
                         rows={1}
-                        onChange={(value) => updateTable(i, { comment: value })}
+                        onChange={(value) =>
+                          updateTable(i, { comment: value }, false)
+                        }
                         onFocus={(e) =>
-                          setEditField({
-                            tid: t.id,
-                            values: { comment: e.target.value },
-                          })
+                          setEditField({ comment: e.target.value })
                         }
                         onBlur={(e) => {
                           if (e.target.value === editField.comment) return;
@@ -695,17 +560,12 @@ export default function TableOverview(props) {
                               action: Action.EDIT,
                               element: ObjectType.TABLE,
                               component: "comment",
-                              data: {
-                                undo: editField,
-                                redo: {
-                                  tid: i,
-                                  values: { comment: e.target.value },
-                                },
-                              },
+                              tid: i,
+                              undo: editField,
+                              redo: { comment: e.target.value },
                             },
                           ]);
                           setRedoStack([]);
-                          setEditField({});
                         }}
                       />
                     </Collapse.Panel>
@@ -836,24 +696,16 @@ export default function TableOverview(props) {
                           },
                         ]);
                         setRedoStack([]);
-                        setTables((prev) =>
-                          prev.map((table) => {
-                            if (table.id === i) {
-                              return {
-                                ...table,
-                                indices: [
-                                  ...table.indices,
-                                  {
-                                    id: table.indices.length,
-                                    name: `index_${table.indices.length}`,
-                                    fields: [],
-                                  },
-                                ],
-                              };
-                            }
-                            return table;
-                          })
-                        );
+                        updateTable(i, {
+                          indices: [
+                            ...t.indices,
+                            {
+                              id: t.indices.length,
+                              name: `index_${t.indices.length}`,
+                              fields: [],
+                            },
+                          ],
+                        });
                       }}
                     >
                       Add index
@@ -872,31 +724,23 @@ export default function TableOverview(props) {
                           },
                         ]);
                         setRedoStack([]);
-                        setTables((prev) =>
-                          prev.map((table) => {
-                            if (table.id === i) {
-                              return {
-                                ...table,
-                                fields: [
-                                  ...table.fields,
-                                  {
-                                    name: "",
-                                    type: "",
-                                    default: "",
-                                    check: "",
-                                    primary: false,
-                                    unique: false,
-                                    notNull: false,
-                                    increment: false,
-                                    comment: "",
-                                    id: table.fields.length,
-                                  },
-                                ],
-                              };
-                            }
-                            return table;
-                          })
-                        );
+                        updateTable(i, {
+                          fields: [
+                            ...t.fields,
+                            {
+                              name: "",
+                              type: "",
+                              default: "",
+                              check: "",
+                              primary: false,
+                              unique: false,
+                              notNull: false,
+                              increment: false,
+                              comment: "",
+                              id: t.fields.length,
+                            },
+                          ],
+                        });
                       }}
                       block
                     >
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index fd5e773..bd2f44c 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -211,69 +211,6 @@ export default function Editor(props) {
     }
   };
 
-  const moveTable = (id, x, y) => {
-    setTables((prev) =>
-      prev.map((t) => {
-        if (t.id === id) {
-          setRelationships((prev) =>
-            prev.map((r) => {
-              if (r.startTableId === id) {
-                return {
-                  ...r,
-                  startX: x + 15,
-                  startY: y + r.startFieldId * 36 + 69,
-                };
-              } else if (r.endTableId === id) {
-                return {
-                  ...r,
-                  endX: x + 15,
-                  endY: y + r.endFieldId * 36 + 69,
-                };
-              }
-              return r;
-            })
-          );
-          return {
-            ...t,
-            x: x,
-            y: y,
-          };
-        }
-        return t;
-      })
-    );
-  };
-
-  const moveArea = (id, x, y) => {
-    setAreas((prev) =>
-      prev.map((t) => {
-        if (t.id === id) {
-          return {
-            ...t,
-            x: x,
-            y: y,
-          };
-        }
-        return t;
-      })
-    );
-  };
-
-  const moveNote = (id, x, y) => {
-    setNotes((prev) =>
-      prev.map((t) => {
-        if (t.id === id) {
-          return {
-            ...t,
-            x: x,
-            y: y,
-          };
-        }
-        return t;
-      })
-    );
-  };
-
   const deleteTable = (id, addToHistory = true) => {
     if (addToHistory) {
       setUndoStack((prev) => [
@@ -342,7 +279,21 @@ export default function Editor(props) {
     );
   };
 
-  const editNote = (id, values, addToHistory = true) => {
+  const updateArea = (id, values) => {
+    setAreas((prev) =>
+      prev.map((t) => {
+        if (t.id === id) {
+          return {
+            ...t,
+            ...values,
+          };
+        }
+        return t;
+      })
+    );
+  };
+
+  const updateNote = (id, values, addToHistory = true) => {
     setNotes((prev) =>
       prev.map((t) => {
         if (t.id === id) {
@@ -356,6 +307,40 @@ export default function Editor(props) {
     );
   };
 
+  const updateTable = (id, updatedValues, updateRelationships = false) => {
+    setTables((prev) =>
+      prev.map((table) => {
+        if (table.id === id) {
+          if (updateRelationships) {
+            setRelationships((prev) =>
+              prev.map((r) => {
+                if (r.startTableId === id) {
+                  return {
+                    ...r,
+                    startX: updatedValues.x + 15,
+                    startY: updatedValues.y + r.startFieldId * 36 + 69,
+                  };
+                } else if (r.endTableId === id) {
+                  return {
+                    ...r,
+                    endX: updatedValues.x + 15,
+                    endY: updatedValues.y + r.endFieldId * 36 + 69,
+                  };
+                }
+                return r;
+              })
+            );
+          }
+          return {
+            ...table,
+            ...updatedValues,
+          };
+        }
+        return table;
+      })
+    );
+  };
+
   useEffect(() => {
     document.title = "Editor - drawDB";
   }, []);
@@ -367,7 +352,7 @@ export default function Editor(props) {
           tables,
           setTables,
           addTable,
-          moveTable,
+          updateTable,
           updateField,
           deleteTable,
           relationships,
@@ -377,10 +362,10 @@ export default function Editor(props) {
         }}
       >
         <AreaContext.Provider
-          value={{ areas, setAreas, moveArea, addArea, deleteArea }}
+          value={{ areas, setAreas, updateArea, addArea, deleteArea }}
         >
           <NoteContext.Provider
-            value={{ notes, setNotes, moveNote, addNote, deleteNote, editNote }}
+            value={{ notes, setNotes, updateNote, addNote, deleteNote }}
           >
             <TabContext.Provider value={{ tab, setTab }}>
               <SettingsContext.Provider value={{ settings, setSettings }}>