diff --git a/bats_ai/core/models/spectrogram.py b/bats_ai/core/models/spectrogram.py
index 72e61e1..1bcaf70 100644
--- a/bats_ai/core/models/spectrogram.py
+++ b/bats_ai/core/models/spectrogram.py
@@ -238,12 +238,14 @@ def compressed(self):
             starts_ = []
             stops_ = []
             domain = img.shape[1]
+            widths = []
             for start, stop in ranges:
                 segment = img[:, start:stop]
                 segments.append(segment)
 
                 starts_.append(int(round(self.duration * (start / domain))))
                 stops_.append(int(round(self.duration * (stop / domain))))
+                widths.append(stop - start)
 
                 # buffer = np.zeros((len(img), 20, 3), dtype=img.dtype)
                 # segments.append(buffer)
@@ -271,7 +273,7 @@ def compressed(self):
         buf.seek(0)
         img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
 
-        return img_base64, starts_, stops_
+        return img_base64, starts_, stops_, widths
 
     @property
     def image_np(self):
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 39202c2..b8be1a3 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -268,7 +268,7 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
         return {'error': 'Recording not found'}
 
     spectrogram = recording.spectrogram
-    compressed, starts, ends = spectrogram.compressed
+    compressed, starts, ends, widths = spectrogram.compressed
 
     spectro_data = {
         'base64_spectrogram': compressed,
@@ -281,6 +281,7 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
             'end_times': ends,
             'low_freq': spectrogram.frequency_min,
             'high_freq': spectrogram.frequency_max,
+            'widths': widths,
         },
     }
 
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index a29b965..6409a75 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -178,6 +178,7 @@ export interface SpectroInfo {
   end_time: number;
   start_times?: number[];
   end_times?: number[];
+  widths?: number[], //widths of segements
   low_freq: number;
   high_freq: number;
 }
diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts
index dbba709..7997598 100644
--- a/client/src/components/geoJS/layers/legendLayer.ts
+++ b/client/src/components/geoJS/layers/legendLayer.ts
@@ -143,15 +143,21 @@ export default class LegendLayer {
     // For compressed we need to draw based on the start/endTimes instead of the standard
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
     const timeToPixels = this.spectroInfo.width / time;
+    console.log(`width: ${this.spectroInfo.width} time: ${time}`);
+    console.log(`timeToPixels: ${timeToPixels}`);
 
-    const { start_times, end_times } = this.spectroInfo;
-    if (start_times && end_times) {
+    const { start_times, end_times, widths } = this.spectroInfo;
+    if (start_times && end_times && widths) {
       // We need a pixel time to map to the 0 position
       let pixelOffset = 0;
       for (let i = 0; i < start_times.length; i += 1) {
+        console.log(pixelOffset);
         const length = yBuffer * 4;
         const start_time = start_times[i];
         const end_time = end_times[i];
+        const width = widths[i]
+        console.log(`endtime: ${end_time} starttime: ${start_time} diff: ${end_time-start_time}`);
+        console.log((end_time - start_time) * timeToPixels + pixelOffset);
         this.lineDataX.push({
           line: {
             type: "LineString",
@@ -167,11 +173,11 @@ export default class LegendLayer {
             type: "LineString",
             coordinates: [
               [
-                (end_time - start_time) * timeToPixels + pixelOffset,
+                width + pixelOffset,
                 baseYPos + yBuffer,
               ],
               [
-                (end_time - start_time) * timeToPixels + pixelOffset,
+                width + pixelOffset,
                 baseYPos + topBuffer,
               ],
             ],
@@ -182,8 +188,8 @@ export default class LegendLayer {
           line: {
             type: "LineString",
             coordinates: [
-              [(end_time - start_time) * timeToPixels + pixelOffset, baseTopPos],
-              [(end_time - start_time) * timeToPixels + pixelOffset, baseTopPos - topBuffer],
+              [width + pixelOffset, baseTopPos],
+              [width + pixelOffset, baseTopPos - topBuffer],
             ],
           },
           thicker: true,
@@ -193,10 +199,10 @@ export default class LegendLayer {
             type: "LineString",
             coordinates: [
               [
-                (end_time - start_time) * timeToPixels + pixelOffset,
+                width + pixelOffset,
                 baseYPos + yBuffer,
               ],
-              [(end_time - start_time) * timeToPixels + pixelOffset, baseTopPos],
+              [width + pixelOffset, baseTopPos],
             ],
           },
           grid: true,
@@ -212,12 +218,12 @@ export default class LegendLayer {
         });
         this.textDataX.push({
           text: `${end_time}ms`,
-          x: (end_time - start_time) * timeToPixels + pixelOffset,
+          x: width + pixelOffset,
           y: baseTopPos,
           offsetX: 3,
           offsetY: baseTopPos === 0 ? -16 : 16,
         });
-        pixelOffset += (end_time - start_time) * timeToPixels;
+        pixelOffset += width;
         // Need to add the current
       }
     }