diff --git a/bats_ai/core/models/spectrogram.py b/bats_ai/core/models/spectrogram.py
index 1bcaf70..9ee4ab6 100644
--- a/bats_ai/core/models/spectrogram.py
+++ b/bats_ai/core/models/spectrogram.py
@@ -239,6 +239,7 @@ def compressed(self):
             stops_ = []
             domain = img.shape[1]
             widths = []
+            total_width = 0
             for start, stop in ranges:
                 segment = img[:, start:stop]
                 segments.append(segment)
@@ -246,6 +247,7 @@ def compressed(self):
                 starts_.append(int(round(self.duration * (start / domain))))
                 stops_.append(int(round(self.duration * (stop / domain))))
                 widths.append(stop - start)
+                total_width += stop - start
 
                 # buffer = np.zeros((len(img), 20, 3), dtype=img.dtype)
                 # segments.append(buffer)
@@ -273,7 +275,7 @@ def compressed(self):
         buf.seek(0)
         img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
 
-        return img_base64, starts_, stops_, widths
+        return img_base64, starts_, stops_, widths, total_width
 
     @property
     def image_np(self):
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 0acd72b..2752215 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -274,7 +274,7 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
         return {'error': 'Recording not found'}
 
     spectrogram = recording.spectrogram
-    compressed, starts, ends, widths = spectrogram.compressed
+    compressed, starts, ends, widths, total_width = spectrogram.compressed
 
     spectro_data = {
         'base64_spectrogram': compressed,
@@ -287,6 +287,7 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
             'end_times': ends,
             'low_freq': spectrogram.frequency_min,
             'high_freq': spectrogram.frequency_max,
+            'compressedWidth': total_width,
             'widths': widths,
         },
     }
@@ -314,13 +315,22 @@ def get_spectrogram_compressed(request: HttpRequest, id: int):
     spectro_data['currentUser'] = request.user.email
 
     annotations_qs = Annotations.objects.filter(recording=recording, owner=request.user)
+    temporal_annotations_qs = TemporalAnnotations.objects.filter(
+        recording=recording, owner=request.user
+    )
 
     # Serialize the annotations using AnnotationSchema
     annotations_data = [
         AnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
         for annotation in annotations_qs
     ]
+    temporal_annotations_data = [
+        TemporalAnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+        for annotation in temporal_annotations_qs
+    ]
+
     spectro_data['annotations'] = annotations_data
