diff --git a/src/components/area_overview.jsx b/src/components/area_overview.jsx
index 1c10b96..bd66a46 100644
--- a/src/components/area_overview.jsx
+++ b/src/components/area_overview.jsx
@@ -19,12 +19,18 @@ import {
   IconCheckboxTick,
   IconDeleteStroked,
 } from "@douyinfe/semi-icons";
-import { defaultTableTheme, tableThemes } from "../data/data";
-import { AreaContext } from "../pages/editor";
+import {
+  defaultTableTheme,
+  tableThemes,
+  Action,
+  ObjectType,
+} from "../data/data";
+import { AreaContext, UndoRedoContext } from "../pages/editor";
 
 export default function AreaOverview(props) {
   const { areas, setAreas, addArea, deleteArea } = useContext(AreaContext);
-
+  const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
+  const [editField, setEditField] = useState({});
   const [value, setValue] = useState("");
   const [filteredResult, setFilteredResult] = useState(
     areas.map((t) => {
@@ -113,8 +119,23 @@ export default function AreaOverview(props) {
                 <Input
                   value={a.name}
                   placeholder="Name"
-                  onChange={(value, e) => updateArea(a.id, { name: value })}
-                  field="name"
+                  onChange={(value) => updateArea(a.id, { name: value })}
+                  onFocus={(e) => setEditField({ name: e.target.value })}
+                  onBlur={(e) => {
+                    if (e.target.value === editField.name) return;
+                    setUndoStack((prev) => [
+                      ...prev,
+                      {
+                        action: Action.EDIT,
+                        element: ObjectType.AREA,
+                        aid: i,
+                        undo: editField,
+                        redo: { name: e.target.value },
+                      },
+                    ]);
+                    setRedoStack([]);
+                    setEditField({});
+                  }}
                 />
               </Col>
               <Col span={3}>
@@ -143,7 +164,21 @@ export default function AreaOverview(props) {
                                 key={c}
                                 style={{ backgroundColor: c }}
                                 className="p-3 rounded-full mx-1"
-                                onClick={() => updateArea(i, { color: c })}
+                                onClick={() => {
+                                  setUndoStack((prev) => [
+                                    ...prev,
+                                    {
+                                      action: Action.EDIT,
+                                      element: ObjectType.AREA,
+                                      aid: i,
+                                      undo: { color: a.color },
+                                      redo: { color: c },
+                                    },
+                                  ]);
+                                  setRedoStack([]);
+                                  setEditField({});
+                                  updateArea(i, { color: c });
+                                }}
                               >
                                 {a.color === c ? (
                                   <IconCheckboxTick
@@ -163,7 +198,21 @@ export default function AreaOverview(props) {
                                 key={c}
                                 style={{ backgroundColor: c }}
                                 className="p-3 rounded-full mx-1"
-                                onClick={() => updateArea(i, { color: c })}
+                                onClick={() => {
+                                  setUndoStack((prev) => [
+                                    ...prev,
+                                    {
+                                      action: Action.EDIT,
+                                      element: ObjectType.AREA,
+                                      aid: i,
+                                      undo: { color: a.color },
+                                      redo: { color: c },
+                                    },
+                                  ]);
+                                  setRedoStack([]);
+                                  setEditField({});
+                                  updateArea(i, { color: c });
+                                }}
                               >
                                 <IconCheckboxTick
                                   style={{
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 85c6b9b..0034a52 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -265,16 +265,15 @@ export default function Canvas(props) {
         {
           action: Action.EDIT,
           element: ObjectType.AREA,
-          data: {
-            undo: {
-              ...areas[areaResize.id],
-              x: initCoords.x,
-              y: initCoords.y,
-              width: initCoords.width,
-              height: initCoords.height,
-            },
-            redo: areas[areaResize.id],
+          aid: areaResize.id,
+          undo: {
+            ...areas[areaResize.id],
+            x: initCoords.x,
+            y: initCoords.y,
+            width: initCoords.width,
+            height: initCoords.height,
           },
+          redo: areas[areaResize.id],
         },
       ]);
       setRedoStack([]);
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 2b6fa5e..1508a7b 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -163,8 +163,8 @@ export default function ControlPanel(props) {
       if (a.element === ObjectType.AREA) {
         setAreas((prev) =>
           prev.map((n) => {
-            if (n.id === a.data.undo.id) {
-              return a.data.undo;
+            if (n.id === a.aid) {
+              return { ...n, ...a.undo };
             }
             return n;
           })
@@ -312,8 +312,8 @@ export default function ControlPanel(props) {
       if (a.element === ObjectType.AREA) {
         setAreas((prev) =>
           prev.map((n) => {
-            if (n.id === a.data.redo.id) {
-              return a.data.redo;
+            if (n.id === a.aid) {
+              return { ...n, ...a.redo };
             }
             return n;
           })