diff --git a/src/assets/left-curve-arrow.svg b/src/assets/left-curve-arrow.svg
new file mode 100644
index 00000000..8866736e
--- /dev/null
+++ b/src/assets/left-curve-arrow.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#a09f9f" width="24" height="24" viewBox="0 0 24 24" id="curve-arrow-left-2" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color">
+    <path id="primary" d="M12,7.09V4a1,1,0,0,0-1.63-.77L2.74,9.45a2,2,0,0,0,0,3.1l7.63,6.22A1,1,0,0,0,12,18V15.14c4.94.8,8.14,5.38,8.18,5.43A1,1,0,0,0,21,21a1,1,0,0,0,.3-.05A1,1,0,0,0,22,20C22,14.43,19.36,7.87,12,7.09Z"></path>
+</svg>
+<!-- #3a3a3a -->
\ No newline at end of file
diff --git a/src/assets/right-curve-arrow.svg b/src/assets/right-curve-arrow.svg
new file mode 100644
index 00000000..ecd0095c
--- /dev/null
+++ b/src/assets/right-curve-arrow.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="24" height="24" viewBox="0 0 24 24" id="curve-arrow-right" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color"><path id="primary" d="M21.26,9.45,13.63,3.23A1,1,0,0,0,12,4V7.09C4.64,7.87,2,14.43,2,20a1,1,0,0,0,.7,1A1,1,0,0,0,3,21a1,1,0,0,0,.82-.44S7,15.94,12,15.13V18a1,1,0,0,0,1.63.77l7.63-6.22a2,2,0,0,0,0-3.1Z" style="fill: #a09f9f;"></path></svg>
+<!-- rgb(58, 58, 58) -->
\ No newline at end of file
diff --git a/src/context.ts b/src/context.ts
index e4b6a1b0..569fc27d 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -4,6 +4,7 @@ import { ViewGraph } from "./types/graphs/viewgraph";
 import {
   loadFromLocalStorage,
   saveToLocalStorage,
+  urManager,
 } from "./types/viewportManager";
 import { Layer } from "./types/devices/device";
 import { IpAddress, IpAddressGenerator } from "./packets/ip";
