diff --git a/bats_ai/core/views/guanometadata.py b/bats_ai/core/views/guanometadata.py
index add1859..23c15bd 100644
--- a/bats_ai/core/views/guanometadata.py
+++ b/bats_ai/core/views/guanometadata.py
@@ -50,16 +50,16 @@ def default_data(
             nabat_fields['nabat_longitude'] = str(float(nabat_fields['nabat_longitude']) * -1)
         # Extract additional fields with conditionals
         additional_fields = {
-            'nabat_activation_start_time': parse_datetime(
-                gfile.get('NABat|Activation start time', None)
-            )
-            if 'NABat|Activation start time' in gfile
-            else None,
-            'nabat_activation_end_time': parse_datetime(
-                gfile.get('NABat|Activation end time', None)
-            )
-            if 'NABat|Activation end time' in gfile
-            else None,
+            'nabat_activation_start_time': (
+                parse_datetime(gfile.get('NABat|Activation start time', None))
+                if 'NABat|Activation start time' in gfile
+                else None
+            ),
+            'nabat_activation_end_time': (
+                parse_datetime(gfile.get('NABat|Activation end time', None))
+                if 'NABat|Activation end time' in gfile
+                else None
+            ),
             'nabat_software_type': gfile.get('NABat|Software type', None),
             'nabat_species_list': gfile.get('NABat|Species List', '').split(','),
             'nabat_comments': gfile.get('NABat|Comments', None),
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 6132871..7699cc8 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -277,7 +277,7 @@ def get_spectrogram(request: HttpRequest, id: int):
 
     with colormap(None):
         spectrogram = recording.spectrogram
-    
+
     compressed = recording.compressed_spectrogram
 
     spectro_data = {
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 6f7a190..4ea1c12 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -58,6 +58,7 @@ export default defineComponent({
       selectedId,
       selectedType,
       setSelectedId,
+      viewCompressedOverlay,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
@@ -317,7 +318,7 @@ export default defineComponent({
         );
         rectAnnotationLayer.redraw();
       }
-      if (compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+      if (viewCompressedOverlay.value && compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
         compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
         compressedOverlayLayer.redraw();
       }
@@ -436,6 +437,11 @@ export default defineComponent({
     });
     const initLayers = () => {
       if (props.spectroInfo) {
+        if (!compressedOverlayLayer) {
+          compressedOverlayLayer = new CompressedOverlayLayer(props.geoViewerRef, props.spectroInfo);
+        } else {
+          compressedOverlayLayer.spectroInfo = props.spectroInfo;
+        }
         if (!editAnnotationLayer) {
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
         } else {
@@ -446,11 +452,6 @@ export default defineComponent({
         } else {
           rectAnnotationLayer.spectroInfo = props.spectroInfo;
         }
-        if (!compressedOverlayLayer) {
-          compressedOverlayLayer = new CompressedOverlayLayer(props.geoViewerRef, props.spectroInfo);
-        } else {
-          compressedOverlayLayer.spectroInfo = props.spectroInfo;
-        }
         if (!temporalAnnotationLayer) {
         temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
         } {
@@ -458,7 +459,7 @@ export default defineComponent({
         }
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         rectAnnotationLayer.redraw();
-        if (compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
+        if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
           compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
           compressedOverlayLayer.redraw();
         }
@@ -535,6 +536,7 @@ export default defineComponent({
       if (compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
         compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
         compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+        compressedOverlayLayer.redraw();
       }
       editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
       if (editing.value && editingAnnotation.value) {
@@ -580,6 +582,15 @@ export default defineComponent({
       }
 
 
+    });
+    watch(viewCompressedOverlay, () => {
+      if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+        compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+        compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+        compressedOverlayLayer.redraw();
+      } else {
+        compressedOverlayLayer.disable();
+      }
     });
     watch(
       () => annotationState.value,
diff --git a/client/src/components/geoJS/layers/compressedOverlayLayer.ts b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
index 7473d8c..f7a143b 100644
--- a/client/src/components/geoJS/layers/compressedOverlayLayer.ts
+++ b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
@@ -86,15 +86,19 @@ export default class CompressedOverlayLayer {
   }
 
   formatData(
-    startTimes: number[],
-    endTimes: number[],
+    baseStartTimes: number[],
+    baseEndTimes: number[],
     yScale = 1,
   ) {
     const arr: RectCompressedGeoJSData[] = [];
-
+    const startTimes = [...baseStartTimes];
+    const endTimes = [...baseEndTimes];
+    startTimes.push(this.spectroInfo.end_time);
+    endTimes.unshift(this.spectroInfo.start_time);
     for (let i = 0; i< startTimes.length; i += 1) {
-      const startTime = startTimes[i];
-      const endTime = endTimes[i];
+      // These are swapped because we want to mask out the area inbetween
+      const startTime = endTimes[i];
+      const endTime = startTimes[i];
       const polygon = scaleCompressedTime(startTime, endTime, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
       const newAnnotation: RectCompressedGeoJSData = {
         polygon,
@@ -120,20 +124,19 @@ export default class CompressedOverlayLayer {
   createStyle(): LayerStyle<RectCompressedGeoJSData> {
     return {
       ...{
-        strokeColor: "black",
+        strokeColor: "transparent",
         strokeWidth: 2.0,
         antialiasing: 0,
         stroke: true,
         uniformPolygon: true,
-        fill: false,
+        fill: true,
+        fillColor: "black",
+        fillOpacity: 0.75,
       },
       // Style conversion to get array objects to work in geoJS
       position: (point) => {
         return { x: point[0], y: point[1] };
       },
-      strokeColor: (_point, _index, data) => {
-        return "cyan";
-      },
     };
   }
 }
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 432c252..20ca538 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -20,6 +20,7 @@ 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});
+const viewCompressedOverlay = ref(false);
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -95,5 +96,6 @@ export default function useState() {
     nextShared,
     blackBackground,
     scaledVals,
+    viewCompressedOverlay,
   };
 }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 30ee7bd..910846c 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -54,6 +54,7 @@ export default defineComponent({
       selectedId,
       selectedType,
       scaledVals,
+      viewCompressedOverlay,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
@@ -238,6 +239,10 @@ export default defineComponent({
       selectedType.value = annotationType;
     };
 
+    const toggleCompressedOverlay = () => {
+      viewCompressedOverlay.value = ! viewCompressedOverlay.value;
+    };
+
     return {
       annotationState,
       compressed,
@@ -260,6 +265,8 @@ export default defineComponent({
       layerVisibility,
       timeRef,
       freqRef,
+      toggleCompressedOverlay,
+      viewCompressedOverlay,
       // Other user selection
       otherUserAnnotations,
       temporalAnnotations,
@@ -454,6 +461,23 @@ export default defineComponent({
               </template>
               <span> Toggle Compressed View</span>
             </v-tooltip>
+            <v-tooltip
+              v-if="!compressed"
+              bottom
+            >
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="viewCompressedOverlay ? 'blue' : ''"
+                  @click="toggleCompressedOverlay()"
+                >
+                  mdi-format-color-highlight
+                </v-icon>
+              </template>
+              <span> Highlight Compressed Areas</span>
+            </v-tooltip>
           </v-row>
         </v-container>
       </v-toolbar>