diff --git a/package-lock.json b/package-lock.json
index 6165d1f..6b14c46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,12 @@
       "dependencies": {
         "@flatten-js/core": "^1.6.1",
         "clsx": "^2.1.1",
+        "es-toolkit": "^1.16.0",
         "file-saver": "^2.0.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "teenyicons": "^0.4.1",
+        "undo-stacker": "^0.2.1",
         "vite-plugin-svgr": "^4.2.0"
       },
       "devDependencies": {
@@ -2384,6 +2386,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.16.0.tgz",
+      "integrity": "sha512-eNJh3zF1KmAHRYd1D8rFi1cMFMCjrC6tumBfwuuZdSur97mED/ifyeBoGzxS11L4owCMx3XSmWTo6oxJQkdGng==",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4335,6 +4346,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undo-stacker": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/undo-stacker/-/undo-stacker-0.2.1.tgz",
+      "integrity": "sha512-wEFIuUlJtSB0Rt/LBxPqiZqKN2AMKqjdYIr2VTIPUPOEZxAOVE4zVY+z2b2yPBL1NvLW+Sm/kbCaqeWlINPZNA=="
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
diff --git a/package.json b/package.json
index d8a2dbb..87b5577 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
   "dependencies": {
     "@flatten-js/core": "^1.6.1",
     "clsx": "^2.1.1",
+    "es-toolkit": "^1.16.0",
     "file-saver": "^2.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "teenyicons": "^0.4.1",
+    "undo-stacker": "^0.2.1",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
diff --git a/src/App.consts.ts b/src/App.consts.ts
index 78b3beb..6c81813 100644
--- a/src/App.consts.ts
+++ b/src/App.consts.ts
@@ -60,7 +60,7 @@ export const SNAP_POINT_SIZE = 15;
  * How long you need to hover over a snap point to make it a marked snap point that will show angle guides
  * in milliseconds
  */
-export const HOVERED_SNAP_POINT_TIME = 2000;
+export const HOVERED_SNAP_POINT_TIME = 1000;
 
 /**
  * Maximum number of snap points that can be marked at the same time
diff --git a/src/App.tsx b/src/App.tsx
index f5df321..e55ad8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,146 +2,6 @@ import './App.scss';
 import { Toolbar } from './components/Toolbar.tsx';
 
 function App() {
-  // const [activeTool, setActiveTool] = useState(Tool.Line);
-  // const [entities, setEntities] = useState<Entity[]>([]);
-  // const [getActiveEntity(), setActiveEntity] = useState<Entity | null>(null);
-  // const [shouldDrawCursor, setShouldDrawCursor] = useState(true);
-  // const [debugEntities] = useState<Entity[]>([]);
-  // const [angleStep, setAngleStep] = useState(45);
-  // const [screenOffset, setScreenOffset] = useState<Point>(new Point(0, 0));
-  // const [screenScale, setScreenScale] = useState<number>(1);
-  // const [panStartLocation, setPanStartLocation] = useState<Point | null>(null);
-
-  // computed
-  // const worldMouseLocation = screenToWorld(
-  //   screenMouseLocation,
-  //   screenOffset,
-  //   screenScale,
-  // );
-
-  // /**
-  //  * Entity snap point or intersection
-  //  */
-  // const [snapPoint, setSnapPoint] = useState<SnapPoint | null>(null);
-  //
-  // /**
-  //  * Snap point on angle guide
-  //  */
-  // const [snapPointOnAngleGuide, setSnapPointOnAngleGuide] =
-  //   useState<SnapPoint | null>(null);
-  //
-  // /**
-  //  * Snap points that are hovered for a certain amount of time
-  //  */
-  // const [hoveredSnapPoints, setHoveredSnapPoints] = useState<HoverPoint[]>([]);
-
-  /**
-   * Keep track of the hovered snap points
-   */
-  // useEffect(() => {
-  //   const watchSnapPointTimerId = setInterval(() => {
-  //     trackHoveredSnapPoint(
-  //       snapPoint,
-  //       hoveredSnapPoints,
-  //       setHoveredSnapPoints,
-  //       SNAP_POINT_DISTANCE / screenScale,
-  //     );
-  //   }, 100);
-  //   return () => {
-  //     clearInterval(watchSnapPointTimerId);
-  //   };
-  // }, [hoveredSnapPoints, snapPoint]);
-
-  // /**
-  //  * Redraw the canvas when the mouse moves or the window resizes
-  //  */
-  // useEffect(() => {
-  //   const activeTool = getActiveTool();
-  //   const angleStep = getAngleStep();
-  //   const activeEntity = getActiveEntity();
-  //   const entities = getEntities();
-  //   const hoveredSnapPoints = getHoveredSnapPoints();
-  //   const worldMouseLocation = getWorldMouseLocation();
-  //   const screenScale = getScreenScale();
-  //   const screenOffset = getScreenOffset();
-  //   const shouldDrawCursor = getShouldDrawCursor();
-  //   const debugEntities = getDebugEntities();
-  //
-  //   const context: CanvasRenderingContext2D | null | undefined =
-  //     canvas?.getContext('2d');
-  //   if (!context) return;
-  //
-  //   const drawInfo: DrawInfo = {
-  //     context,
-  //     canvasSize,
-  //     worldMouseLocation: worldMouseLocation,
-  //     screenMouseLocation: screenMouseLocation,
-  //     screenOffset,
-  //     screenZoom: screenScale,
-  //   };
-  //   let helperEntitiesTemp: Entity[] = [];
-  //   let snapPointTemp: SnapPoint | null = null;
-  //   let snapPointOnAngleGuideTemp: SnapPoint | null = null;
-  //   if ([Tool.Line, Tool.Rectangle, Tool.Circle].includes(activeTool)) {
-  //     // If you're in the progress of drawing a shape, show the angle guides and closest snap point
-  //     let firstPoint: Point | null = null;
-  //     if (
-  //       activeEntity &&
-  //       !activeEntity.getShape() &&
-  //       activeEntity.getFirstPoint()
-  //     ) {
-  //       firstPoint = activeEntity.getFirstPoint();
-  //     }
-  //     const { angleGuides, entitySnapPoint, angleSnapPoint } = getDrawHelpers(
-  //       entities,
-  //       compact([
-  //         firstPoint,
-  //         ...hoveredSnapPoints.map(
-  //           hoveredSnapPoint => hoveredSnapPoint.snapPoint.point,
-  //         ),
-  //       ]),
-  //       worldMouseLocation,
-  //       angleStep,
-  //       SNAP_POINT_DISTANCE / screenScale,
-  //     );
-  //     helperEntitiesTemp = angleGuides;
-  //     snapPointTemp = entitySnapPoint;
-  //     snapPointOnAngleGuideTemp = angleSnapPoint;
-  //     // setHelperEntities(angleGuides);
-  //     // setSnapPoint(entitySnapPoint);
-  //     // setSnapPointOnAngleGuide(angleSnapPoint);
-  //   }
-  //   draw(
-  //     drawInfo,
-  //     entities,
-  //     debugEntities,
-  //     helperEntitiesTemp,
-  //     getActiveEntity(),
-  //     snapPointTemp,
-  //     snapPointOnAngleGuideTemp,
-  //     hoveredSnapPoints,
-  //     worldMouseLocation,
-  //     shouldDrawCursor,
-  //   );
-  // }, [canvasRef, canvasSize, screenMouseLocation]);
-
-  /**
-   * Show the angle guides and closest snap point when drawing a shape
-   */
-  // useEffect(() => {
-  //
-  // }, [
-  //   // getActiveEntity(),
-  //   activeTool,
-  //   angleStep,
-  //   // entities,
-  //   // hoveredSnapPoints,
-  //   // screenMouseLocation,
-  //   // screenOffset,
-  //   // screenScale,
-  //   worldMouseLocation,
-  // ]);
-
   return (
     <div>
       <Toolbar />
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index dafac6d..63d5574 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -1,34 +1,33 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { IconName } from './icon.tsx';
 import { Tool } from '../tools.ts';
 import { DropdownButton } from './DropdownButton.tsx';
 import { Button } from './Button.tsx';
 import {
-  getActiveTool,
-  getAngleStep,
   getCanvasSize,
   getEntities,
+  redo,
   setActiveEntity,
   setActiveTool,
   setAngleStep,
-  setEntities,
+  setSelectedEntityIds,
+  undo,
 } from '../state.ts';
-import { deSelectEntities } from '../helpers/select-entities.ts';
 import { convertEntitiesToSvgString } from '../helpers/export-entities-to-svg.ts';
 import { saveAs } from 'file-saver';
 
 interface ToolbarProps {}
 
 export const Toolbar: FC<ToolbarProps> = () => {
-  const activeTool = getActiveTool();
-  const angleStep = getAngleStep();
+  const [activeToolLocal, setActiveToolLocal] = useState<Tool>(Tool.Line);
+  const [angleStepLocal, setAngleStepLocal] = useState<number>(45);
 
   const handleToolClick = useCallback((tool: Tool) => {
     console.log('set active tool: ', tool);
-    const entities = getEntities();
+    setActiveToolLocal(tool);
     setActiveTool(tool);
     setActiveEntity(null);
-    setEntities(deSelectEntities(entities));
+    setSelectedEntityIds([]);
   }, []);
 
   const handleExportClick = useCallback(() => {
@@ -41,74 +40,86 @@ export const Toolbar: FC<ToolbarProps> = () => {
     saveAs(blob, 'open-web-cad--drawing.svg');
   }, []);
 
+  const handleAngleChanged = useCallback((angle: number) => {
+    setAngleStepLocal(angle);
+    setAngleStep(angle);
+  }, []);
+
   return (
     <div className="controls absolute top-0 left-0 flex flex-col gap-1 m-1">
       <Button
         title="Select"
         icon={IconName.Direction}
         onClick={() => handleToolClick(Tool.Select)}
-        active={activeTool === Tool.Select}
+        active={activeToolLocal === Tool.Select}
       />
       <Button
         title="Line"
         icon={IconName.Line}
         onClick={() => handleToolClick(Tool.Line)}
-        active={activeTool === Tool.Line}
+        active={activeToolLocal === Tool.Line}
       />
       <Button
         title="Rectangle"
         icon={IconName.Square}
         onClick={() => handleToolClick(Tool.Rectangle)}
-        active={activeTool === Tool.Rectangle}
+        active={activeToolLocal === Tool.Rectangle}
       />
       <Button
         title="Circle"
         icon={IconName.Circle}
         onClick={() => handleToolClick(Tool.Circle)}
-        active={activeTool === Tool.Circle}
+        active={activeToolLocal === Tool.Circle}
+      />
+      <Button
+        className="mt-2"
+        title="Undo"
+        icon={IconName.AntiClockwise}
+        onClick={() => undo()}
       />
+      <Button title="Redo" icon={IconName.Clockwise} onClick={() => redo()} />
       {/* TODO add delete segments logic */}
       {/*<Button*/}
       {/*  className="mt-2"*/}
       {/*  title="Delete segments"*/}
       {/*  icon={IconName.LayersDifference}*/}
       {/*  onClick={() => handleToolClick(Tool.Eraser)}*/}
-      {/*  active={activeTool === Tool.Eraser}*/}
+      {/*  active={activeToolLocal === Tool.Eraser}*/}
       {/*/>*/}
       <DropdownButton
         className="mt-2"
         title="Snap angles"
-        label={angleStep + '°'}
+        label={angleStepLocal + '°'}
       >
         <Button
           title="Add guide every 5 degrees"
           label="5°"
-          onClick={() => setAngleStep(5)}
-          active={angleStep === 5}
+          onClick={() => handleAngleChanged(5)}
+          active={angleStepLocal === 5}
         />
         <Button
           title="Add guide every 15 degrees"
           label="15°"
-          onClick={() => setAngleStep(15)}
-          active={angleStep === 15}
+          onClick={() => handleAngleChanged(15)}
+          active={angleStepLocal === 15}
         />
         <Button
           title="Add guide every 30 degrees"
           label="30°"
-          onClick={() => setAngleStep(30)}
-          active={angleStep === 30}
+          onClick={() => handleAngleChanged(30)}
+          active={angleStepLocal === 30}
         />
         <Button
           title="Add guide every 45 degrees"
           label="45°"
-          onClick={() => setAngleStep(45)}
-          active={angleStep === 45}
+          onClick={() => handleAngleChanged(45)}
+          active={angleStepLocal === 45}
         />
         <Button
           title="Add guide every 90 degrees"
           label="90°"
-          onClick={() => setAngleStep(90)}
-          active={angleStep === 90}
+          onClick={() => handleAngleChanged(90)}
+          active={angleStepLocal === 90}
         />
       </DropdownButton>
       <Button
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 247d8ae..e53a59b 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -9,6 +9,8 @@ import SolidDownIcon from 'teenyicons/solid/down.svg?react';
 import SolidUpIcon from 'teenyicons/solid/up.svg?react';
 import SolidUpSmallIcon from 'teenyicons/solid/up-small.svg?react';
 import SolidDownSmallIcon from 'teenyicons/solid/down-small.svg?react';
+import AntiClockwiseIcon from 'teenyicons/outline/anti-clockwise.svg?react';
+import ClockwiseIcon from 'teenyicons/outline/clockwise.svg?react';
 import AngleIcon from './angle.svg?react';
 import { FC } from 'react';
 
@@ -20,6 +22,8 @@ enum IconName {
   Direction = 'Direction',
   VectorDocument = 'VectorDocument',
   LayersDifference = 'LayersDifference',
+  AntiClockwise = 'AntiClockwise',
+  Clockwise = 'Clockwise',
   Svg = 'Svg',
   Angle = 'Angle',
   SolidDown = 'SolidDown',
@@ -35,6 +39,8 @@ const icons: Record<IconName, FC> = {
   [IconName.Direction]: DirectionIcon,
   [IconName.VectorDocument]: VectorDocumentIcon,
   [IconName.LayersDifference]: LayersDifferenceIcon,
+  [IconName.AntiClockwise]: AntiClockwiseIcon,
+  [IconName.Clockwise]: ClockwiseIcon,
   [IconName.Svg]: SvgIcon,
   [IconName.Angle]: AngleIcon,
   [IconName.SolidDown]: SolidDownIcon,
diff --git a/src/entities/CircleEntity.ts b/src/entities/CircleEntity.ts
index a3d491a..f2e91ea 100644
--- a/src/entities/CircleEntity.ts
+++ b/src/entities/CircleEntity.ts
@@ -4,10 +4,9 @@ import { Box, circle, Circle, point, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 export class CircleEntity implements Entity {
+  public readonly id: string = crypto.randomUUID();
   private circle: Circle | null = null;
   private centerPoint: Point | null = null;
-  public isSelected: boolean = false;
-  public isHighlighted: boolean = false;
 
   public send(newPoint: Point): boolean {
     if (!this.centerPoint) {
diff --git a/src/entities/Entitity.ts b/src/entities/Entitity.ts
index ca962a9..77235c6 100644
--- a/src/entities/Entitity.ts
+++ b/src/entities/Entitity.ts
@@ -2,8 +2,9 @@ import { DrawInfo, Shape, SnapPoint } from '../App.types.ts';
 import { Box, Point, Segment } from '@flatten-js/core';
 
 export interface Entity {
-  isHighlighted: boolean; // When the mouse is close and the tool is selection
-  isSelected: boolean; // When the user selects the component
+  // Random uuid generated when the Entity is created
+  // Used for comparing entities
+  readonly id: string;
   draw(drawInfo: DrawInfo): void;
   getBoundingBox(): Box | null;
   intersectsWithBox(box: Box): boolean;
diff --git a/src/entities/LineEntity.ts b/src/entities/LineEntity.ts
index a18923d..996ac52 100644
--- a/src/entities/LineEntity.ts
+++ b/src/entities/LineEntity.ts
@@ -4,10 +4,9 @@ import { Box, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 export class LineEntity implements Entity {
+  public readonly id: string = crypto.randomUUID();
   private segment: Segment | null = null;
   private startPoint: Point | null = null;
-  public isSelected: boolean = false;
-  public isHighlighted: boolean = false;
 
   constructor(p1?: Point | Segment, p2?: Point) {
     if (p1 instanceof Segment) {
diff --git a/src/entities/PointEntity.ts b/src/entities/PointEntity.ts
index b8753c1..d8aae69 100644
--- a/src/entities/PointEntity.ts
+++ b/src/entities/PointEntity.ts
@@ -4,9 +4,8 @@ import { Box, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 export class PointEntity implements Entity {
+  public readonly id: string = crypto.randomUUID();
   public point: Point;
-  public isSelected: boolean = false;
-  public isHighlighted: boolean = false;
 
   constructor(x: number, y: number) {
     this.point = new Point(x, y);
diff --git a/src/entities/RectangleEntity.ts b/src/entities/RectangleEntity.ts
index 5620f6d..2c237cf 100644
--- a/src/entities/RectangleEntity.ts
+++ b/src/entities/RectangleEntity.ts
@@ -4,10 +4,9 @@ import { Box, Point, Relations, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 export class RectangleEntity implements Entity {
+  public readonly id: string = crypto.randomUUID();
   private rectangle: Box | null = null;
   private startPoint: Point | null = null;
-  public isSelected: boolean = false;
-  public isHighlighted: boolean = false;
 
   public send(point: Point): boolean {
     if (!this.startPoint) {
diff --git a/src/entities/SelectionRectangleEntity.ts b/src/entities/SelectionRectangleEntity.ts
index 411b1cf..4c83ec1 100644
--- a/src/entities/SelectionRectangleEntity.ts
+++ b/src/entities/SelectionRectangleEntity.ts
@@ -10,10 +10,9 @@ import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 // TODO move the selection rectangle to its own thing, not part of the entities logic
 export class SelectionRectangleEntity implements Entity {
+  public readonly id: string = crypto.randomUUID();
   private rectangle: Box | null = null;
   private startPoint: Point | null = null;
-  public isSelected: boolean = false;
-  public isHighlighted: boolean = false;
 
   public send(point: Point): boolean {
     if (!this.startPoint) {
diff --git a/src/helpers/compact.ts b/src/helpers/compact.ts
deleted file mode 100644
index b7d79a8..0000000
--- a/src/helpers/compact.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-type NotFalsey<T> = Exclude<T, false | null | 0 | '' | undefined>;
-
-export function compact<T>(arr: readonly T[]): Array<NotFalsey<T>> {
-  const result: Array<NotFalsey<T>> = [];
-
-  for (const item of arr) {
-    if (item) {
-      result.push(item as NotFalsey<T>);
-    }
-  }
-
-  return result;
-}
diff --git a/src/helpers/draw-functions.ts b/src/helpers/draw-functions.ts
index ea57c62..8a7467c 100644
--- a/src/helpers/draw-functions.ts
+++ b/src/helpers/draw-functions.ts
@@ -9,6 +9,7 @@ import {
   SNAP_POINT_SIZE,
 } from '../App.consts.ts';
 import { worldToScreen } from './world-screen-conversion.ts';
+import { isEntityHighlighted, isEntitySelected } from '../state.ts';
 
 export function setLineStyles(
   context: CanvasRenderingContext2D,
@@ -32,7 +33,11 @@ export function setLineStyles(
 
 export function drawEntities(drawInfo: DrawInfo, entities: Entity[]) {
   entities.forEach(entity => {
-    setLineStyles(drawInfo.context, entity.isHighlighted, entity.isSelected);
+    setLineStyles(
+      drawInfo.context,
+      isEntityHighlighted(entity),
+      isEntitySelected(entity),
+    );
     entity.draw(drawInfo);
   });
 }
@@ -41,8 +46,8 @@ export function drawDebugEntities(drawInfo: DrawInfo, debugEntities: Entity[]) {
   debugEntities.forEach(debugEntity => {
     setLineStyles(
       drawInfo.context,
-      debugEntity.isHighlighted,
-      debugEntity.isSelected,
+      isEntityHighlighted(debugEntity),
+      isEntitySelected(debugEntity),
       '#FF5500',
     );
     debugEntity.draw(drawInfo);
@@ -198,8 +203,8 @@ export function drawHelpers(drawInfo: DrawInfo, helperEntities: Entity[]) {
   helperEntities.forEach(entity => {
     setLineStyles(
       drawInfo.context,
-      entity.isHighlighted,
-      entity.isSelected,
+      isEntityHighlighted(entity),
+      isEntitySelected(entity),
       ANGLE_GUIDES_COLOR,
       [1, 5],
     );
diff --git a/src/helpers/draw.ts b/src/helpers/draw.ts
index 2abacdd..7af5e65 100644
--- a/src/helpers/draw.ts
+++ b/src/helpers/draw.ts
@@ -9,11 +9,11 @@ import {
   drawSnapPoint,
 } from './draw-functions.ts';
 import { getClosestSnapPoint } from './get-closest-snap-point.ts';
-import { compact } from './compact.ts';
 import { isPointEqual } from './is-point-equal.ts';
 import { Entity } from '../entities/Entitity.ts';
 import { Point } from '@flatten-js/core';
 import { HOVERED_SNAP_POINT_TIME } from '../App.consts.ts';
+import { compact } from 'es-toolkit';
 
 export function draw(
   drawInfo: DrawInfo,
diff --git a/src/helpers/get-draw-guides.ts b/src/helpers/get-draw-guides.ts
index 98e9bef..921c103 100644
--- a/src/helpers/get-draw-guides.ts
+++ b/src/helpers/get-draw-guides.ts
@@ -7,7 +7,7 @@ import { getAngleGuideLines } from './get-angle-guide-lines.ts';
 import { findClosestEntity } from './find-closest-entity.ts';
 import { Entity } from '../entities/Entitity.ts';
 import { LineEntity } from '../entities/LineEntity.ts';
-import { compact } from './compact.ts';
+import { compact } from 'es-toolkit';
 
 /**
  * Gets the angle guides from the angle point to the mouse if the mouse is close to one of the angle steps and also returns the closest snap point
diff --git a/src/helpers/select-entities.ts b/src/helpers/select-entities.ts
deleted file mode 100644
index 7e174ef..0000000
--- a/src/helpers/select-entities.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Entity } from '../entities/Entitity.ts';
-
-export function deHighlightEntities(entitiesTemp: Entity[]): Entity[] {
-  return entitiesTemp.map(entity => {
-    entity.isHighlighted = false;
-    return entity;
-  });
-}
-
-export function deSelectEntities(entitiesTemp: Entity[]): Entity[] {
-  return entitiesTemp.map(entity => {
-    entity.isSelected = false;
-    return entity;
-  });
-}
-
-export function deSelectAndDeHighlightEntities(
-  entitiesTemp: Entity[],
-): Entity[] {
-  return entitiesTemp.map(entity => {
-    entity.isHighlighted = false;
-    entity.isSelected = false;
-    return entity;
-  });
-}
diff --git a/src/helpers/tools/select-tool.ts b/src/helpers/tools/select-tool.ts
index 867f0ea..28480d8 100644
--- a/src/helpers/tools/select-tool.ts
+++ b/src/helpers/tools/select-tool.ts
@@ -1,15 +1,17 @@
 import { Box, Point } from '@flatten-js/core';
-import { Entity } from '../../entities/Entitity.ts';
 import { SelectionRectangleEntity } from '../../entities/SelectionRectangleEntity.ts';
 import { findClosestEntity } from '../find-closest-entity.ts';
 import { HIGHLIGHT_ENTITY_DISTANCE } from '../../App.consts.ts';
-import { deHighlightEntities, deSelectEntities } from '../select-entities.ts';
 import {
   getActiveEntity,
   getEntities,
+  getSelectedEntityIds,
+  isEntitySelected,
   setActiveEntity,
-  setEntities,
+  setHighlightedEntityIds,
+  setSelectedEntityIds,
 } from '../../state.ts';
+import { compact } from 'es-toolkit';
 
 export function handleSelectToolClick(
   worldClickPoint: Point,
@@ -17,16 +19,13 @@ export function handleSelectToolClick(
   holdingShift: boolean,
 ) {
   const activeEntity = getActiveEntity();
-  const entities = getEntities();
-
-  let newEntities: Entity[] = [...entities];
 
   let activeSelectionRectangle = null;
   if (activeEntity instanceof SelectionRectangleEntity) {
     activeSelectionRectangle = activeEntity as SelectionRectangleEntity;
   }
 
-  const closestEntityInfo = findClosestEntity(worldClickPoint, newEntities);
+  const closestEntityInfo = findClosestEntity(worldClickPoint, getEntities());
 
   // Mouse is close to entity and is not dragging a rectangle
   if (
@@ -38,14 +37,23 @@ export function handleSelectToolClick(
     const closestEntity = closestEntityInfo[2];
     console.log('selecting entity close to the mouse: ', closestEntity);
     if (!holdingCtrl && !holdingShift) {
-      newEntities = deSelectEntities(newEntities);
+      setSelectedEntityIds([]);
     }
     if (holdingCtrl) {
-      closestEntity.isSelected = !closestEntity.isSelected;
+      // ctrl => toggle selection
+      if (isEntitySelected(closestEntity)) {
+        // Remove the entity from the selection
+        setSelectedEntityIds(
+          getSelectedEntityIds().filter(id => id !== closestEntity.id),
+        );
+      } else {
+        // Add the entity to the selection
+        setSelectedEntityIds([...getSelectedEntityIds(), closestEntity.id]);
+      }
     } else {
-      closestEntity.isSelected = true;
+      // shift => add to selection
+      setSelectedEntityIds([...getSelectedEntityIds(), closestEntity.id]);
     }
-    return newEntities;
   }
 
   // No elements are close to the mouse and no selection dragging is in progress
@@ -63,53 +71,56 @@ export function handleSelectToolClick(
     new Point(worldClickPoint.x, worldClickPoint.y),
   );
 
-  newEntities = deHighlightEntities(newEntities);
+  setHighlightedEntityIds([]);
   if (completed) {
     // Finish the selection
     console.log('Finish selection: ', activeSelectionRectangle);
     const intersectionSelection =
       activeSelectionRectangle.isIntersectionSelection();
-    newEntities.forEach(entity => {
-      if (intersectionSelection) {
-        if (
-          entity.intersectsWithBox(
-            activeSelectionRectangle.getBoundingBox() as Box,
-          ) ||
-          entity.isContainedInBox(
-            activeSelectionRectangle.getBoundingBox() as Box,
-          )
-        ) {
-          if (holdingCtrl) {
-            entity.isSelected = !entity.isSelected;
-          } else {
-            entity.isSelected = true;
-          }
-        } else {
-          if (!holdingCtrl && !holdingShift) {
-            entity.isSelected = false;
-          }
-        }
-      } else {
-        if (
-          entity.isContainedInBox(
-            activeSelectionRectangle.getBoundingBox() as Box,
-          )
-        ) {
-          if (holdingCtrl) {
-            entity.isSelected = !entity.isSelected;
-          } else {
-            entity.isSelected = true;
+    const newSelectedEntityIds: string[] = compact(
+      getEntities().map((entity): string | null => {
+        if (intersectionSelection) {
+          if (
+            entity.intersectsWithBox(
+              activeSelectionRectangle.getBoundingBox() as Box,
+            ) ||
+            entity.isContainedInBox(
+              activeSelectionRectangle.getBoundingBox() as Box,
+            )
+          ) {
+            if (holdingCtrl) {
+              if (isEntitySelected(entity)) {
+                return null;
+              } else {
+                return entity.id;
+              }
+            } else {
+              return entity.id;
+            }
           }
         } else {
-          if (!holdingCtrl && !holdingShift) {
-            entity.isSelected = false;
+          if (
+            entity.isContainedInBox(
+              activeSelectionRectangle.getBoundingBox() as Box,
+            )
+          ) {
+            if (holdingCtrl) {
+              if (isEntitySelected(entity)) {
+                return null;
+              } else {
+                return entity.id;
+              }
+            } else {
+              return entity.id;
+            }
           }
         }
-      }
-    });
+        return null;
+      }),
+    );
+    setSelectedEntityIds(newSelectedEntityIds);
 
     console.log('Set active entity to null');
     setActiveEntity(null);
   }
-  setEntities(newEntities);
 }
diff --git a/src/helpers/undo-stack.ts b/src/helpers/undo-stack.ts
new file mode 100644
index 0000000..2cf301d
--- /dev/null
+++ b/src/helpers/undo-stack.ts
@@ -0,0 +1,43 @@
+/**
+ * Based on https://github.com/wobsoriano/undo-stacker
+ */
+export function createStack<T>() {
+  const stack: T[] = [];
+
+  let index = stack.length;
+
+  function peek() {
+    return stack[index - 1];
+  }
+
+  return {
+    push: (value: T) => {
+      stack.length = index;
+      stack[index++] = value;
+
+      console.log('stack push', JSON.stringify(stack, null, 2));
+      return peek();
+    },
+    replace: (value: T) => {
+      stack[index - 1] = value;
+
+      console.log('stack replace', JSON.stringify(stack, null, 2));
+      return peek();
+    },
+    peek: () => {
+      return peek();
+    },
+    undo: () => {
+      if (index > 1) index -= 1;
+
+      console.log('stack undo', JSON.stringify(stack, null, 2));
+      return peek();
+    },
+    redo: () => {
+      if (index < stack.length) index += 1;
+
+      console.log('stack redo', JSON.stringify(stack, null, 2));
+      return peek();
+    },
+  };
+}
diff --git a/src/main.tsx b/src/main.tsx
index 2fb28f6..70005ca 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -13,6 +13,7 @@ import {
   getHelperEntities,
   getHoveredSnapPoints,
   getLastDrawTimestamp,
+  getNotSelectedEntities,
   getPanStartLocation,
   getScreenMouseLocation,
   getScreenOffset,
@@ -27,12 +28,14 @@ import {
   setContext,
   setEntities,
   setHelperEntities,
+  setHighlightedEntityIds,
   setHoveredSnapPoints,
   setLastDrawTimestamp,
   setPanStartLocation,
   setScreenMouseLocation,
   setScreenOffset,
   setScreenScale,
+  setSelectedEntityIds,
   setShouldDrawCursor,
   setSnapPoint,
   setSnapPointOnAngleGuide,
@@ -41,7 +44,6 @@ import { DrawInfo, MouseButton } from './App.types.ts';
 import { Tool } from './tools.ts';
 import { Point } from '@flatten-js/core';
 import { getDrawHelpers } from './helpers/get-draw-guides.ts';
-import { compact } from './helpers/compact.ts';
 import {
   HIGHLIGHT_ENTITY_DISTANCE,
   HOVERED_SNAP_POINT_TIME,
@@ -55,9 +57,9 @@ import { handleRectangleToolClick } from './helpers/tools/rectangle-tool.ts';
 import { handleCircleToolClick } from './helpers/tools/circle-tool.ts';
 import { handleSelectToolClick } from './helpers/tools/select-tool.ts';
 import { getClosestSnapPointWithinRadius } from './helpers/get-closest-snap-point.ts';
-import { deSelectAndDeHighlightEntities } from './helpers/select-entities.ts';
 import { findClosestEntity } from './helpers/find-closest-entity.ts';
 import { trackHoveredSnapPoint } from './helpers/track-hovered-snap-points.ts';
+import { compact } from 'es-toolkit';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
@@ -191,13 +193,13 @@ function handleMouseUp(evt: MouseEvent) {
 }
 
 function handleKeyUp(evt: KeyboardEvent) {
-  const entities = getEntities();
-
   if (evt.key === 'Escape') {
     setActiveEntity(null);
-    setEntities(deSelectAndDeHighlightEntities(entities));
+    setHighlightedEntityIds([]);
+    setSelectedEntityIds([]);
   } else if (evt.key === 'Delete') {
-    setEntities(entities.filter(entity => !entity.isSelected));
+    setEntities(getNotSelectedEntities());
+    setSelectedEntityIds([]);
   }
 }
 
@@ -277,19 +279,14 @@ function startDrawLoop(
    * Highlight the entity closest to the mouse when the select tool is active
    */
   if (activeTool === Tool.Select) {
-    const newEntities = [...entities];
-    newEntities.forEach(entity => {
-      entity.isHighlighted = false;
-    });
     const [distance, , closestEntity] = findClosestEntity(
       screenToWorld(screenMouseLocation, screenOffset, screenScale),
       entities,
     );
 
     if (distance < HIGHLIGHT_ENTITY_DISTANCE) {
-      closestEntity.isHighlighted = true;
+      setSelectedEntityIds([closestEntity.id]);
     }
-    setEntities(newEntities);
   }
 
   /**
diff --git a/src/state.ts b/src/state.ts
index f834f6e..a9a3e08 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -3,6 +3,8 @@ import { Point } from '@flatten-js/core';
 import { Tool } from './tools.ts';
 import { screenToWorld } from './helpers/world-screen-conversion.ts';
 import { HoverPoint, SnapPoint } from './App.types.ts';
+import { createStack } from './helpers/undo-stack.ts';
+import { isEqual } from 'es-toolkit';
 
 // state variables
 /**
@@ -35,6 +37,16 @@ let activeTool = Tool.Line;
  */
 let entities: Entity[] = [];
 
+/**
+ * Entities that are highlighted: when the mouse is close to an entity
+ */
+let highlightedEntityIds: string[] = [];
+
+/**
+ * Entities that are selected by the user by clicking on them with the select tool or by selecting them with a selection rectangle
+ */
+let selectedEntityIds: string[] = [];
+
 /**
  * Entity that is currently being drawn, but isn't complete yet
  */
@@ -104,6 +116,8 @@ export const getContext = () => context;
 export const getScreenMouseLocation = () => screenMouseLocation;
 export const getActiveTool = () => activeTool;
 export const getEntities = (): Entity[] => entities;
+export const getHighlightedEntityIds = () => highlightedEntityIds;
+export const getSelectedEntityIds = () => selectedEntityIds;
 export const getActiveEntity = () => activeEntity;
 export const getShouldDrawCursor = () => shouldDrawCursor;
 export const getHelperEntities = () => helperEntities;
@@ -121,6 +135,17 @@ export const getLastDrawTimestamp = () => lastDrawTimestamp;
 export const getWorldMouseLocation = () =>
   screenToWorld(screenMouseLocation, screenOffset, screenScale);
 
+export const getSelectedEntities = (): Entity[] => {
+  return entities.filter(e => selectedEntityIds.includes(e.id));
+};
+export const getNotSelectedEntities = (): Entity[] => {
+  return entities.filter(e => !selectedEntityIds.includes(e.id));
+};
+export const isEntitySelected = (entity: Entity) =>
+  selectedEntityIds.includes(entity.id);
+export const isEntityHighlighted = (entity: Entity) =>
+  highlightedEntityIds.includes(entity.id);
+
 // setters
 export const setCanvasSize = (newCanvasSize: Point) =>
   (canvasSize = newCanvasSize);
@@ -130,18 +155,36 @@ export const setContext = (newContext: CanvasRenderingContext2D) =>
 export const setScreenMouseLocation = (newLocation: Point) =>
   (screenMouseLocation = newLocation);
 export const setActiveTool = (newTool: Tool) => (activeTool = newTool);
-export const setEntities = (newEntities: Entity[]) => (entities = newEntities);
-export const setActiveEntity = (newEntity: Entity | null) =>
-  (activeEntity = newEntity);
+export const setEntities = (newEntities: Entity[]) => {
+  trackUndoState(StateVariable.entities, entities);
+  entities = newEntities;
+};
+export const setActiveEntity = (newEntity: Entity | null) => {
+  trackUndoState(StateVariable.activeEntity, activeEntity);
+  activeEntity = newEntity;
+};
+export const setHighlightedEntityIds = (newEntityIds: string[]) =>
+  (highlightedEntityIds = newEntityIds);
+export const setSelectedEntityIds = (newEntityIds: string[]) =>
+  (selectedEntityIds = newEntityIds);
 export const setShouldDrawCursor = (newValue: boolean) =>
   (shouldDrawCursor = newValue);
 export const setHelperEntities = (newEntities: Entity[]) =>
   (helperEntities = newEntities);
 export const setDebugEntities = (newDebugEntities: Entity[]) =>
   (debugEntities = newDebugEntities);
-export const setAngleStep = (newStep: number) => (angleStep = newStep);
-export const setScreenOffset = (newOffset: Point) => (screenOffset = newOffset);
-export const setScreenScale = (newScale: number) => (screenScale = newScale);
+export const setAngleStep = (newStep: number) => {
+  trackUndoState(StateVariable.angleStep, angleStep);
+  angleStep = newStep;
+};
+export const setScreenOffset = (newOffset: Point) => {
+  trackUndoState(StateVariable.screenOffset, screenOffset);
+  screenOffset = newOffset;
+};
+export const setScreenScale = (newScale: number) => {
+  trackUndoState(StateVariable.screenScale, screenScale);
+  screenScale = newScale;
+};
 export const setPanStartLocation = (newLocation: Point | null) =>
   (panStartLocation = newLocation);
 export const setSnapPoint = (newSnapPoint: SnapPoint | null) =>
@@ -153,3 +196,104 @@ export const setHoveredSnapPoints = (newHoveredSnapPoints: HoverPoint[]) =>
   (hoveredSnapPoints = newHoveredSnapPoints);
 export const setLastDrawTimestamp = (newTimestamp: DOMHighResTimeStamp) =>
   (lastDrawTimestamp = newTimestamp);
+
+enum StateVariable {
+  canvasSize = 'canvasSize',
+  canvas = 'canvas',
+  context = 'context',
+  screenMouseLocation = 'screenMouseLocation',
+  activeTool = 'activeTool',
+  entities = 'entities',
+  activeEntity = 'activeEntity',
+  shouldDrawCursor = 'shouldDrawCursor',
+  helperEntities = 'helperEntities',
+  debugEntities = 'debugEntities',
+  angleStep = 'angleStep',
+  screenOffset = 'screenOffset',
+  screenScale = 'screenScale',
+  panStartLocation = 'panStartLocation',
+  snapPoint = 'snapPoint',
+  snapPointOnAngleGuide = 'snapPointOnAngleGuide',
+  hoveredSnapPoints = 'hoveredSnapPoints',
+  lastDrawTimestamp = 'lastDrawTimestamp',
+}
+
+// const undoableStateVariables: StateVariable[] = [
+//   StateVariable.entities,
+//   StateVariable.activeEntity,
+//   StateVariable.angleStep,
+//   StateVariable.screenOffset,
+//   StateVariable.screenScale,
+// ];
+
+const undoableAndCompactableStateVariables: StateVariable[] = [
+  StateVariable.angleStep,
+  StateVariable.screenOffset,
+  StateVariable.screenScale,
+];
+
+interface UndoState {
+  variable: StateVariable;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+}
+
+const undoStack = createStack<UndoState>();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function trackUndoState(variable: StateVariable, oldValue: any) {
+  const lastUndoState = undoStack.peek();
+  if (isEqual(oldValue, lastUndoState?.value)) {
+    return; // Sometimes entities are updated because of highlighting, but not actually differ with the last list of entities
+  }
+
+  if (undoableAndCompactableStateVariables.includes(variable)) {
+    // See if we need to merge with the last state to avoid a million undo states for eg pan or zoom actions
+
+    if (lastUndoState?.variable === variable) {
+      // Replace the old undo state
+      undoStack.replace({ variable: variable, value: oldValue });
+      return;
+    }
+  }
+  // Push the new undo state
+  undoStack.push({ variable: variable, value: oldValue });
+}
+
+function updateStates(undoState: UndoState) {
+  const variable = undoState.variable;
+  const value = undoState.value;
+
+  // Do not use the setters for setting these states, otherwise you trigger the undo stack again
+  switch (variable) {
+    case StateVariable.entities:
+      entities = value;
+      break;
+    case StateVariable.activeEntity:
+      activeEntity = value;
+      break;
+    case StateVariable.angleStep:
+      angleStep = value;
+      break;
+    case StateVariable.screenOffset:
+      screenOffset = value;
+      break;
+    case StateVariable.screenScale:
+      screenScale = value;
+      break;
+  }
+}
+
+export function undo() {
+  const undoState = undoStack.undo();
+  if (!undoState) return;
+
+  updateStates(undoState);
+}
+
+export function redo() {
+  const redoState = undoStack.redo();
+  if (!redoState) return;
+
+  updateStates(redoState);
+}