@@ -40,6 +41,7 @@ export class GlobalContext {
     this.setNetwork(datagraph, layer);
     this.setupAutoSave();
     saveToLocalStorage(this);
+    urManager.reset();
   }
 
   getViewport() {
diff --git a/src/graphics/renderables/device_info.ts b/src/graphics/renderables/device_info.ts
index ecb426ad..b7a5ad5f 100644
--- a/src/graphics/renderables/device_info.ts
+++ b/src/graphics/renderables/device_info.ts
@@ -1,8 +1,11 @@
 import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
+import { CreateDevice } from "../../types/devices/utils";
 import { RoutingTableEntry } from "../../types/graphs/datagraph";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { sendPacket } from "../../types/packet";
+import { RemoveDeviceMove } from "../../types/undo-redo";
+import { urManager } from "../../types/viewportManager";
 import {
   createDropdown,
   createToggleTable,
@@ -38,7 +41,22 @@ export class DeviceInfo extends StyledInfo {
       ),
       createRightBarButton(
         "Delete device",
-        () => this.device.delete(),
+        () => {
+          const deviceData: CreateDevice = {
+            id: this.device.id,
+            type: this.device.getType(),
+            x: this.device.x,
+            y: this.device.y,
+            ip: this.device.ip.toString(),
+            mask: this.device.ipMask.toString(),
+          };
+          const move = new RemoveDeviceMove(
+            deviceData,
+            this.device.getConnections(),
+          );
+          this.device.delete();
+          urManager.push(move);
+        },
         "right-bar-delete-button",
       ),
     );
diff --git a/src/index.ejs b/src/index.ejs
index 7f229e09..3997d77e 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -16,6 +16,8 @@
       <div class="canvas-container">
         <canvas id="canvas"></canvas>
         <button id="pause-button" class="pause-button" title="Pause"></button>
+        <i id="undo-button" class="undo-button" title="Undo"></i>
+        <i id="redo-button" class="redo-button" title="Redo"></i>
         <select id="layer-select" class="dropdown-menu">
           <option value="application">App Layer</option>
           <option value="transport">Transport Layer</option>
diff --git a/src/index.ts b/src/index.ts
index a5fd549c..cffde22f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ import {
   loadFromFile,
   loadFromLocalStorage,
   saveToFile,
+  urManager,
 } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
 import { Packet } from "./types/packet";
@@ -21,6 +22,8 @@ import RouterSvg from "./assets/router.svg";
 import ComputerSvg from "./assets/pc.svg";
 import PlaySvg from "./assets/play-icon.svg";
 import PauseSvg from "./assets/pause-icon.svg";
+import UndoSvg from "./assets/left-curve-arrow.svg";
+import RedoSvg from "./assets/right-curve-arrow.svg";
 
 // IIFE to avoid errors
 (async () => {
@@ -118,6 +121,69 @@ import PauseSvg from "./assets/pause-icon.svg";
   saveButton.onclick = () => saveToFile(ctx);
   loadButton.onclick = () => loadFromFile(ctx);
 
+  // Undo button’s logic
+  const undoButton = document.getElementById(
+    "undo-button",
+  ) as HTMLButtonElement;
+
+  const undoIcon = document.createElement("img");
+  undoIcon.src = UndoSvg;
+  undoIcon.alt = "Undo Icon";
+  undoButton.appendChild(undoIcon);
+
+  console.log(undoIcon.style.filter);
+  urManager.suscribe(() => {
+    undoButton.disabled = !urManager.canUndo();
+    undoIcon.style.opacity = urManager.canUndo() ? "1" : "0.5"; // Full opacity for active, reduced for inactive
+  });
+
+  const triggerUndo = () => {
+    if (urManager.canUndo()) {
+      urManager.undo(ctx.getViewGraph());
+    }
+  };
+
+  undoButton.onclick = triggerUndo;
+
+  // Redo button’s logic
+  const redoButton = document.getElementById(
+    "redo-button",
+  ) as HTMLButtonElement;
+  const redoIcon = document.createElement("img");
+  redoIcon.src = RedoSvg;
+  redoIcon.alt = "Redo Icon";
+  redoButton.appendChild(redoIcon);
+
+  urManager.suscribe(() => {
+    redoButton.disabled = !urManager.canRedo();
+    redoIcon.style.opacity = urManager.canRedo() ? "1" : "0.5"; // Full opacity for active, reduced for inactive
+  });
+
+  const triggerRedo = () => {
+    if (urManager.canRedo()) {
+      urManager.redo(ctx.getViewGraph());
+    }
+  };
+
+  redoButton.onclick = triggerRedo;
+
+  // Add keyboard shortcuts for Undo (Ctrl+Z) and Redo (Ctrl+Y)
+  document.addEventListener("keydown", (event) => {
+    if (event.ctrlKey) {
+      switch (event.key) {
+        case "z": // Ctrl+Z for Undo
+          event.preventDefault(); // Prevent default browser action (like undo in text inputs)
+          triggerUndo();
+          break;
+        case "y": // Ctrl+Y for Redo
+          event.preventDefault(); // Prevent default browser action
+          triggerRedo();
+          break;
+      }
+    }
+  });
+
+  // Pause button’s logic
   const pauseButton = document.getElementById("pause-button");
   let paused = false;
 
diff --git a/src/styles/canvas.css b/src/styles/canvas.css
index 702ec687..7d32f661 100644
--- a/src/styles/canvas.css
+++ b/src/styles/canvas.css
@@ -76,6 +76,9 @@
   justify-content: center; /* Horizontally centers content */
   transition: background-color 0.3s ease; /* Smooth color transition */
   position: absolute; /* Permite colocarlo sobre el canvas */
+}
+
+.pause-button {
   top: 10px; /* Separación desde el borde superior */
   left: 15px; /* Separación desde el borde derecho */
 }
@@ -85,7 +88,32 @@
   background-color: #006400; /* Darker forest green on hover */
 }
 
+.undo-button,
+.redo-button {
+  cursor: pointer; /* Changes cursor to pointer on hover */
+  width: 45px; /* Fixed width for the circular button */
+  height: 45px; /* Fixed height for the circular button */
+  border-radius: 50%; /* Makes the button circular */
+  display: flex; /* Uses flexbox for centering */
+  align-items: center; /* Vertically centers content */
+  justify-content: center; /* Horizontally centers content */
+  transition: background-color 0.3s ease; /* Smooth color transition */
+  position: absolute; /* Permite colocarlo sobre el canvas */
+}
+
+.undo-button {
+  top: 10px;
+  left: 70px;
+}
+
+.redo-button {
+  top: 10px;
+  left: 110px;
+}
+
 /* Icon inside the pause button */
+.undo-button img,
+.redo-button img,
 .pause-button img {
   width: 60%; /* Scales the icon to fit the button */
   height: 60%; /* Scales the icon to fit the button */
diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts
index 9dafc435..611a0426 100644
--- a/src/types/devices/device.ts
+++ b/src/types/devices/device.ts
@@ -11,6 +11,7 @@ import {
   deselectElement,
   refreshElement,
   selectElement,
+  urManager,
 } from "./../viewportManager";
 import { RightBar } from "../../graphics/right_bar";
 import { Colors, ZIndexLevels } from "../../utils";
@@ -18,6 +19,7 @@ import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
 import { DeviceId } from "../graphs/datagraph";
+import { DragDeviceMove, EdgeData, AddEdgeMove } from "../undo-redo";
 
 export const DEVICE_SIZE = 20;
 
@@ -42,6 +44,7 @@ export abstract class Device extends Sprite {
 
   static dragTarget: Device | null = null;
   static connectionTarget: Device | null = null;
+  static startPosition: Position | null = null;
 
   ip: IpAddress;
   ipMask: IpAddress;
@@ -117,6 +120,8 @@ export abstract class Device extends Sprite {
     // Clear connections
     this.connections.clear();
     deselectElement();
+    console.log(`Device ${this.id} deleted`);
+    this.destroy();
   }
 
   onPointerDown(event: FederatedPointerEvent): void {
@@ -125,6 +130,9 @@ export abstract class Device extends Sprite {
       selectElement(this);
     }
     Device.dragTarget = this;
+
+    // Guardar posición inicial
+    Device.startPosition = { x: this.x, y: this.y };
     event.stopPropagation();
 
     // Listen to global pointermove and pointerup events
@@ -141,6 +149,15 @@ export abstract class Device extends Sprite {
       const adyacentDevice = this.viewgraph.getDevice(adyacentId);
       this.addConnection(edgeId, adyacentId);
       adyacentDevice.addConnection(edgeId, this.id);
+
+      // Register move
+      const moveData: EdgeData = {
+        edgeId,
+        connectedNodes: { n1: this.id, n2: adyacentId },
+      };
+      const move = new AddEdgeMove(moveData);
+      urManager.push(move);
+
       return true;
     }
     return false;
@@ -225,7 +242,6 @@ export abstract class Device extends Sprite {
 }
 
 function onPointerMove(event: FederatedPointerEvent): void {
-  console.log("Entered onPointerMove");
   if (Device.dragTarget) {
     Device.dragTarget.parent.toLocal(
       event.global,
@@ -239,8 +255,36 @@ function onPointerMove(event: FederatedPointerEvent): void {
 }
 
 function onPointerUp(): void {
-  console.log("Entered onPointerUp");
-  if (Device.dragTarget) {
+  if (Device.dragTarget && Device.startPosition) {
+    const endPosition: Position = {
+      x: Device.dragTarget.x,
+      y: Device.dragTarget.y,
+    };
+    console.log("Finalizing move for device:", {
+      id: Device.dragTarget.id,
+      startPosition: Device.startPosition,
+      endPosition,
+    });
+
+    if (
+      Device.startPosition.x === endPosition.x &&
+      Device.startPosition.y === endPosition.y
+    ) {
+      console.log(
+        `No movement detected for device ID ${Device.dragTarget.id}. Move not registered.`,
+      );
+    } else {
+      const move = new DragDeviceMove(
+        Device.dragTarget.id,
+        Device.startPosition,
+        endPosition,
+      );
+      urManager.push(move);
+    }
+
+    // Resetear variables estáticas
+    Device.startPosition = null;
+
     // Remove global pointermove and pointerup events
     Device.dragTarget.parent.off("pointermove", onPointerMove);
     Device.dragTarget.parent.off("pointerup", onPointerUp);
diff --git a/src/types/devices/utils.ts b/src/types/devices/utils.ts
index cd0e25dd..e7e3503b 100644
--- a/src/types/devices/utils.ts
+++ b/src/types/devices/utils.ts
@@ -17,8 +17,7 @@ export function createDevice(
   deviceInfo: CreateDevice,
   viewgraph: ViewGraph,
 ): Device {
-  const { x, y } = deviceInfo;
-  const position = { x, y };
+  const position: { x: number; y: number } = deviceInfo;
   const ip = IpAddress.parse(deviceInfo.ip);
   const mask = IpAddress.parse(deviceInfo.mask);
 
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 47e88fa9..4e63e89c 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -1,10 +1,11 @@
 import { Graphics, Point } from "pixi.js";
 import { EdgeId, ViewGraph } from "./graphs/viewgraph";
 import { Device } from "./devices/index"; // Import the Device class
-import { deselectElement, selectElement } from "./viewportManager";
+import { deselectElement, selectElement, urManager } from "./viewportManager";
 import { RightBar, StyledInfo } from "../graphics/right_bar";
 import { Colors, ZIndexLevels } from "../utils";
 import { Packet } from "./packet";
+import { RemoveEdgeMove } from "./undo-redo";
 import { DeviceId } from "./graphs/datagraph";
 
 export interface EdgeEdges {
@@ -117,7 +118,16 @@ export class Edge extends Graphics {
     // Adds the delete button using addButton
     this.rightbar.addButton(
       "Delete Edge",
-      () => this.delete(),
+      () => {
+        // obtener info
+        const move = new RemoveEdgeMove({
+          edgeId: this.id,
+          connectedNodes: this.connectedNodes,
+        });
+        this.delete();
+        urManager.push(move);
+        // registrar movimiento
+      },
       "right-bar-delete-button",
     );
   }
@@ -127,8 +137,9 @@ export class Edge extends Graphics {
     // Remove the edge from the viewgraph and datagraph
     deselectElement();
     this.viewgraph.removeEdge(this.id);
+    this.destroy();
 
-    console.log(`Edge with ID ${this.id} deleted.`);
+    console.log(`Edge ${this.id} deleted.`);
   }
 
   public updatePosition(device1: Device, device2: Device) {
@@ -152,22 +163,4 @@ export class Edge extends Graphics {
 
     this.drawEdge(newStartPos, newEndPos, Colors.Lightblue);
   }
-
-  public remove() {
-    const { n1, n2 } = this.connectedNodes;
-    const device1 = this.viewgraph.getDevice(n1);
-    const device2 = this.viewgraph.getDevice(n2);
-
-    // Remove the connection from each connected device
-    if (device1) device1.connections.delete(this.id);
-    if (device2) device2.connections.delete(this.id);
-
-    // Remove the edge from the viewport
-    this.viewgraph.getViewport().removeChild(this);
-    this.destroy();
-
-    console.log(
-      `Edge with ID ${this.id} removed between devices ${n1} and ${n2}.`,
-    );
-  }
 }
diff --git a/src/types/graphs/datagraph.ts b/src/types/graphs/datagraph.ts
index f71ac7db..ecba455a 100644
--- a/src/types/graphs/datagraph.ts
+++ b/src/types/graphs/datagraph.ts
@@ -209,6 +209,8 @@ export class DataGraph {
       const connectedDevice = this.devices.get(connectedId);
       if (connectedDevice) {
         connectedDevice.connections.delete(id);
+      } else {
+        console.warn(`Connected device ${connectedId} does not exist`);
       }
     });
 
diff --git a/src/types/graphs/viewgraph.ts b/src/types/graphs/viewgraph.ts
index 1e8a1771..79ee738c 100644
--- a/src/types/graphs/viewgraph.ts
+++ b/src/types/graphs/viewgraph.ts
@@ -3,7 +3,12 @@ import { Edge } from "./../edge";
 import { DataGraph, DeviceId, GraphNode, isRouter } from "./datagraph";
 import { Viewport } from "../../graphics/viewport";
 import { Layer } from "../devices/device";
-import { createDevice, layerFromType, layerIncluded } from "../devices/utils";
+import {
+  CreateDevice,
+  createDevice,
+  layerFromType,
+  layerIncluded,
+} from "../devices/utils";
 
 export type EdgeId = number;
 
@@ -41,11 +46,7 @@ export class ViewGraph {
     this.datagraph.getDevices().forEach((graphNode, deviceId) => {
       if (layerIncluded(layerFromType(graphNode.type), this.layer)) {
         const deviceInfo = { ...graphNode, id: deviceId };
-        const device: Device = createDevice(deviceInfo, this);
-
-        this.viewport.addChild(device);
-
-        this.addDevice(device);
+        this.addDevice(deviceInfo);
 
         this.layer_dfs(
           this.datagraph.getDevices(),
@@ -69,30 +70,48 @@ export class ViewGraph {
   }
 
   // Add a device to the graph
-  addDevice(device: Device) {
-    if (!this.devices.has(device.id)) {
+  addDevice(deviceData: CreateDevice): Device {
+    if (!this.devices.has(deviceData.id)) {
+      const device = createDevice(deviceData, this);
       this.devices.set(device.id, device);
+      this.viewport.addChild(device);
       console.log(`Device added with ID ${device.id}`);
     } else {
-      console.warn(`Device with ID ${device.id} already exists in the graph.`);
+      console.warn(
+        `Device with ID ${deviceData.id} already exists in the graph.`,
+      );
     }
+    return this.devices.get(deviceData.id);
   }
 
-  drawEdge(device1: Device, device2: Device): Edge {
+  drawEdge(device1: Device, device2: Device, edgeId?: EdgeId): Edge {
+    // Usa el ID proporcionado o genera uno nuevo si no se especifica
+    const id = edgeId ?? this.idCounter++;
+
+    if (this.edges.has(id)) {
+      console.warn(`Edge with ID ${id} already exists.`);
+      return this.edges.get(id);
+    }
+
     const edge = new Edge(
-      this.idCounter++,
+      id,
       { n1: device1.id, n2: device2.id },
       device1,
       device2,
       this,
     );
-    this.edges.set(edge.id, edge);
+
+    this.edges.set(id, edge);
     this.viewport.addChild(edge);
+
     return edge;
   }
 
-  // Add a connection between two devices
-  addEdge(device1Id: DeviceId, device2Id: DeviceId): EdgeId | null {
+  addEdge(
+    device1Id: DeviceId,
+    device2Id: DeviceId,
+    edgeId?: EdgeId,
+  ): EdgeId | null {
     if (device1Id === device2Id) {
       console.warn(
         `Cannot create a connection between the same device (ID ${device1Id}).`,
@@ -102,38 +121,44 @@ export class ViewGraph {
 
     if (!this.devices.has(device1Id)) {
       console.warn(`Device with ID ${device1Id} does not exist in devices.`);
-    } else if (!this.devices.has(device2Id)) {
+      return null;
+    }
+
+    if (!this.devices.has(device2Id)) {
       console.warn(`Device with ID ${device2Id} does not exist in devices.`);
-    } else {
-      // Check if an edge already exists between these two devices
-      for (const edge of this.edges.values()) {
-        const { n1, n2 } = edge.connectedNodes;
-        if (
-          (n1 === device1Id && n2 === device2Id) ||
-          (n1 === device2Id && n2 === device1Id)
-        ) {
-          console.warn(
-            `Connection between ID ${device1Id} and ID ${device2Id} already exists.`,
-          );
-          return null;
-        }
+      return null;
+    }
+
+    // Check if an edge already exists between these two devices
+    for (const edge of this.edges.values()) {
+      const { n1, n2 } = edge.connectedNodes;
+      if (
+        (n1 === device1Id && n2 === device2Id) ||
+        (n1 === device2Id && n2 === device1Id)
+      ) {
+        console.warn(
+          `Connection between ID ${device1Id} and ID ${device2Id} already exists.`,
+        );
+        return null;
       }
+    }
 
-      const device1 = this.devices.get(device1Id);
-      const device2 = this.devices.get(device2Id);
+    const device1 = this.devices.get(device1Id);
+    const device2 = this.devices.get(device2Id);
 
-      if (device1 && device2) {
-        const edge = this.drawEdge(device1, device2);
+    if (device1 && device2) {
+      // Use the provided edgeId if available, otherwise auto-generate one
+      const edge = this.drawEdge(device1, device2, edgeId);
 
-        this.datagraph.addEdge(device1Id, device2Id);
+      this.datagraph.addEdge(device1Id, device2Id);
 
-        console.log(
-          `Connection created between devices ID: ${device1Id} and ID: ${device2Id}`,
-        );
+      console.log(
+        `Connection created between devices ID: ${device1Id} and ID: ${device2Id} with Edge ID: ${edge.id}`,
+      );
 
-        return edge.id;
-      }
+      return edge.id;
     }
+
     return null;
   }
 
@@ -162,6 +187,8 @@ export class ViewGraph {
 
       if (startDevice && endDevice) {
         edge.updatePosition(startDevice, endDevice);
+      } else {
+        console.warn("At least one device in connection does not exist");
       }
     });
     this.datagraph.updateDevicePosition(deviceId, { x: device.x, y: device.y });
@@ -206,24 +233,23 @@ export class ViewGraph {
       return;
     }
 
+    // Remove connection from adyacent’s devices
     device.getConnections().forEach((connection) => {
-      const adyacentDevice = this.devices.get(connection.adyacentId);
       const edge = this.edges.get(connection.edgeId);
       if (edge) {
-        if (adyacentDevice) {
-          adyacentDevice.removeConnection(edge.id);
-        }
         edge.delete();
+      } else {
+        console.warn(`Edge ${connection.edgeId} does not exist`);
       }
     });
 
     // Remove the device from the viewport and destroy it
     this.viewport.removeChild(device);
-    device.destroy();
 
     // Finally, remove the device from the graph
     this.datagraph.removeDevice(id);
     this.devices.delete(id);
+
     console.log(`Device with ID ${id} and all its connections were removed.`);
   }
 
@@ -236,12 +262,26 @@ export class ViewGraph {
       return;
     }
 
+    // Remove connection in DataGraph
     this.datagraph.removeConnection(
       edge.connectedNodes.n1,
       edge.connectedNodes.n2,
     );
-    // Call Edge's remove method to handle disconnection and cleanup
-    edge.remove();
+
+    // Remove connection from each connected device
+    const { n1, n2 } = edge.connectedNodes;
+    const device1 = this.devices.get(n1);
+    const device2 = this.devices.get(n2);
+
+    if (!(device1 && device2)) {
+      console.warn("At least one device in connection does not exist");
+      return;
+    }
+    device1.removeConnection(edgeId);
+    device2.removeConnection(edgeId);
+
+    // Remove the edge from the viewport
+    this.getViewport().removeChild(edge);
 
     // Remove the edge from the edges map in ViewGraph
     this.edges.delete(edgeId);
@@ -266,6 +306,12 @@ export class ViewGraph {
     return this.edges.get(edgeId);
   }
 
+  // Para que las usen los moves de undo/redo
+  // (la otra es tener dos funciones para agregar un dispositivo, una que avise al datagraph y otra que no)
+  getDataGraph(): DataGraph {
+    return this.datagraph;
+  }
+
   /// Returns the IDs of the edges connecting the two devices
   getPathBetween(idA: DeviceId, idB: DeviceId): number[] {
     if (idA === idB) {
@@ -274,6 +320,7 @@ export class ViewGraph {
     const a = this.devices.get(idA);
     const b = this.devices.get(idB);
     if (!a || !b) {
+      console.warn(`At least one device does not exist`);
       return [];
     }
     let current = a;
@@ -315,6 +362,7 @@ export class ViewGraph {
         const adyacent = this.datagraph.getDevice(w);
         // mark node as visited
         visited.add(w);
+
         if (layerIncluded(layerFromType(adyacent.type), this.layer)) {
           // add connection between v and w
           const connectionKey: string = generateConnectionKey(w, s);
diff --git a/src/types/undo-redo/index.ts b/src/types/undo-redo/index.ts
new file mode 100644
index 00000000..1d978e99
--- /dev/null
+++ b/src/types/undo-redo/index.ts
@@ -0,0 +1,7 @@
+// src/devices/index.ts
+
+export { UndoRedoManager } from "./undoRedoManager";
+export { Move } from "./moves/move";
+export { AddDeviceMove, RemoveDeviceMove } from "./moves/addRemoveDevice";
+export { DragDeviceMove } from "./moves/dragDevice";
+export { AddEdgeMove, RemoveEdgeMove, EdgeData } from "./moves/addRemoveEdge";
diff --git a/src/types/undo-redo/moves/addRemoveDevice.ts b/src/types/undo-redo/moves/addRemoveDevice.ts
new file mode 100644
index 00000000..3e166e2e
--- /dev/null
+++ b/src/types/undo-redo/moves/addRemoveDevice.ts
@@ -0,0 +1,95 @@
+import { DeviceType } from "../../devices/device";
+import { CreateDevice } from "../../devices/utils";
+import { DeviceId, GraphNode } from "../../graphs/datagraph";
+import { EdgeId, ViewGraph } from "../../graphs/viewgraph";
+import { Move, TypeMove } from "./move";
+
+// Superclass for AddDeviceMove and RemoveDeviceMove
+export abstract class AddRemoveDeviceMove implements Move {
+  type: TypeMove;
+  data: CreateDevice;
+  abstract undo(viewgraph: ViewGraph): void;
+  abstract redo(viewgraph: ViewGraph): void;
+
+  constructor(data: CreateDevice) {
+    this.data = data;
+  }
+
+  addDevice(viewgraph: ViewGraph) {
+    const datagraph = viewgraph.getDataGraph();
+
+    const deviceInfo = {
+      type: this.data.type,
+      x: this.data.x,
+      y: this.data.y,
+      ip: this.data.ip,
+      mask: this.data.mask,
+      connections: new Set<DeviceId>(),
+      ...(this.data.type === DeviceType.Router && { routingTable: [] }), // Add routingTable if it is a router
+    };
+
+    // Add the device to the datagraph and the viewgraph
+    datagraph.addDevice(this.data.id, deviceInfo as GraphNode);
+    viewgraph.addDevice(this.data);
+  }
+
+  removeDevice(viewgraph: ViewGraph) {
+    const device = viewgraph.getDevice(this.data.id);
+    if (!device) {
+      throw new Error(`Device with ID ${this.data.id} not found.`);
+    }
+    device.delete();
+  }
+}
+
+// "Move" is here because it conflicts with AddDevice from viewportManager
+export class AddDeviceMove extends AddRemoveDeviceMove {
+  type = TypeMove.AddDevice;
+  data: CreateDevice;
+
+  undo(viewgraph: ViewGraph): void {
+    this.removeDevice(viewgraph);
+  }
+
+  redo(viewgraph: ViewGraph): void {
+    this.addDevice(viewgraph);
+  }
+}
+
+// Check if the viewgraph is the best place to load the move into the manager
+export class RemoveDeviceMove extends AddRemoveDeviceMove {
+  type: TypeMove = TypeMove.RemoveDevice;
+  data: CreateDevice; // Data of the removed device
+  connections: { edgeId: number; adyacentId: DeviceId }[];
+
+  constructor(
+    data: CreateDevice,
+    connections: { edgeId: EdgeId; adyacentId: DeviceId }[],
+  ) {
+    super(data);
+    this.connections = connections;
+  }
+
+  undo(viewgraph: ViewGraph): void {
+    this.addDevice(viewgraph);
+    const device = viewgraph.getDevice(this.data.id);
+
+    this.connections.forEach(({ edgeId, adyacentId }) => {
+      const adyacentDevice = viewgraph.getDevice(adyacentId);
+
+      if (adyacentDevice) {
+        viewgraph.addEdge(this.data.id, adyacentId, edgeId);
+        device.addConnection(edgeId, adyacentId);
+        adyacentDevice.addConnection(edgeId, this.data.id);
+      } else {
+        console.warn(
+          `Adjacent Device ${adyacentId} not found while reconnecting Device ${device.id}`,
+        );
+      }
+    });
+  }
+
+  redo(viewgraph: ViewGraph): void {
+    this.removeDevice(viewgraph);
+  }
+}
diff --git a/src/types/undo-redo/moves/addRemoveEdge.ts b/src/types/undo-redo/moves/addRemoveEdge.ts
new file mode 100644
index 00000000..a13d8b78
--- /dev/null
+++ b/src/types/undo-redo/moves/addRemoveEdge.ts
@@ -0,0 +1,62 @@
+import { DeviceId } from "../../graphs/datagraph";
+import { EdgeId, ViewGraph } from "../../graphs/viewgraph";
+import { Move, TypeMove } from "./move";
+
+export interface EdgeData {
+  edgeId: EdgeId;
+  connectedNodes: { n1: DeviceId; n2: DeviceId };
+}
+
+export abstract class AddRemoveEdgeMove implements Move {
+  type: TypeMove;
+  data: EdgeData;
+  abstract undo(viewgraph: ViewGraph): void;
+  abstract redo(viewgraph: ViewGraph): void;
+
+  constructor(data: EdgeData) {
+    this.data = data;
+  }
+
+  addEdge(viewgraph: ViewGraph) {
+    const { n1, n2 } = this.data.connectedNodes;
+    const device1 = viewgraph.getDevice(n1);
+    const device2 = viewgraph.getDevice(n2);
+    if (!device1 || !device2) {
+      console.warn("Edge’s devices does not exist");
+      return;
+    }
+    viewgraph.addEdge(n1, n2, this.data.edgeId);
+    device1.addConnection(this.data.edgeId, n2);
+    device2.addConnection(this.data.edgeId, n1);
+  }
+
+  removeEdge(viewgraph: ViewGraph) {
+    viewgraph.removeEdge(this.data.edgeId);
+  }
+}
+
+export class AddEdgeMove extends AddRemoveEdgeMove {
+  type: TypeMove = TypeMove.AddEdge;
+  data: EdgeData;
+
+  undo(viewgraph: ViewGraph): void {
+    this.removeEdge(viewgraph);
+  }
+
+  redo(viewgraph: ViewGraph): void {
+    this.addEdge(viewgraph);
+  }
+}
+
+export class RemoveEdgeMove extends AddRemoveEdgeMove {
+  type: TypeMove = TypeMove.RemoveEdge;
+  data: EdgeData;
+
+  undo(viewgraph: ViewGraph): void {
+    this.addEdge(viewgraph);
+  }
+
+  redo(viewgraph: ViewGraph): void {
+    this.removeEdge(viewgraph);
+  }
+}
diff --git a/src/types/undo-redo/moves/dragDevice.ts b/src/types/undo-redo/moves/dragDevice.ts
new file mode 100644
index 00000000..5a7b675e
--- /dev/null
+++ b/src/types/undo-redo/moves/dragDevice.ts
@@ -0,0 +1,39 @@
+import { Position } from "../../common";
+import { DeviceId } from "../../graphs/datagraph";
+import { ViewGraph } from "../../graphs/viewgraph";
+import { Move, TypeMove } from "./move";
+
+export class DragDeviceMove implements Move {
+  type: TypeMove = TypeMove.DragDevice;
+  did: DeviceId;
+  startPosition: Position;
+  endPosition: Position;
+
+  constructor(did: DeviceId, startPosition: Position, endPosition: Position) {
+    this.did = did;
+    this.startPosition = startPosition;
+    this.endPosition = endPosition;
+  }
+
+  undo(viewgraph: ViewGraph): void {
+    const device = viewgraph.getDevice(this.did);
+    if (!device) {
+      throw new Error(`Device with ID ${this.did} not found.`);
+    }
+
+    device.x = this.startPosition.x;
+    device.y = this.startPosition.y;
+    viewgraph.deviceMoved(this.did);
+  }
+
+  redo(viewgraph: ViewGraph): void {
+    const device = viewgraph.getDevice(this.did);
+    if (!device) {
+      throw new Error(`Device with ID ${this.did} not found.`);
+    }
+
+    device.x = this.endPosition.x;
+    device.y = this.endPosition.y;
+    viewgraph.deviceMoved(this.did);
+  }
+}
diff --git a/src/types/undo-redo/moves/move.ts b/src/types/undo-redo/moves/move.ts
new file mode 100644
index 00000000..e74acbc3
--- /dev/null
+++ b/src/types/undo-redo/moves/move.ts
@@ -0,0 +1,15 @@
+import { ViewGraph } from "../../graphs/viewgraph";
+
+export enum TypeMove {
+  AddDevice,
+  RemoveDevice,
+  AddEdge,
+  RemoveEdge,
+  DragDevice,
+}
+
+export interface Move {
+  type: TypeMove;
+  undo(viewgraph: ViewGraph): void;
+  redo(viewgraph: ViewGraph): void;
+}
diff --git a/src/types/undo-redo/undoRedoManager.ts b/src/types/undo-redo/undoRedoManager.ts
new file mode 100644
index 00000000..bc095969
--- /dev/null
+++ b/src/types/undo-redo/undoRedoManager.ts
@@ -0,0 +1,66 @@
+import { ViewGraph } from "../graphs/viewgraph";
+import { Move } from "./moves/move";
+
+export class UndoRedoManager {
+  undoBuf: Move[] = [];
+  redoBuf: Move[] = [];
+  listeners: (() => void)[] = [];
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  push(move: Move) {
+    if (this.redoBuf.length != 0) {
+      this.redoBuf = [];
+    }
+    this.undoBuf.push(move);
+    this.notifyListeners();
+  }
+
+  undo(viewgraph: ViewGraph) {
+    if (this.undoBuf.length != 0) {
+      const move = this.undoBuf.pop();
+      // revertir el movimiento con move
+      move.undo(viewgraph);
+      this.redoBuf.push(move); // tal vez hay que guardar otra cosa
+    }
+    this.notifyListeners();
+    console.log(this.redoBuf);
+    console.log(this.undoBuf);
+  }
+
+  redo(viewgraph: ViewGraph) {
+    if (this.redoBuf.length != 0) {
+      const move = this.redoBuf.pop();
+      // rehacer el movimineto con move
+      move.redo(viewgraph);
+      this.undoBuf.push(move); // tal vez hay que guardar otra cosa
+    }
+    this.notifyListeners();
+    console.log(this.redoBuf);
+    console.log(this.undoBuf);
+  }
+
+  canUndo(): boolean {
+    return this.undoBuf.length != 0;
+  }
+
+  canRedo(): boolean {
+    return this.redoBuf.length != 0;
+  }
+
+  suscribe(listener: () => void) {
+    this.listeners.push(listener);
+  }
+
+  /**
+   * Resets the UndoRedoManager by clearing both undo and redo buffers.
+   */
+  reset() {
+    this.undoBuf = [];
+    this.redoBuf = [];
+    this.notifyListeners();
+    console.log("UndoRedoManager has been reset.");
+  }
+}
diff --git a/src/types/viewportManager.ts b/src/types/viewportManager.ts
index 740bd03b..e54dd99d 100644
--- a/src/types/viewportManager.ts
+++ b/src/types/viewportManager.ts
@@ -5,12 +5,21 @@ import { Edge } from "./edge";
 import { RightBar } from "../graphics/right_bar";
 import { Packet } from "./packet";
 import { DeviceType } from "./devices/device";
-import { createDevice, layerFromName } from "./devices/utils";
+import { CreateDevice } from "./devices/utils";
+import {
+  UndoRedoManager,
+  AddDeviceMove,
+  RemoveDeviceMove,
+  RemoveEdgeMove,
+} from "./undo-redo";
+import { layerFromName } from "./devices/utils";
 
 type Selectable = Device | Edge | Packet;
 
 let selectedElement: Selectable | null = null; // Global variable to store the selected element
 
+export const urManager = new UndoRedoManager();
+
 export function selectElement(element: Selectable) {
   deselectElement();
 
@@ -43,10 +52,44 @@ export function isSelected(element: Selectable) {
   return element === selectedElement;
 }
 
+function isDevice(selectable: Selectable): selectable is Device {
+  return selectable instanceof Device;
+}
+
+function isEdge(selectable: Selectable): selectable is Edge {
+  return selectable instanceof Edge;
+}
+
 document.addEventListener("keydown", (event) => {
   if (event.key === "Delete" || event.key === "Backspace") {
     if (selectedElement) {
-      selectedElement.delete();
+      let data;
+      if (isDevice(selectedElement)) {
+        data = {
+          id: selectedElement.id,
+          type: selectedElement.getType(),
+          x: selectedElement.x,
+          y: selectedElement.y,
+          ip: selectedElement.ip.toString(),
+          mask: selectedElement.ipMask.toString(),
+        };
+        const move = new RemoveDeviceMove(
+          data,
+          selectedElement.getConnections(),
+        );
+        selectedElement.delete();
+        urManager.push(move);
+      } else if (isEdge(selectedElement)) {
+        const move = new RemoveEdgeMove({
+          edgeId: selectedElement.id,
+          connectedNodes: selectedElement.connectedNodes,
+        });
+        selectedElement.delete();
+        urManager.push(move);
+      } else {
+        // se cambia esto
+        selectedElement.delete();
+      }
     }
   }
 
@@ -78,13 +121,15 @@ export function AddDevice(ctx: GlobalContext, type: DeviceType) {
 
   const { ip, mask } = ctx.getNextIp();
   const deviceInfo = { x, y, type, ip, mask };
-
   const id = datagraph.addNewDevice(deviceInfo);
-  const newDevice: Device = createDevice({ ...deviceInfo, id }, viewgraph);
+
+  const deviceData: CreateDevice = { id, ...deviceInfo };
 
   // Add the Device to the graph
-  viewgraph.addDevice(newDevice);
-  viewport.addChild(newDevice);
+  const newDevice = viewgraph.addDevice(deviceData);
+
+  const move = new AddDeviceMove(deviceData);
+  urManager.push(move);
 
   console.log(
     `${DeviceType[newDevice.getType()]} added with ID ${newDevice.id} at the center of the screen.`,