diff --git a/package-lock.json b/package-lock.json
index 2679c49..381cecb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,6 @@
         "html-to-image": "^1.11.11",
         "jsonschema": "^1.4.1",
         "jspdf": "^2.5.1",
-        "lodash": "^4.17.21",
         "node-sql-parser": "^4.7.0",
         "react": "^18.2.0",
         "react-dnd": "^16.0.1",
diff --git a/package.json b/package.json
index e222e8d..7c72169 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "html-to-image": "^1.11.11",
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
-    "lodash": "^4.17.21",
     "node-sql-parser": "^4.7.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 3735cf4..85c6b9b 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -48,10 +48,7 @@ export default function Canvas(props) {
   });
   const [panning, setPanning] = useState({ state: false, x: 0, y: 0 });
   const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
-  const [areaResize, setAreaResize] = useState({
-    id: -1,
-    dir: "none",
-  });
+  const [areaResize, setAreaResize] = useState({ id: -1, dir: "none" });
   const [initCoords, setInitCoords] = useState({
     x: 0,
     y: 0,
@@ -244,7 +241,7 @@ 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 
+    // NOTE: consider just saving the offset to sub and add in undo redo
     if (panning.state && didPan()) {
       setUndoStack((prev) => [
         ...prev,
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 738e7ec..b422630 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -113,6 +113,22 @@ export default function ControlPanel(props) {
     setNotes(data.notes);
   };
 
+  const updatedField = (tid, fid, updatedValues) => {
+    setTables((prev) =>
+      prev.map((table, i) => {
+        if (tid === i) {
+          return {
+            ...table,
+            fields: table.fields.map((field, j) =>
+              fid === j ? { ...field, ...updatedValues } : field
+            ),
+          };
+        }
+        return table;
+      })
+    );
+  };
+
   const undo = () => {
     if (undoStack.length === 0) return;
     const a = undoStack.pop();
@@ -168,10 +184,14 @@ export default function ControlPanel(props) {
             return n;
           })
         );
+      }else if(a.element===ObjectType.TABLE){
+        if(a.component==="field"){
+          console.log(a);
+          updatedField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values)
+        }
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
-      console.log(a)
       setSettings((prev) => ({
         ...prev,
         pan: a.data.undo
@@ -235,6 +255,11 @@ export default function ControlPanel(props) {
             return n;
           })
         );
+      } else if(a.element===ObjectType.TABLE){
+        if(a.component==="field"){
+          console.log(a);
+          updatedField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values)
+        }
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 98d1e3c..2ddc87d 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -1,9 +1,16 @@
-import { React, useContext, useState } from "react";
-import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
+import { React, useContext, useState, useRef } from "react";
+import {
+  Action,
+  ObjectType,
+  defaultTableTheme,
+  sqlDataTypes,
+  tableThemes,
+} from "../data/data";
 import {
   Collapse,
   Row,
   Col,
+  Input,
   Form,
   Button,
   Card,
@@ -26,12 +33,15 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { TableContext } from "../pages/editor";
+import { TableContext, UndoRedoContext } from "../pages/editor";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const [value, setValue] = useState("");
   const { tables, setTables, addTable, deleteTable } = useContext(TableContext);
+  const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
+  const [editField, setEditField] = useState({});
+  const selectRef = useRef(null);
   const [filteredResult, setFilteredResult] = useState(
     tables.map((t) => {
       return t.name;
@@ -132,10 +142,6 @@ export default function TableOverview(props) {
             <div id={`scroll_table_${t.id}`} key={t.id}>
               <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
                 {t.fields.map((f, j) => (
-                  <Form
-                    key={j}
-                    onChange={(value) => updatedField(i, j, value.values)}
-                  >
                     <Row
                       type="flex"
                       justify="start"
@@ -144,19 +150,47 @@ export default function TableOverview(props) {
                       className="hover:bg-slate-100"
                     >
                       <Col span={7}>
-                        <Form.Input
+                        <Input
                           field="name"
-                          noLabel={true}
-                          initValue={f.name}
+                          value={f.name}
                           className="m-0"
                           placeholder="Name"
+                          onChange={(value) =>
+                            updatedField(i, j, { name: value })
+                          }
+                          onFocus={(e) =>
+                            setEditField({
+                              tid: i,
+                              fid: j,
+                              values: { name: e.target.value },
+                            })
+                          }
+                          onBlur={(e) => {
+                            if (e.target.value === editField.name) return;
+                            setUndoStack((prev) => [
+                              ...prev,
+                              {
+                                action: Action.EDIT,
+                                element: ObjectType.TABLE,
+                                component: "field",
+                                data: {
+                                  undo: editField,
+                                  redo: {
+                                    tid: i,
+                                    fid: j,
+                                    values: { name: e.target.value },
+                                  },
+                                },
+                              },
+                            ]);
+                            setRedoStack([]);
+                            setEditField({});
+                          }}
                         />
                       </Col>
                       <Col span={8}>
-                        <Form.Select
+                        <Select
                           className="w-full"
-                          field="type"
-                          noLabel={true}
                           optionList={sqlDataTypes.map((value, index) => {
                             return {
                               label: value,
@@ -164,9 +198,39 @@ export default function TableOverview(props) {
                             };
                           })}
                           filter
-                          initValue={f.type}
+                          value={f.type}
+                          ref={selectRef}
                           placeholder="Type"
-                        ></Form.Select>
+                          onChange={(value) => {
+                            updatedField(i, j, { type: value });
+                            if (value === editField.type) return;
+                            setUndoStack((prev) => [
+                              ...prev,
+                              {
+                                action: Action.EDIT,
+                                element: ObjectType.TABLE,
+                                component: "field",
+                                data: {
+                                  undo: editField,
+                                  redo: {
+                                    tid: i,
+                                    fid: j,
+                                    values: { type: value },
+                                  },
+                                },
+                              },
+                            ]);
+                            setRedoStack([]);
+                            setEditField({});
+                          }}
+                          onFocus={() => {
+                            setEditField({
+                              tid: i,
+                              fid: j,
+                              values: { type: selectRef.current.props.value },
+                            });
+                          }}
+                        ></Select>
                       </Col>
                       <Col span={3}>
                         <Button
@@ -289,7 +353,7 @@ export default function TableOverview(props) {
                         </Popover>
                       </Col>
                     </Row>
-                  </Form>
+            
                 ))}
                 {t.indices.length > 0 && (
                   <Card