diff --git a/steps/src/drawUtils.js b/steps/src/drawUtils.js
index 4e601f7..6a7ec03 100644
--- a/steps/src/drawUtils.js
+++ b/steps/src/drawUtils.js
@@ -231,10 +231,10 @@ export function drawAxes(p, plotScales) {
 }
 
 
-export function drawPointCloud(p, points, plotScales) {
+export function drawPointCloud(p, points, plotScales, pointSize = 4) {
   try {
     // Set stroke weight for points.
-    p.strokeWeight(4);
+    p.strokeWeight(pointSize);
     // Get state of various toggles from the DOM.
     const useSnr = toggleSnrColor.checked;
     const useCluster = toggleClusterColor.checked;
@@ -325,7 +325,7 @@ export function drawPointCloud(p, points, plotScales) {
   }
 }
 
-export function drawTrajectories(p, plotScales) {
+export function drawTrajectories(p, plotScales, scaleFactor = 1) {
   try {
     const localTtcColors = ttcColors(p);
 
@@ -372,7 +372,7 @@ export function drawTrajectories(p, plotScales) {
       if (isCurrentlyStationary) {
         // Stationary tracks are always green and dashed
         p.stroke(34, 139, 34, 220);
-        p.strokeWeight(1);
+        p.strokeWeight(1 * scaleFactor);
         p.drawingContext.setLineDash([3, 3]);
         for (let i = 1; i < trajPts.length; i++) {
           // ... (draw fading stationary trajectory logic)
@@ -448,7 +448,7 @@ export function drawTrajectories(p, plotScales) {
           }
         }
 
-        p.strokeWeight(1.5);
+        p.strokeWeight(1.5 * scaleFactor);
         p.drawingContext.setLineDash([]);
 
         // Fading trajectory logic (works for both modes)
@@ -476,7 +476,7 @@ export function drawTrajectories(p, plotScales) {
   }
 }
 
-export function drawTrackMarkers(p, plotScales) {
+export function drawTrackMarkers(p, plotScales, scaleFactor = 1) {
   try {
     const showDetails = toggleVelocity.checked;
     const useStationary = toggleStationaryColor.checked;
@@ -492,7 +492,7 @@ export function drawTrackMarkers(p, plotScales) {
     const textLabels = [];
 
     p.push();
-    p.strokeWeight(2);
+    p.strokeWeight(2 * scaleFactor);
 
     for (const track of appState.vizData.tracks) {
       if (toggleConfirmedOnly.checked && track.isConfirmed === false) continue;
@@ -506,7 +506,7 @@ export function drawTrackMarkers(p, plotScales) {
       if (log) {
         const pos = log.correctedPosition;
         if (pos && pos.length === 2 && pos[0] !== null && pos[1] !== null) {
-          const size = 5;
+          const size = 5 * scaleFactor;
           const x = pos[0] * plotScales.plotScaleX;
           const y = pos[1] * plotScales.plotScaleY;
           
@@ -582,13 +582,13 @@ export function drawTrackMarkers(p, plotScales) {
         p.push();
         p.fill(textColor);
         p.noStroke();
-        p.textSize(12);
+        p.textSize(12 * scaleFactor);
         // Set alignment once
         // Note: we handle the flip manually
         
         for (const label of textLabels) {
             p.push();
-            p.translate(label.x + 10, label.y);
+            p.translate(label.x + 10 * scaleFactor, label.y);
             p.scale(1, -1); // Flip text back up
             p.text(label.text, 0, 0);
             p.pop();
@@ -1040,7 +1040,7 @@ export function drawRegionsOfInterest(p, frameData, plotScales) {
   }
 }
 
-export function drawClusterCentroids(p, clustersInput, plotScales) {
+export function drawClusterCentroids(p, clustersInput, plotScales, scaleFactor = 1) {
   try {
     if (!clustersInput) {
       return; // Do nothing if there's no cluster data
@@ -1076,9 +1076,9 @@ export function drawClusterCentroids(p, clustersInput, plotScales) {
 
         p.push();
         p.stroke(color);
-        p.strokeWeight(1.5);
+        p.strokeWeight(1.5 * scaleFactor);
 
-        const armLength = 5;
+        const armLength = 5 * scaleFactor;
 
         p.line(x, y - armLength, x, y + armLength);
         p.line(x - armLength, y, x + armLength, y);
diff --git a/steps/src/p5/zoomSketch.js b/steps/src/p5/zoomSketch.js
index 5d115ac..7e4d574 100644
--- a/steps/src/p5/zoomSketch.js
+++ b/steps/src/p5/zoomSketch.js
@@ -263,20 +263,21 @@ export const zoomSketch = function (p) {
     p.scale(1, -1);
 
     const frameData = appState.vizData.radarFrames[appState.currentFrame];
+    const inverseZoom = 1 / appState.zoomFactor * 2;
     
     // --- OPTIMIZATION: Axes and Ego Vehicle are already in the static background image ---
     // drawAxes(p, plotScales);
     // drawEgoVehicle(p, plotScales);
     
     if (frameData) {
-      drawTrackMarkers(p, plotScales);
+      drawTrackMarkers(p, plotScales, inverseZoom);
       drawRegionsOfInterest(p, frameData, plotScales);
       if (toggleTracks.checked) {
-        drawTrajectories(p, plotScales);
+        drawTrajectories(p, plotScales, inverseZoom);
       }
-      drawPointCloud(p, frameData.pointCloud, plotScales);
+      drawPointCloud(p, frameData.pointCloud, plotScales, 4 * inverseZoom);
       if (toggleClusterColor.checked) {
-        drawClusterCentroids(p, frameData.clusters, plotScales);
+        drawClusterCentroids(p, frameData.clusters, plotScales, inverseZoom);
       }
       if (togglePredictedPos.checked) {
         for (const track of appState.vizData.tracks) {
@@ -291,12 +292,13 @@ export const zoomSketch = function (p) {
             const pos = log.predictedPosition;
             const x = pos[0] * plotScales.plotScaleX;
             const y = pos[1] * plotScales.plotScaleY;
+            const size = 4 * inverseZoom;
 
             p.push();
             p.stroke(255, 0, 0); // Red for predicted
-            p.strokeWeight(2);
-            p.line(x - 4, y - 4, x + 4, y + 4);
-            p.line(x + 4, y - 4, x - 4, y + 4);
+            p.strokeWeight(2 * inverseZoom);
+            p.line(x - size, y - size, x + size, y + size);
+            p.line(x + size, y - size, x - size, y + size);
             p.pop();
           }
         }