+    spectro_data['temporal'] = temporal_annotations_data
     return spectro_data
 
 
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 5be5c98..4557d40 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -40,11 +40,13 @@ export default defineComponent({
     "hoverData",
   ],
   setup(props, { emit }) {
-    const { annotations, temporalAnnotations, selectedId, selectedType, creationType, blackBackground } = useState();
+    const { annotations, temporalAnnotations, selectedId, selectedType, creationType, blackBackground, scaledVals } = useState();
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized = ref(false);
     const cursor = ref("");
+    const scaledWidth = ref(0);
+    const scaledHeight = ref(0);
     const imageCursorRef: Ref<HTMLElement | undefined> = ref();
     const setCursor = (newCursor: string) => {
       cursor.value = newCursor;
@@ -77,20 +79,23 @@ export default defineComponent({
       if (!props.spectroInfo) {
         return;
       }
+      const adjustedWidth = scaledWidth.value > props.spectroInfo.width ? scaledWidth.value : props.spectroInfo.width;
+      const adjustedHeight = scaledHeight.value > props.spectroInfo.height ? scaledHeight.value : props.spectroInfo.height;
+
       const freq =
-        props.spectroInfo.height - y >= 0
-          ? ((props.spectroInfo.height - y) *
-              (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
-              props.spectroInfo.height /
-              1000 +
-            props.spectroInfo.low_freq / 1000
+        adjustedHeight - y >= 0
+          ? ((adjustedHeight - y) *
+            (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
+          adjustedHeight /
+          1000 +
+          props.spectroInfo.low_freq / 1000
           : -1;
 
       if (!props.spectroInfo.end_times && !props.spectroInfo.start_times) {
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const time =
             x *
-            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / props.spectroInfo.width);
+            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / adjustedWidth);
           emit("hoverData", { time, freq });
         } else {
           emit("hoverData", { time: -1, freq: -1 });
@@ -101,9 +106,9 @@ export default defineComponent({
         props.spectroInfo.end_times
       ) {
         // compressed view
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const timeLength = props.spectroInfo.end_time - props.spectroInfo.start_time;
-          const timeToPixels = props.spectroInfo.width / timeLength;
+          const timeToPixels = adjustedWidth / timeLength;
           // find X in the range
           let offsetAdditive = 0;
           for (let i = 0; i < props.spectroInfo.start_times.length; i += 1) {
@@ -127,6 +132,8 @@ export default defineComponent({
     };
     watch(containerRef, () => {
       const { naturalWidth, naturalHeight } = props.image;
+      scaledWidth.value = naturalWidth;
+      scaledHeight.value = naturalHeight;
       if (containerRef.value)
         geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
       geoJS.drawImage(props.image, naturalWidth, naturalHeight);
@@ -166,9 +173,9 @@ export default defineComponent({
         if (skipNextSelected) {
           skipNextSelected = false;
           return;
-          
+
         }
-        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value): temporalAnnotations.value.find((item) => item.id === selectedId.value);
+        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value) : temporalAnnotations.value.find((item) => item.id === selectedId.value);
         if (found && props.spectroInfo) {
 
           const center = spectroToCenter(found, props.spectroInfo, selectedType.value);
@@ -182,6 +189,28 @@ export default defineComponent({
       }
     );
 
+    const wheelEvent = (event: WheelEvent) => {
+      const { naturalWidth, naturalHeight } = props.image;
+
+      if (event.ctrlKey) {
+        scaledWidth.value = scaledWidth.value + event.deltaY * -4;
+        if (scaledWidth.value < naturalWidth) {
+          scaledWidth.value = naturalWidth;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      } else if (event.shiftKey) {
+        scaledHeight.value = scaledHeight.value + event.deltaY * -0.25;
+        if (scaledHeight.value < naturalHeight) {
+          scaledHeight.value = naturalHeight;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      }
+      const xScale = props.spectroInfo?.compressedWidth ? scaledWidth.value / props.spectroInfo.compressedWidth: scaledWidth.value / (props.spectroInfo?.width || 1) ;
+      const yScale = scaledHeight.value / (props.spectroInfo?.height || 1) ;
+      scaledVals.value = {x: xScale, y: yScale};
+    };
+
+
 
     return {
       containerRef,
@@ -194,6 +223,9 @@ export default defineComponent({
       cursorHandler,
       imageCursorRef,
       blackBackground,
+      wheelEvent,
+      scaledWidth,
+      scaledHeight,
     };
   },
 });
@@ -202,7 +234,8 @@ export default defineComponent({
 <template>
   <div
     class="video-annotator"
-    :class="{'black-background': blackBackground, 'white-background': !blackBackground}"
+    :class="{ 'black-background': blackBackground, 'white-background': !blackBackground }"
+    @wheel="wheelEvent($event)"
   >
     <div
       id="spectro"
@@ -217,12 +250,14 @@ export default defineComponent({
       v-if="initialized"
       :geo-viewer-ref="geoViewerRef"
       :spectro-info="spectroInfo"
+      :scaled-width="scaledWidth"
+      :scaled-height="scaledHeight"
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"
       @set-cursor="setCursor($event)"
     />
     <div
-      ref="imageCursorRef" 
+      ref="imageCursorRef"
       class="imageCursor"
     >
       <v-icon color="white">
@@ -243,8 +278,10 @@ export default defineComponent({
 
   display: flex;
   flex-direction: column;
+
   .geojs-map {
     margin: 2px;
+
     &.geojs-map:focus {
       outline: none;
     }
@@ -254,6 +291,7 @@ export default defineComponent({
   .playback-container {
     flex: 1;
   }
+
   .loadingSpinnerContainer {
     z-index: 20;
     margin: 0;
@@ -263,18 +301,20 @@ export default defineComponent({
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
+
   .geojs-map.annotation-input {
     cursor: inherit;
   }
 }
 
 .black-background {
-    background-color: black;
-  }
+  background-color: black;
+}
 
 .white-background {
-  background-color:  white;
+  background-color: white;
 }
+
 .imageCursor {
   z-index: 9999; //So it will be above the annotator layers
   position: fixed;
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index f1806d5..2f776ab 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -31,6 +31,14 @@ export default defineComponent({
     yScale: {
       type: Number,
       default: 1,
+    },
+    scaledWidth: {
+      type: Number,
+      default: -1,
+    },
+    scaledHeight: {
+      type: Number,
+      default: -1,
     }
   },
   emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
@@ -198,7 +206,7 @@ export default defineComponent({
             ) : localTemporalAnnotations.value.findIndex((item) => item.id === selectedAnnotationId.value);
             if (index !== -1 && props.spectroInfo && selectedType.value === 'pulse') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -216,7 +224,7 @@ export default defineComponent({
             }
             if (index !== -1 && props.spectroInfo && selectedType.value === 'sequence') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -236,7 +244,7 @@ export default defineComponent({
           }
         } else if (creating) {
           if (geoJSON && props.spectroInfo) {
-            const conversionResult =  geojsonToSpectro(geoJSON, props.spectroInfo);
+            const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
 
             if (conversionResult.error) {
               displayError.value = true;
@@ -255,8 +263,8 @@ export default defineComponent({
                 id: 0,
               };
               emit("create:annotation", newAnnotation);
-          } else if (creationType.value === 'sequence') {
-            const newAnnotation: SpectrogramTemporalAnnotation = {
+            } else if (creationType.value === 'sequence') {
+              const newAnnotation: SpectrogramTemporalAnnotation = {
                 start_time,
                 end_time,
                 species: [],
@@ -266,7 +274,7 @@ export default defineComponent({
               };
               emit("create:annotation", newAnnotation);
 
-          }
+            }
             editAnnotationLayer.disable();
             annotationState.value = "";
             editing.value = false;
@@ -359,7 +367,7 @@ export default defineComponent({
         triggerUpdate();
       }
     );
-    watch (temporalAnnotations, () => {
+    watch(temporalAnnotations, () => {
       localTemporalAnnotations.value = temporalAnnotations.value;
       triggerUpdate();
     });
@@ -426,6 +434,63 @@ export default defineComponent({
       if (!props.thumbnail && legendLayer) {
         triggerUpdate();
       }
+    });
+    watch([() => props.scaledWidth, () => props.scaledHeight], () => {
+      const { annotations, temporalAnnotations } = getDataForLayers();
+      legendLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.formatData(
+        annotations,
+        selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
+        currentUser.value,
+        colorScale.value,
+        props.yScale,
+      );
+      rectAnnotationLayer.redraw();
+      editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (editing.value && editingAnnotation.value) {
+        setTimeout(() => {
+          editAnnotationLayer.changeData(editingAnnotation.value, selectedType.value);
+        }, 0);
+      }
+      timeLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      freqLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesSequenceLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      temporalAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (layerVisibility.value.includes("time")) {
+        timeLayer.formatData(annotations, temporalAnnotations);
+        timeLayer.redraw();
+      } else {
+        timeLayer.disable();
+      }
+      if (layerVisibility.value.includes("freq")) {
+        freqLayer.formatData(annotations);
+        freqLayer.redraw();
+      } else {
+        freqLayer.disable();
+      }
+      if (layerVisibility.value.includes("species")) {
+        speciesLayer.formatData(annotations);
+        speciesLayer.redraw();
+        speciesSequenceLayer.formatData(temporalAnnotations);
+        speciesSequenceLayer.redraw();
+      } else {
+        speciesLayer.disable();
+        speciesSequenceLayer.disable();
+      }
+      if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
+        temporalAnnotationLayer.formatData(
+          temporalAnnotations,
+          selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
+          currentUser.value,
+          colorScale.value,
+          props.yScale,
+        );
+        temporalAnnotationLayer.redraw();
+      }
+
+
     });
     watch(
       () => annotationState.value,
@@ -452,7 +517,7 @@ export default defineComponent({
 
 <template>
   <v-dialog
-    v-model="displayError" 
+    v-model="displayError"
     width="500"
   >
     <v-card>
@@ -473,4 +538,3 @@ export default defineComponent({
     </v-card>
   </v-dialog>
 </template>
-./layers/timeLalyer
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 6409a75..efd5d54 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -39,7 +39,6 @@ const useGeoJS = () => {
     interactorOpts.keyboard.focusHighlight = false;
     interactorOpts.keyboard.actions = {};
     interactorOpts.click.cancelOnMove = 5;
-
     interactorOpts.actions = [
       interactorOpts.actions[0],
       // The action below is needed to have GeoJS use the proper handler
@@ -100,7 +99,7 @@ const useGeoJS = () => {
     quadFeature = quadFeatureLayer.createFeature("quad");
   };
 
-  const drawImage = (image: HTMLImageElement, width = image.width, height = image.height) => {
+  const drawImage = (image: HTMLImageElement, width = image.width, height = image.height, resetCam=true) => {
     if (quadFeature) {
       quadFeature
         .data([
@@ -112,7 +111,22 @@ const useGeoJS = () => {
         ])
         .draw();
     }
-    resetMapDimensions(width, height);
+    if (resetCam) {
+    resetMapDimensions(width, height, 0.3,resetCam);
+    } else {
+      const params = geo.util.pixelCoordinateParams(container.value, width, height, width, height);
+      const margin  = 0.3;
+      const { right, bottom } = params.map.maxBounds;
+      originalBounds = params.map.maxBounds;
+      geoViewer.value.maxBounds({
+        left: 0 - right * margin,
+        top: 0 - bottom * margin,
+        right: right * (1 + margin),
+        bottom: bottom * (1 + margin),
+      });
+  
+    }
+    
   };
   const resetZoom = () => {
     const { width: mapWidth } = geoViewer.value.camera().viewport;
@@ -130,7 +144,7 @@ const useGeoJS = () => {
     geoViewer.value.center(zoomAndCenter.center);
   };
 
-  const resetMapDimensions = (width: number, height: number, margin = 0.3) => {
+  const resetMapDimensions = (width: number, height: number, margin = 0.3, resetCam = false) => {
     // Want the height to be the main view and whe width to be  relative to the width of the geo.amp
     geoViewer.value.bounds({
       left: 0,
@@ -156,8 +170,9 @@ const useGeoJS = () => {
     geoViewer.value.clampBoundsX(true);
     geoViewer.value.clampBoundsY(true);
     geoViewer.value.clampZoom(true);
-
-    resetZoom();
+    if (resetCam) {
+      resetZoom();
+    }
   };
 
   return {
@@ -179,6 +194,7 @@ export interface SpectroInfo {
   start_times?: number[];
   end_times?: number[];
   widths?: number[], //widths of segements
+  compressedWidth?: number,
   low_freq: number;
   high_freq: number;
 }
@@ -189,10 +205,15 @@ function spectroTemporalToGeoJSon(
   ymin = 0,
   ymax = 10,
   yScale = 1,
+  scaledWidth = 0,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _scaledHeight = 0, // may be useful in the future
 ): GeoJSON.Polygon {
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  // const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
   //scale pixels to time and frequency ranges
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     // Now we remap our annotation to pixel coordinates
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
@@ -213,7 +234,7 @@ function spectroTemporalToGeoJSon(
     // Find what section the annotation is in
     const start = annotation.start_time;
     const end = annotation.end_time;
-    const { start_times, end_times } = spectroInfo;
+    const { start_times, end_times, widths } = spectroInfo;
     const lengths = start_times.length === end_times.length ? start_times.length : 0;
     let foundIndex = -1;
     for (let i = 0; i < lengths; i += 1) {
@@ -228,14 +249,18 @@ function spectroTemporalToGeoJSon(
       }
     }
     // We need to build the length of times to pixel size for the time spaces before the annotation
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const compressedScale = scaledWidth > (spectroInfo.compressedWidth || 1) ?  scaledWidth / (spectroInfo.compressedWidth || spectroInfo.width) : 1;
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time) * compressedScale;
     let pixelAdd = 0;
     for (let i = 0; i < foundIndex; i += 1) {
-      pixelAdd += (end_times[i] - start_times[i]) * widthScale;
+      const addWidth = widths && widths[i];
+      if (addWidth) {
+        pixelAdd += addWidth;
+      }
     }
     // Now we remap our annotation to pixel coordinates
-    const start_time = pixelAdd + (annotation.start_time - start_times[foundIndex]) * widthScale;
-    const end_time = pixelAdd + (annotation.end_time - start_times[foundIndex]) * widthScale;
+    const start_time = (pixelAdd * compressedScale) + (annotation.start_time - start_times[foundIndex]) * widthScale;
+    const end_time = (pixelAdd * compressedScale) + (annotation.end_time - start_times[foundIndex]) * widthScale;
 
     return {
       type: "Polygon",
@@ -267,17 +292,22 @@ function spectroTemporalToGeoJSon(
 function spectroToGeoJSon(
   annotation: SpectrogramAnnotation,
   spectroInfo: SpectroInfo,
-  yScale = 1
+  yScale = 1,
+  scaledWidth = 0,
+  scaledHeight = 0
 ): GeoJSON.Polygon {
   //scale pixels to time and frequency ranges
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
     const low_freq =
-      spectroInfo.height - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
     const high_freq =
-      spectroInfo.height - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
     return {
@@ -297,7 +327,7 @@ function spectroToGeoJSon(
     // Find what section the annotation is in
     const start = annotation.start_time;
     const end = annotation.end_time;
-    const { start_times, end_times } = spectroInfo;
+    const { start_times, end_times, widths } = spectroInfo;
     const lengths = start_times.length === end_times.length ? start_times.length : 0;
     let foundIndex = -1;
     for (let i = 0; i < lengths; i += 1) {
@@ -312,19 +342,23 @@ function spectroToGeoJSon(
       }
     }
     // We need to build the length of times to pixel size for the time spaces before the annotation
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const compressedScale = scaledWidth > (spectroInfo.compressedWidth || 1) ?  scaledWidth / (spectroInfo.compressedWidth || spectroInfo.width) : 1;
+    const widthScale =(adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time)) * compressedScale;
     let pixelAdd = 0;
     for (let i = 0; i < foundIndex; i += 1) {
-      pixelAdd += (end_times[i] - start_times[i]) * widthScale;
+      const addWidth = widths && widths[i];
+      if (addWidth) {
+        pixelAdd += addWidth;
+      }
     }
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
     const low_freq =
-      spectroInfo.height - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
     const high_freq =
-      spectroInfo.height - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
-    const start_time = pixelAdd + (annotation.start_time - start_times[foundIndex]) * widthScale;
-    const end_time = pixelAdd + (annotation.end_time - start_times[foundIndex]) * widthScale;
+      adjustedHeight - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
+    const start_time = (pixelAdd * compressedScale) + (annotation.start_time - start_times[foundIndex]) * widthScale;
+    const end_time = (pixelAdd  * compressedScale) + (annotation.end_time - start_times[foundIndex]) * widthScale;
 
     return {
       type: "Polygon",
@@ -378,12 +412,17 @@ function spectroToCenter(annotation: SpectrogramAnnotation | SpectrogramTemporal
 /* beginning at bottom left, rectangle is defined clockwise */
 function geojsonToSpectro(
   geojson: GeoJSON.Feature<GeoJSON.Polygon>,
-  spectroInfo: SpectroInfo
+  spectroInfo: SpectroInfo,
+  scaledWidth = 0,
+  scaledHeight = 0,
 ): { error?: string; start_time: number; end_time: number; low_freq: number; high_freq: number } {
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+
   const coords = geojson.geometry.coordinates[0];
   if (spectroInfo.start_times === undefined && spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     const start_time = Math.round(coords[1][0] / widthScale);
     const end_time = Math.round(coords[3][0] / widthScale);
     const high_freq = Math.round(spectroInfo.high_freq - coords[1][1] / heightScale);
@@ -396,16 +435,17 @@ function geojsonToSpectro(
     };
   } else if (spectroInfo.start_times && spectroInfo.end_times) {
     // first need to map the X positions to times based on the start/endtimes
-    const start = coords[1][0];
-    const end = coords[3][0];
-    const { start_times, end_times } = spectroInfo;
-    const timeToPixels = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const compressedScale = scaledWidth > (spectroInfo.compressedWidth || 1) ?  scaledWidth / (spectroInfo.compressedWidth || spectroInfo.width) : 1;
+    const start = coords[1][0] / compressedScale;
+    const end = coords[3][0] / compressedScale;
+    const { start_times, widths } = spectroInfo;
+    const timeToPixels = (adjustedWidth) / (spectroInfo.end_time - spectroInfo.start_time);
     let additivePixels = 0;
     let start_time = -1;
     let end_time = -1;
     for (let i = 0; i < start_times.length; i += 1) {
       // convert the start/end time to a pixel
-      const nextPixels = (end_times[i] - start_times[i]) * timeToPixels;
+      const nextPixels = (widths && widths[i] || 0);
       if (start > additivePixels && end < additivePixels + nextPixels) {
         // Found the location for time markers
         // We need to remap pixels back to milliseconds
@@ -419,7 +459,7 @@ function geojsonToSpectro(
       }
       additivePixels += nextPixels;
     }
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     const high_freq = Math.round(spectroInfo.high_freq - coords[1][1] / heightScale);
     const low_freq = Math.round(spectroInfo.high_freq - coords[3][1] / heightScale);
     if (start_time === -1 || end_time === -1) {
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
index 0f51002..ca15e4b 100644
--- a/client/src/components/geoJS/layers/editAnnotationLayer.ts
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -70,6 +70,9 @@ export default class EditAnnotationLayer {
 
   leftButtonCheckTimeout: number; //Fallthough mouse down when ending lineStrings
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   /* in-progress events only emitted for lines and polygons */
   shapeInProgress: GeoJSON.LineString | GeoJSON.Polygon | null;
 
@@ -100,6 +103,8 @@ export default class EditAnnotationLayer {
     this.shapeInProgress = null;
     this.disableModeSync = false;
     this.leftButtonCheckTimeout = -1;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
 
     //Only initialize once, prevents recreating Layer each edit
     this.initialize();
@@ -161,6 +166,11 @@ export default class EditAnnotationLayer {
     };
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
   /**
    * Listen to mousedown events and build a replica of the in-progress annotation
    * shape that GeoJS is keeps internally.  Emit the shape as update:in-progress-geojson
@@ -349,7 +359,7 @@ export default class EditAnnotationLayer {
     });
     if (annotationData) {
 
-      const geoJSONData = type === 'pulse' ? spectroToGeoJSon(annotationData as SpectrogramAnnotation, this.spectroInfo): spectroTemporalToGeoJSon(annotationData as SpectrogramTemporalAnnotation, this.spectroInfo, -10, -50);
+      const geoJSONData = type === 'pulse' ? spectroToGeoJSon(annotationData as SpectrogramAnnotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight): spectroTemporalToGeoJSon(annotationData as SpectrogramTemporalAnnotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const geojsonFeature: GeoJSON.Feature = {
         type: "Feature",
         geometry: geoJSONData,
diff --git a/client/src/components/geoJS/layers/freqLayer.ts b/client/src/components/geoJS/layers/freqLayer.ts
index 48f92ba..628f66b 100644
--- a/client/src/components/geoJS/layers/freqLayer.ts
+++ b/client/src/components/geoJS/layers/freqLayer.ts
@@ -39,6 +39,9 @@ export default class FreqLayer {
   textStyle: LayerStyle<TextData>;
   lineStyle: LayerStyle<LineData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -52,6 +55,8 @@ export default class FreqLayer {
     this.lineData = [];
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -68,13 +73,17 @@ export default class FreqLayer {
     this.lineStyle = this.createLineStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
 
   formatData(annotationData: SpectrogramAnnotation[]) {
     this.textData = [];
     this.lineData = [];
     const lineDist = 16;
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const {low_freq, high_freq } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts
index 2680443..e617b98 100644
--- a/client/src/components/geoJS/layers/legendLayer.ts
+++ b/client/src/components/geoJS/layers/legendLayer.ts
@@ -49,6 +49,10 @@ export default class LegendLayer {
 
   gridEnabled: boolean;
 
+  scaledWidth: number;
+
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,6 +68,8 @@ export default class LegendLayer {
     this.textDataX = [];
     this.textDataY = [];
     this.axisBuffer = 5;
+    this.scaledHeight = -1;
+    this.scaledWidth  = -1;
     this.event = event;
     this.gridEnabled = false;
     //Only initialize once, prevents recreating Layer each edit
@@ -101,14 +107,34 @@ export default class LegendLayer {
     this.redraw();
   }
 
+  setScaledDimensions( width: number, height: number) {
+    this.scaledWidth = width;
+    this.scaledHeight = height;
+    this.createLabels();
+    this.calcGridLines();
+    if (this.gridEnabled) {
+      this.gridLayer
+        .data(this.gridLines)
+        .line((d: LineData) => d.line.coordinates)
+        .style(this.createLineStyle())
+        .draw();
+    } else {
+      this.gridLayer.data([]).draw();
+    }
+    this.redraw();
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   drawXAxisLabels(yOffset = 0, _xOffset = 0, leftOffset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
-    const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
+    const baseYPos = yOffset === 0 ? adjustedHeight : yOffset;
 
     // Now we need tick marks for ms along the X-axis
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-    const timeToPixels = this.spectroInfo.width / time;
+    const timeToPixels = adjustedWidth / time;
 
     // every 100 ms a small tick and every 1000 a big tick
     for (let i = 0; i < time; i += 10) {
@@ -139,16 +165,19 @@ export default class LegendLayer {
     }
   }
 
-  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0, leftOffset = 0) {
+  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0, leftOffset = 0,) {
+    // const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
-    const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
+    const baseYPos = yOffset === 0 ? adjustedHeight : yOffset;
     const baseTopPos = topOffset === 0 ? 0 : -topOffset;
     const topBuffer = topOffset === 0 ? this.axisBuffer * 3 : this.axisBuffer * -0.5;
 
-    // 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 { start_times, end_times, widths } = this.spectroInfo;
+    const { start_times, end_times, widths, compressedWidth } = this.spectroInfo;
+    if (!compressedWidth) {
+      throw Error('No compressed width');
+    }
     if (start_times && end_times && widths) {
       // We need a pixel time to map to the 0 position
       let pixelOffset = 0;
@@ -156,7 +185,7 @@ export default class LegendLayer {
         const length = yBuffer * 4;
         const start_time = start_times[i];
         const end_time = end_times[i];
-        const width = widths[i];
+        const width = this.scaledWidth > compressedWidth ? (this.scaledWidth / compressedWidth) * widths[i] : widths[i];
         const bottomWithinYAxisStart = (pixelOffset) < (leftOffset +  50)  && leftOffset !== 0 && yOffset !== 0;
         const topWithinYAxisEnd = (pixelOffset+width) < (leftOffset +  50)  && leftOffset !== 0 && topOffset !== 0;
      
@@ -244,26 +273,29 @@ export default class LegendLayer {
 
   calcGridLines() {
     // Y-Axis grid lines:
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
     const xBuffer = this.axisBuffer;
     const hz = this.spectroInfo.high_freq - this.spectroInfo.low_freq;
-    const hzToPixels = this.spectroInfo.height / hz;
+    const hzToPixels = adjustedHeight / hz;
+    this.gridLines = [];
     for (let i = 0; i < hz; i += 10000) {
       this.gridLines.push({
         line: {
           type: "LineString",
           coordinates: [
-            [0 - xBuffer - length, this.spectroInfo.height - i * hzToPixels],
-            [this.spectroInfo.width, this.spectroInfo.height - i * hzToPixels],
+            [0 - xBuffer - length, adjustedHeight - i * hzToPixels],
+            [adjustedWidth, adjustedHeight - i * hzToPixels],
           ],
         },
         grid: true,
       });
     }
-    const baseYPos = this.spectroInfo.height;
+    const baseYPos = adjustedHeight;
 
     // Now we need tick marks for ms along the X-axis
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-    const timeToPixels = this.spectroInfo.width / time;
+    const timeToPixels = adjustedWidth / time;
 
     // every 100 ms a small tick and every 1000 a big tick
     for (let i = 0; i < time; i += 10) {
@@ -281,27 +313,29 @@ export default class LegendLayer {
   }
 
   drawYAxis(offset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
     const xBuffer = offset === 0 ? this.axisBuffer : this.axisBuffer * -0.25;
     const yAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
         [offset - xBuffer, 0],
-        [offset - xBuffer, this.spectroInfo.height + xBuffer],
+        [offset - xBuffer, adjustedWidth + xBuffer],
       ],
     };
     this.lineDataY.push({ line: yAxis });
 
     // Lets do the vertical Hz axis now
     const hz = this.spectroInfo.high_freq - this.spectroInfo.low_freq;
-    const hzToPixels = this.spectroInfo.height / hz;
+    const hzToPixels = adjustedHeight / hz;
     for (let i = 0; i < hz; i += 10000) {
       const length = i % 10000 === 0 ? xBuffer * 8 : xBuffer * 4;
       this.lineDataY.push({
         line: {
           type: "LineString",
           coordinates: [
-            [offset - xBuffer, this.spectroInfo.height - i * hzToPixels],
-            [offset - xBuffer - length, this.spectroInfo.height - i * hzToPixels],
+            [offset - xBuffer, adjustedHeight - i * hzToPixels],
+            [offset - xBuffer - length, adjustedHeight - i * hzToPixels],
           ],
         },
         thicker: i % 10000 === 0,
@@ -309,7 +343,7 @@ export default class LegendLayer {
       this.textDataY.push({
         text: `${(i + this.spectroInfo.low_freq) / 1000}KHz`,
         x: offset - xBuffer - length,
-        y: this.spectroInfo.height - i * hzToPixels,
+        y: adjustedHeight - i * hzToPixels,
         offsetX: offset === 0 ? -25 : 25,
         offsetY: 0,
       });
@@ -317,16 +351,19 @@ export default class LegendLayer {
   }
 
   drawXAxis(bottomOffset = 0, topOffset = 0, lefOffset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const xAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
-        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
-        [this.spectroInfo.width, this.spectroInfo.height + this.axisBuffer],
+        [0 - this.axisBuffer, adjustedHeight + this.axisBuffer],
+        [adjustedWidth, adjustedHeight + this.axisBuffer],
       ],
     };
 
     this.lineDataX.push({ line: xAxis });
-    this.drawYAxis();
+    this.drawYAxis(0);
 
     if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
       this.drawXAxisLabelsCompressed(bottomOffset, topOffset, lefOffset);
@@ -335,6 +372,9 @@ export default class LegendLayer {
     }
   }
   createLabels() {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     // Take spectro Info and create lines for X/Y axis
     this.textDataX = [];
     this.lineDataX = [];
@@ -343,8 +383,8 @@ export default class LegendLayer {
     const xAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
-        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
-        [this.spectroInfo.width, this.spectroInfo.height + this.axisBuffer],
+        [0 - this.axisBuffer, adjustedHeight + this.axisBuffer],
+        [adjustedWidth, adjustedHeight + this.axisBuffer],
       ],
     };
 
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 60bf841..e5dccae 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -33,6 +33,9 @@ export default class RectangleLayer {
 
   style: LayerStyle<RectGeoJSData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,6 +49,8 @@ export default class RectangleLayer {
     this.formattedData = [];
     this.hoverOn = false;
     this.selectedIndex = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -106,6 +111,11 @@ export default class RectangleLayer {
     }
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;    
+  }
+
   formatData(
     annotationData: SpectrogramAnnotation[],
     selectedIndex: number | null,
@@ -115,7 +125,7 @@ export default class RectangleLayer {
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/speciesLayer.ts b/client/src/components/geoJS/layers/speciesLayer.ts
index b696698..627b3b1 100644
--- a/client/src/components/geoJS/layers/speciesLayer.ts
+++ b/client/src/components/geoJS/layers/speciesLayer.ts
@@ -28,6 +28,8 @@ export default class SpeciesLayer {
 
   textStyle: LayerStyle<TextData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -41,6 +43,8 @@ export default class SpeciesLayer {
     this.spectroInfo = spectroInfo;
     this.textData = [];
     this.event = event;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
       features: ["text"],
@@ -54,11 +58,16 @@ export default class SpeciesLayer {
     this.textStyle = this.createTextStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
 
   formatData(annotationData: SpectrogramAnnotation[]) {
     this.textData = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/speciesSequenceLayer.ts b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
index 6e06bd4..0b1efce 100644
--- a/client/src/components/geoJS/layers/speciesSequenceLayer.ts
+++ b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
@@ -29,6 +29,9 @@ export default class SpeciesSequenceLayer {
 
   textStyle: LayerStyle<TextData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -41,6 +44,8 @@ export default class SpeciesSequenceLayer {
     this.geoViewerRef = geoViewerRef;
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -55,11 +60,15 @@ export default class SpeciesSequenceLayer {
     this.textStyle = this.createTextStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
 
   formatData(annotationData: SpectrogramTemporalAnnotation[]) {
     this.textData = [];
     annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/temporalLayer.ts b/client/src/components/geoJS/layers/temporalLayer.ts
index 8f2909c..7a1cdac 100644
--- a/client/src/components/geoJS/layers/temporalLayer.ts
+++ b/client/src/components/geoJS/layers/temporalLayer.ts
@@ -34,6 +34,9 @@ export default class TemporalLayer {
 
   style: LayerStyle<RectGeoJSData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -49,6 +52,8 @@ export default class TemporalLayer {
     this.hoverOn = false;
     this.selectedIndex = [];
     this.event = event;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
       features: ["polygon"],
@@ -92,6 +97,11 @@ export default class TemporalLayer {
     this.event("annotation-hover", { id: found, pos: e.mouse.geo });
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
   setHoverAnnotations(val: boolean) {
     if (!this.hoverOn && val) {
       this.featureLayer.geoOn(geo.event.feature.mouseover, (e: GeoEvent) =>
@@ -118,7 +128,7 @@ export default class TemporalLayer {
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50,yScale);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, yScale, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/timeLayer.ts b/client/src/components/geoJS/layers/timeLayer.ts
index 5757d19..e738040 100644
--- a/client/src/components/geoJS/layers/timeLayer.ts
+++ b/client/src/components/geoJS/layers/timeLayer.ts
@@ -39,6 +39,9 @@ export default class TimeLayer {
   textStyle: LayerStyle<TextData>;
   lineStyle: LayerStyle<LineData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -52,6 +55,8 @@ export default class TimeLayer {
     this.lineData = [];
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -68,13 +73,18 @@ export default class TimeLayer {
     this.lineStyle = this.createLineStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
 
   formatData(annotationData: SpectrogramAnnotation[], temporalData: SpectrogramTemporalAnnotation[] =[]) {
     this.textData = [];
     this.lineData = [];
     const lineDist = 12;
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const {start_time, end_time } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
@@ -123,7 +133,7 @@ export default class TimeLayer {
       });
     });
     temporalData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const {start_time, end_time } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 51c5457..6a90216 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -19,6 +19,7 @@ const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
 const blackBackground = ref(true);
+const scaledVals: Ref<{x: number, y: number}> = ref({x: 0, y: 0});
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -85,5 +86,6 @@ export default function useState() {
     recordingList,
     nextShared,
     blackBackground,
+    scaledVals,
   };
 }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 58855dc..1cd12d0 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -43,6 +43,7 @@ export default defineComponent({
       otherUserAnnotations,
       selectedId,
       selectedType,
+      scaledVals,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
@@ -200,6 +201,7 @@ export default defineComponent({
       selectedUsers,
       deleteChip,
       colorScale,
+      scaledVals,
     };
   },
 });
@@ -221,6 +223,20 @@ export default defineComponent({
                 <span v-if="freqRef >= 0">{{ freqRef.toFixed(2) }}KHz</span>
               </div>
             </v-col>
+            <v-col
+              v-if="scaledVals.x > 1 || scaledVals.y > 1"
+              cols="2"
+            >
+              <div>
+                <b>xScale:</b>
+                <span v-if="timeRef >= 0">{{ scaledVals.x.toFixed(2) }}x</span>
+              </div>
+              <div>
+                <b>ySAcale:</b>
+                <span v-if="freqRef >= 0">{{ scaledVals.y.toFixed(2) }}x</span>
+              </div>
+            </v-col>
+
             <v-col
               cols="1"
               class="px-0"