diff --git a/src/types/packet.ts b/src/types/packet.ts
index bbf27224..484b27aa 100644
--- a/src/types/packet.ts
+++ b/src/types/packet.ts
@@ -1,11 +1,23 @@
-import { FederatedPointerEvent, Graphics, Ticker } from "pixi.js";
+import {
+  FederatedPointerEvent,
+  Graphics,
+  GraphicsContext,
+  Ticker,
+} from "pixi.js";
 import { Edge, Position } from "./edge";
 import { selectElement } from "./viewportManager";
-import { Colors, drawCircle } from "../utils";
+import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils";
 import { RightBar } from "../index";
 
 export const packetTicker = new Ticker();
 
+const contextPerPacketType: Record<string, GraphicsContext> = {
+  IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
+  ICMP: circleGraphicsContext(Colors.Red, 0, 0, 5),
+};
+
+const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6);
+
 export class Packet extends Graphics {
   speed: number;
   progress = 0;
@@ -27,14 +39,9 @@ export class Packet extends Graphics {
 
     this.type = type;
 
-    const packetColors: Record<string, number> = {
-      IP: Colors.Green, // Verde para paquetes IP
-      ICMP: Colors.Red, // Rojo para paquetes ICMP
-    };
-
-    this.color = packetColors[this.type] || Colors.White; // Color por defecto blanco
+    this.context = contextPerPacketType[this.type];
+    this.zIndex = ZIndexLevels.Packet;
 
-    drawCircle(this, this.color, 0, 0, 5);
     this.speed = speed;
     this.sourceId = sourceid;
     this.destinationId = destinationid;
@@ -70,11 +77,11 @@ export class Packet extends Graphics {
   }
 
   highlight() {
-    drawCircle(this, Colors.Violet, 0, 0, 5);
+    this.context = highlightedPacketContext;
   }
 
   removeHighlight() {
-    drawCircle(this, this.color, 0, 0, 5);
+    this.context = contextPerPacketType[this.type];
   }
 
   animateAlongPath(path: Edge[], start: number): void {
diff --git a/src/utils.ts b/src/utils.ts
index c2fd2510..b6df45ed 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-import { Graphics } from "pixi.js";
+import { GraphicsContext } from "pixi.js";
 
 export enum Colors {
   Violet = 0x4b0082,
@@ -10,18 +10,16 @@ export enum Colors {
   Black = 0x000000,
 }
 
-export function drawCircle(
-  graphics: Graphics,
+export function circleGraphicsContext(
   color: number,
   x: number,
   y: number,
   radius: number,
-) {
-  graphics.clear();
-  graphics.beginFill(color);
-  graphics.drawCircle(x, y, radius);
-  graphics.endFill();
-  graphics.zIndex = ZIndexLevels.Packet;
+): GraphicsContext {
+  const graphicsCtx = new GraphicsContext();
+  graphicsCtx.circle(x, y, radius);
+  graphicsCtx.fill(color);
+  return graphicsCtx;
 }
 
 export enum ZIndexLevels {