diff --git a/bats_ai/core/models/recording.py b/bats_ai/core/models/recording.py
index 0c4484e..1942730 100644
--- a/bats_ai/core/models/recording.py
+++ b/bats_ai/core/models/recording.py
@@ -34,7 +34,7 @@ def generate_spectrogram(self):
 
         # Plot and save the spectrogram
         plt.figure(figsize=(10, 4))
-        librosa.display.specshow(D, sr=sr, x_axis='time', y_axis='log')
+        librosa.display.specshow(D, sr=sr, x_axis='time', y_axis='linear')
         plt.colorbar(format='%+2.0f dB')
         plt.title('Spectrogram')
         plt.xlabel('Time')
@@ -49,4 +49,22 @@ def generate_spectrogram(self):
 
         plt.close()
 
-        return base64_image
+        start_time = 0.0
+        end_time = librosa.get_duration(y=y, sr=sr) * 1000  # in milliseconds
+        low_frequency = 0  # Set your desired low frequency
+        high_frequency = sr / 2  # Set your desired high frequency
+        image_width = 10 * 100  # 10 inches at 100 dpi
+        image_height = 4 * 100  # 4 inches at 100 dpi
+
+        # Return dictionary with all required fields
+        return {
+            'base64_spectrogram': base64_image,
+            'spectroInfo': {
+                'width': image_width,
+                'height': image_height,
+                'start_time': start_time,
+                'end_time': end_time,
+                'low_freq': low_frequency,
+                'high_freq': high_frequency,
+            },
+        }
diff --git a/bats_ai/core/views/annotations.py b/bats_ai/core/views/annotations.py
new file mode 100644
index 0000000..e647e56
--- /dev/null
+++ b/bats_ai/core/views/annotations.py
@@ -0,0 +1,38 @@
+from datetime import datetime
+import logging
+
+from django.contrib.auth.models import User
+from django.core.files.storage import default_storage
+from django.http import HttpRequest
+from ninja import File, Form, Schema
+from ninja.errors import HttpError
+from ninja.files import UploadedFile
+from ninja.pagination import RouterPaginated
+from oauth2_provider.models import AccessToken
+
+from bats_ai.core.models import Annotations
+
+logger = logging.getLogger(__name__)
+
+
+router = RouterPaginated()
+
+
+class AnnotationSchema(Schema):
+    recording: int  # Foreign Key to index
+    owner_username: str
+    start_time: int
+    end_time: int
+    low_freq: int
+    high_freq: int
+    species: list[int]
+    comments: str
+
+
+def get_owner_id(request: HttpRequest):
+    token = request.headers.get('Authorization').replace('Bearer ', '')
+    token_found = AccessToken.objects.get(token=token)
+    if not token_found:
+        raise HttpError(401, 'Authentication credentials were not provided.')
+
+    return token_found.user.pk
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 6578fad..faff64a 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -45,6 +45,7 @@ class AnnotationSchema(Schema):
     high_freq: int
     species: list[SpeciesSchema]
     comments: str
+    id: int
 
 
 def get_user(request: HttpRequest):
@@ -98,14 +99,22 @@ def get_recordings(request: HttpRequest):
 
 @router.get('/{id}/spectrogram')
 def get_spectrogram(request: HttpRequest, id: int):
+    user_id = get_user(request)
     try:
         recording = Recording.objects.get(pk=id)
     except Recording.DoesNotExist:
         return {'error': 'Recording not found'}
 
-    base64_spectrogram = recording.generate_spectrogram()
+    spectro_data = recording.generate_spectrogram()
+
+    annotations_qs = Annotations.objects.filter(recording=recording, owner=user_id)
 
-    return {'base64_spectrogram': base64_spectrogram}
+    # Serialize the annotations using AnnotationSchema
+    annotations_data = [
+        AnnotationSchema.from_orm(annotation).dict() for annotation in annotations_qs
+    ]
+    spectro_data['annotations'] = annotations_data
+    return spectro_data
 
 
 @router.get('/{id}/annotations')
@@ -118,7 +127,7 @@ def get_annotations(request: HttpRequest, id: int):
         return {'error': 'Recording not found'}
 
     # Query annotations associated with the recording
-    annotations_qs = Annotations.objects.filter(recording=recording)
+    annotations_qs = Annotations.objects.filter(recording=recording, owner=user_id)
 
     # Serialize the annotations using AnnotationSchema
     annotations_data = [
diff --git a/bats_ai/core/views/species.py b/bats_ai/core/views/species.py
index fe0bae1..fe45fd8 100644
--- a/bats_ai/core/views/species.py
+++ b/bats_ai/core/views/species.py
@@ -19,6 +19,7 @@ class SpeciesSchema(Schema):
     species: str | None
     common_name: str | None
     species_code_6: str | None
+    pk: int = None
 
 
 @router.get('/')
diff --git a/client/src/App.vue b/client/src/App.vue
index ec260bc..c31c389 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,11 +1,9 @@
 <script lang="ts">
-import { defineComponent, inject, computed, ref, watch } from 'vue';
+import { defineComponent, inject, computed, ref } from 'vue';
 import OAuthClient from '@girder/oauth-client';
-import { useRoute } from 'vue-router';
 
 export default defineComponent({
   setup() {
-    const route = useRoute();
     const oauthClient = inject<OAuthClient>('oauthClient');
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 015ae11..cbff784 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -1,7 +1,5 @@
 import axios from 'axios';
-import { GeoJsonObject } from 'geojson';
-import { createS3ffClient } from '../plugins/S3FileField';
-import { S3FileFieldProgressCallback } from 'django-s3-file-field';
+import { SpectroInfo } from '../components/geoJS/geoJSUtils';
 
 export interface PaginatedResponse<E> {
     count: number,
@@ -50,7 +48,7 @@ export interface SpectrogramAnnotation {
     start_time: number;
     end_time: number;
     low_freq: number;
-    high_feq: number;
+    high_freq: number;
     id: number;
 }
 
@@ -60,6 +58,7 @@ export interface Spectrogram {
     url?: string;
     filename?: string;
     annotations?: SpectrogramAnnotation[];
+    spectroInfo?: SpectroInfo;
 
 }
 
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index f6c73ad..e07a896 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -1,29 +1,45 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
-import geo, { GeoEvent } from "geojs";
-import { useGeoJS } from './geoJS/geoJSUtils';
+import { SpectroInfo, useGeoJS } from './geoJS/geoJSUtils';
+import { SpectrogramAnnotation } from "../api/api";
+import LayerManager from "./geoJS/LayerManager.vue";
 
 export default defineComponent({
   name: "SpectroViewer",
+  components: {
+    LayerManager
+  },
   props: {
     image: {
       type: Object as PropType<HTMLImageElement>,
       required: true,
     },
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramAnnotation[]>,
+      default: () => [],
+    }
   },
   setup(props) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
+    const initialized  = ref(false);
 
     watch(containerRef, () => {
-      const { width, height } = props.image;
+      const { naturalWidth, naturalHeight } = props.image;
       if (containerRef.value)
-      geoJS.initializeViewer(containerRef.value, width, height);
-      geoJS.drawImage(props.image, width, height);
+      geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
+      geoJS.drawImage(props.image, naturalWidth, naturalHeight);
+      initialized.value = true;
     });
 
     return {
       containerRef,
+      geoViewerRef: geoJS.getGeoViewer(),
+      initialized,
     };
   },
 });
@@ -36,6 +52,12 @@ export default defineComponent({
       ref="containerRef"
       class="playback-container"
     />
+    <layer-manager
+      v-if="initialized"
+      :geo-viewer-ref="geoViewerRef"
+      :spectro-info="spectroInfo"
+      :annotations="annotations"
+    />
   </div>
 </template>
 
@@ -49,6 +71,7 @@ export default defineComponent({
   z-index: 0;
   width:100vw;
   height: 100vh;
+  background-color: black;
 
   display: flex;
   flex-direction: column;
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 61d1d4b..3e41fe6 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent, ref, Ref } from 'vue';
-import { S3FileFieldProgress, S3FileFieldProgressState } from 'django-s3-file-field';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '../use/useRequest';
 import { uploadRecordingFile } from '../api/api';
@@ -51,6 +50,7 @@ export default defineComponent({
       emit('done');
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const updateTime = (time: any)  => {
     recordedDate.value = new Date(time as string).toISOString().split('T')[0];
   };
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index bc7e825..da6e69b 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,29 +1,38 @@
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, onMounted, PropType } from 'vue';
+import { SpectrogramAnnotation } from '../../api/api';
 import { SpectroInfo } from './geoJSUtils';
 import RectangleLayer from './layers/rectangleLayer';
 
 export default defineComponent({
     name:'LayerManager',
     props: {
-        geoJSRef: {
+        geoViewerRef: {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             type: Object as PropType<any>,
             required: true,
         },
         spectroInfo: {
-            type: Object as PropType<SpectroInfo>,
-            required: true,
+            type: Object as PropType<SpectroInfo | undefined>,
+            default: () => undefined
+        },
+        annotations: {
+            type: Array as PropType<SpectrogramAnnotation[]>,
+            default: () => [],
         }
     },
     setup(props) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
         const event = (type: string, data: any) => {
             // Will handle clicking, selecting and editing here
-            //console.log(type);
-            //console.log(data);
         };
-        const rectAnnotationLayer = new RectangleLayer(props.geoJSRef, event, props.spectroInfo);
+        onMounted(() => {
+            if (props.spectroInfo) {
+                const rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
+                rectAnnotationLayer.formatData(props.annotations);
+                rectAnnotationLayer.redraw();
+            }
+        });
 
         return {
             
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index f92486b..3af9073 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -16,6 +16,10 @@ const useGeoJS = () => {
         right: 1,
     };
 
+    const getGeoViewer = () => {
+        return geoViewer;
+    };
+
     const initializeViewer = (sourceContainer: HTMLElement, width: number, height: number) => {
         container.value = sourceContainer;
         const params = geo.util.pixelCoordinateParams(
@@ -137,6 +141,7 @@ const useGeoJS = () => {
     };
 
     return {
+        getGeoViewer,
         initializeViewer,
         drawImage,
         resetMapDimensions,
@@ -156,23 +161,22 @@ export interface SpectroInfo {
 }
 function spectroToGeoJSon(annotation: SpectrogramAnnotation, spectroInfo: SpectroInfo): GeoJSON.Polygon  {
     //scale pixels to time and frequency ranges
-    const widthScale =  spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale =   spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
     const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
-    const low_freq = annotation.low_freq * heightScale;
-    const high_freq = annotation.high_feq * heightScale;
+    const low_freq = spectroInfo.height - (annotation.low_freq * heightScale);
+    const high_freq = spectroInfo.height - (annotation.high_freq * heightScale);
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
-
     return {
         type: 'Polygon',
-        coordinates: [
+        coordinates: [  
             [
-              [start_time, high_freq],
               [start_time, low_freq],
-              [end_time, low_freq],
-              [end_time, high_freq],
               [start_time, high_freq],
+              [end_time, high_freq],
+              [end_time, low_freq],
+              [start_time, low_freq],
             ],
           ],
       
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
new file mode 100644
index 0000000..b9fad24
--- /dev/null
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -0,0 +1,552 @@
+/*eslint class-methods-use-this: "off"*/
+import geo, { GeoEvent } from "geojs";
+import { SpectroInfo, spectroToGeoJSon, reOrdergeoJSON } from "../geoJSUtils";
+import { SpectrogramAnnotation } from "../../../api/api";
+import { LayerStyle } from "./types";
+import { GeoJSON } from "geojson";
+
+export type EditAnnotationTypes = "rectangle";
+interface EditAnnotationLayerParams {
+  type: EditAnnotationTypes;
+}
+
+interface RectGeoJSData {
+  id: number;
+  selected: boolean;
+  editing: boolean | string;
+  polygon: GeoJSON.Polygon;
+}
+
+interface EditHandleStyle {
+  type: string;
+  x: number;
+  y: number;
+  index: number;
+  editHandle: boolean;
+}
+
+const typeMapper = new Map([
+  ["LineString", "line"],
+  ["Polygon", "polygon"],
+  ["Point", "point"],
+  ["rectangle", "rectangle"],
+]);
+
+/**
+ * correct matching of drag handle to cursor direction relies on strict ordering of
+ * vertices within the GeoJSON coordinate list using utils.reOrdergeoJSON()
+ * and utils.reOrderBounds()
+ */
+const rectVertex = ["sw-resize", "nw-resize", "ne-resize", "se-resize"];
+const rectEdge = ["w-resize", "n-resize", "e-resize", "s-resize"];
+/**
+ * This class is used to edit annotations within the viewer
+ * It will do and display different things based on it either being in
+ * rectangle or edit modes
+ * Basic operation is that changedData will start the edited annotation
+ * emits 'update:geojson' when data is changed
+ */
+export default class EditAnnotationLayer {
+  skipNextExternalUpdate: boolean;
+
+  _mode: "editing" | "creation";
+
+  type: EditAnnotationTypes;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  featureLayer: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  style: LayerStyle<RectGeoJSData>;
+
+  formattedData: GeoJSON.Feature[];
+
+  styleType?: string;
+
+  selectedKey?: string;
+
+  selectedHandleIndex: number;
+
+  hoverHandleIndex: number;
+
+  disableModeSync: boolean; //Disables fallthrough mouse clicks when ending an annotation
+
+  leftButtonCheckTimeout: number; //Fallthough mouse down when ending lineStrings
+
+  /* in-progress events only emitted for lines and polygons */
+  shapeInProgress: GeoJSON.LineString | GeoJSON.Polygon | null;
+
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geoViewerRef: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
+    (this.geoViewerRef = geoViewerRef), (this.event = event);
+    this.type = "rectangle";
+    this.style =  {
+        strokeColor: 'black',
+        strokeWidth: 1.0,
+        antialiasing: 0,
+      };
+    this.formattedData = [];
+    this.spectroInfo = spectroInfo;
+    this.skipNextExternalUpdate = false;
+    this._mode = "editing";
+    this.selectedKey = "";
+    this.selectedHandleIndex = -1;
+    this.hoverHandleIndex = -1;
+    this.shapeInProgress = null;
+    this.disableModeSync = false;
+    this.leftButtonCheckTimeout = -1;
+
+    //Only initialize once, prevents recreating Layer each edit
+    this.initialize();
+  }
+
+  /**
+   * Initialization of the layer should only be done once for edit layers
+   * Handlers for edit_action and state which will emit data when necessary
+   */
+  initialize() {
+    if (!this.featureLayer) {
+      this.featureLayer = this.geoViewerRef.createLayer("annotation", {
+        clickToEdit: true,
+        showLabels: false,
+        continuousPointProximity: false,
+        finalPointProximity: 1,
+        adjacentPointProximity: 1,
+      });
+      // For these we need to use an anonymous function to prevent geoJS from erroring
+      this.featureLayer.geoOn(geo.event.annotation.edit_action, (e: GeoEvent) =>
+        this.handleEditAction(e)
+      );
+      this.featureLayer.geoOn(geo.event.annotation.state, (e: GeoEvent) =>
+        this.handleEditStateChange(e)
+      );
+      //Event name is misleading, this means hovering over an edit handle
+      this.featureLayer.geoOn(geo.event.annotation.select_edit_handle, (e: GeoEvent) =>
+        this.hoverEditHandle(e)
+      );
+      this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
+        //Used to sync clicks that kick out of editing mode with application
+        //This prevents that pseudo Edit state when left clicking on a object in edit mode
+        if (
+          !this.disableModeSync &&
+          e.buttonsDown.left &&
+          this.getMode() === "disabled" &&
+          this.featureLayer.annotations()[0]
+        ) {
+          this.event("editing-annotation-sync", { edit: FontFaceSetLoadEvent });
+        } else if (e.buttonsDown.left) {
+          const newIndex = this.hoverHandleIndex;
+          // Click features like a toggle: unselect if it's clicked twice.
+          if (newIndex === this.selectedHandleIndex) {
+            this.selectedHandleIndex = -1;
+          } else {
+            this.selectedHandleIndex = newIndex;
+          }
+          window.setTimeout(() => this.redraw(), 0); //Redraw timeout to update the selected handle
+        }
+        this.disableModeSync = false;
+      });
+      this.featureLayer.geoOn(geo.event.actiondown, (e: GeoEvent) => this.setShapeInProgress(e));
+    }
+  }
+
+  skipNextFunc() {
+    return () => {
+      this.skipNextExternalUpdate = true;
+    };
+  }
+
+  /**
+   * 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
+   */
+  setShapeInProgress(e: GeoEvent) {
+    // Allow middle click movement when placing points
+    if (e.mouse.buttons.middle && !e.propogated) {
+      return;
+    }
+    if (this.getMode() === "creation" && ["LineString", "Polygon"].includes(this.type)) {
+      if (this.shapeInProgress === null) {
+        // Initialize a new in-progress shape
+        this.shapeInProgress = {
+          type: "Polygon",
+          coordinates: [[]],
+        };
+      }
+      // Update the coordinates of the existing shape
+      const newPoint: GeoJSON.Position = [Math.round(e.mouse.geo.x), Math.round(e.mouse.geo.y)];
+      const coords = this.shapeInProgress?.coordinates as GeoJSON.Position[][];
+      // Magic 0: there can only be a single polygon in progress at a time
+      coords[0].push(newPoint);
+      this.event("update:geojson", {
+        status: "in-progress",
+        complete: false,
+        selecktedKey: this.selectedKey,
+        geoJSON: this.shapeInProgress,
+      });
+      // triggers a mouse up while editing to make it seem like a point was placed
+      window.setTimeout(
+        () =>
+          this.geoViewerRef
+            .interactor()
+            .simulateEvent("mouseup", {
+              map: { x: e.mouse.geo.x, y: e.mouse.geo.y },
+              button: "left",
+            }),
+        0
+      );
+    } else if (this.shapeInProgress) {
+      this.shapeInProgress = null;
+    }
+  }
+
+  hoverEditHandle(e: GeoEvent) {
+    const divisor = 2; //For Polygons we skip over edge handles (midpoints)
+    if (e.enable && e.handle.handle.type === "vertex") {
+      if (e.handle.handle.selected && e.handle.handle.index * divisor !== this.hoverHandleIndex) {
+        this.hoverHandleIndex = e.handle.handle.index * divisor;
+      }
+      if (!e.handle.handle.selected) {
+        this.hoverHandleIndex = -1;
+      }
+    } else if (e.enable && e.handle.handle.type === "center") {
+      this.hoverHandleIndex = -1;
+    }
+    if (e.enable) {
+      if (e.handle.handle.type === "vertex") {
+        this.event("update:cursor", { cursor: rectVertex[e.handle.handle.index] });
+      } else if (e.handle.handle.type === "edge") {
+        this.event("update:cursor", { cursor: rectEdge[e.handle.handle.index] });
+      }
+      if (e.handle.handle.type === "center") {
+        this.event("update:cursor", { cursor: "move" });
+      } else if (e.handle.handle.type === "resize") {
+        this.event("update:cursor", { cursor: "nwse-resize" });
+      }
+    } else if (this.getMode() !== "creation") {
+      this.event("update:cursor", { cursor: "default" });
+    }
+  }
+
+  applyStylesToAnnotations() {
+    const annotation = this.featureLayer.annotations()[0];
+    //Setup styling for rectangle and point editing
+    if (annotation) {
+      annotation.style(this.createStyle());
+      annotation.editHandleStyle(this.editHandleStyle());
+      annotation.highlightStyle(this.highlightStyle());
+    }
+    return annotation;
+  }
+
+  setKey(key: string) {
+    if (typeof key === "string") {
+      this.selectedKey = key;
+    } else {
+      throw new Error(`${key} is invalid`);
+    }
+  }
+
+  /**
+   * Provides whether the user is creating a new annotation or editing one
+   */
+  getMode(): "creation" | "editing" | "disabled" {
+    const layermode = this.featureLayer.mode();
+    return layermode ? this._mode : "disabled";
+  }
+
+  /**
+   * Change the layer mode
+   */
+  setMode(mode: EditAnnotationTypes | null, geom?: GeoJSON.Feature) {
+    if (mode !== null) {
+      let newLayerMode: string;
+      if (geom) {
+        this._mode = "editing";
+        newLayerMode = "edit";
+        this.event("update:cursor", { cursor: "default" });
+      } else if (typeMapper.has(mode)) {
+        this._mode = "creation";
+        newLayerMode = typeMapper.get(mode) as string;
+        this.event("update:cursor", { cursor: "crosshair" });
+      } else {
+        throw new Error(`No such mode ${mode}`);
+      }
+      this.featureLayer.mode(newLayerMode, geom);
+    } else {
+      this.featureLayer.mode(null);
+    }
+  }
+
+  calculateCursorImage() {
+    if (this.getMode() === "creation") {
+      // TODO:  we may want to make this more generic or utilize the icons from editMenu
+      this.event("update:cursor", { cursor: "mdi-vector-rectangle" });
+    }
+  }
+
+  /**
+   * Removes the current annotation and resets the mode when completed editing
+   */
+  disable() {
+    if (this.featureLayer) {
+      this.skipNextExternalUpdate = false;
+      this.setMode(null);
+      this.featureLayer.removeAllAnnotations(false);
+      this.shapeInProgress = null;
+      if (this.selectedHandleIndex !== -1) {
+        this.selectedHandleIndex = -1;
+        this.hoverHandleIndex = -1;
+        this.event("update:selectedIndex", {
+          selectedIndex: this.selectedHandleIndex,
+          selectedKey: this.selectedKey,
+        });
+      }
+      this.event("update:cursor", { cursor: "default" });
+    }
+  }
+
+  /** overrides default function to disable and clear anotations before drawing again */
+  async changeData(frameData: SpectrogramAnnotation) {
+    if (this.skipNextExternalUpdate === false) {
+      // disable resets things before we load a new/different shape or mode
+      this.disable();
+      //TODO: Find a better way to track mouse up after placing a point or completing geometry
+      //For line drawings and the actions of any recipes we want
+      if (this.geoViewerRef.interactor().mouse().buttons.left) {
+        this.leftButtonCheckTimeout = window.setTimeout(() => this.changeData(frameData), 20);
+      } else {
+        clearTimeout(this.leftButtonCheckTimeout);
+        this.formatData(frameData);
+      }
+    } else {
+      // prevent was called and it has prevented this update.
+      // disable the skip for next time.
+      this.skipNextExternalUpdate = false;
+    }
+    this.calculateCursorImage();
+    this.redraw();
+  }
+
+  /**
+   *
+   * @param frameData a single FrameDataTrack Array that is the editing item
+   */
+  formatData(annotationData: SpectrogramAnnotation) {
+    this.selectedHandleIndex = -1;
+    this.hoverHandleIndex = -1;
+    this.event("update:selectedIndex", {
+      selectedIndex: this.selectedHandleIndex,
+      selectedKey: this.selectedKey,
+    });
+    const geoJSONData = spectroToGeoJSon(annotationData, this.spectroInfo);
+    const geojsonFeature: GeoJSON.Feature = {
+      type: "Feature",
+      geometry: geoJSONData,
+      properties: {
+        annotationType: typeMapper.get(this.type),
+      },
+    };
+    this.featureLayer.geojson(geojsonFeature);
+    const annotation = this.applyStylesToAnnotations();
+    this.setMode("rectangle", annotation);
+    this.formattedData = [geojsonFeature];
+  }
+
+  /**
+   *
+   * @param e geo.event emitting by handlers
+   */
+  handleEditStateChange(e: GeoEvent) {
+    if (this.featureLayer === e.annotation.layer()) {
+      // Only calls this once on completion of an annotation
+      if (e.annotation.state() === "done" && this.getMode() === "creation") {
+        const geoJSONData = [e.annotation.geojson()];
+        if (this.type === "rectangle") {
+          geoJSONData[0].geometry.coordinates[0] = reOrdergeoJSON(
+            geoJSONData[0].geometry.coordinates[0] as GeoJSON.Position[]
+          );
+        }
+        this.formattedData = geoJSONData;
+        // The new annotation is in a state without styling, so apply local stypes
+        this.applyStylesToAnnotations();
+        //This makes sure the click for the end point doesn't kick us out of the mode
+        this.disableModeSync = true;
+
+        this.event("update:geojson", {
+          status: "editing",
+          creating: this.getMode() === "creation",
+          type: this.type,
+          selectedKey: this.selectedKey,
+        });
+      }
+    }
+  }
+
+  /**
+   * If we release the mouse after movement we want to signal for the annotation to update
+   * @param e geo.event
+   */
+  handleEditAction(e: GeoEvent) {
+    if (this.featureLayer === e.annotation.layer()) {
+      if (e.action === geo.event.actionup) {
+        // This will commit the change to the current annotation on mouse up while editing
+        if (e.annotation.state() === "edit") {
+          const newGeojson: GeoJSON.Feature<GeoJSON.Point | GeoJSON.Polygon | GeoJSON.LineString> =
+            e.annotation.geojson();
+          if (this.formattedData.length > 0) {
+            if (this.type === "rectangle") {
+              /* Updating the corners for the proper cursor icons
+              Also allows for regrabbing of the handle */
+              newGeojson.geometry.coordinates[0] = reOrdergeoJSON(
+                newGeojson.geometry.coordinates[0] as GeoJSON.Position[]
+              );
+              // The corners need to update for the indexes to update
+              // coordinates are in a different system than display
+              const coords = (newGeojson.geometry.coordinates[0]  as GeoJSON.Position[]).map((coord) => ({
+                x: coord[0],
+                y: coord[1],
+              }));
+              // only use the 4 coords instead of 5
+              const remapped = this.geoViewerRef.worldToGcs(coords.splice(0, 4));
+              e.annotation.options("corners", remapped);
+              //This will retrigger highlighting of the current handle after releasing the mouse
+              setTimeout(() => this.geoViewerRef.interactor().retriggerMouseMove(), 0);
+            }
+            // update existing feature
+            this.formattedData[0].geometry = newGeojson.geometry;
+          } else {
+            // create new feature
+            this.formattedData = [
+              {
+                ...newGeojson,
+                properties: {
+                  annotationType: this.type,
+                },
+                type: "Feature",
+              },
+            ];
+          }
+          this.event("update:geojson", {
+            status: "editing",
+            creating: this.getMode() === "creation",
+            geoJSON: this.formattedData[0],
+            type: this.type,
+            selectedKey: this.selectedKey,
+          });
+          }
+      }
+    }
+  }
+
+  /**
+   * Drawing for annotations are handled during initialization they don't need the standard redraw
+   * function from BaseLayer
+   */
+  redraw() {
+    this.applyStylesToAnnotations();
+    this.featureLayer.draw();
+
+    return null;
+  }
+
+  /**
+   * The base style used to represent the annotation
+   */
+  createStyle(): LayerStyle<GeoJSON.Feature> {
+    return {
+      ...{
+        strokeColor: "black",
+        strokeWidth: 4.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+      },
+      fill: false,
+      strokeColor: "red",
+    };
+  }
+
+  /**
+   * Styling for the handles used to drag the annotation for ediing
+   */
+  editHandleStyle() {
+    if (this.type === "rectangle") {
+      return {
+        handles: {
+          rotate: false,
+        },
+      };
+    }
+    if (this.type === "Point") {
+      return {
+        handles: false,
+      };
+    }
+    if (this.type === "Polygon" || this.type === "LineString") {
+      return {
+        handles: {
+          rotate: false,
+          edge: this.type !== "LineString",
+        },
+        fill: true,
+        radius: (handle: EditHandleStyle): number => {
+          if (handle.type === "edge") {
+            return 5;
+          }
+          return 8;
+        },
+        fillOpacity: (_: EditHandleStyle, index: number) => {
+          if (index === this.selectedHandleIndex) {
+            return 1;
+          }
+          return 0.25;
+        },
+        strokeColor: "red",
+        fillColor: "red",
+      };
+    }
+    return {
+      handles: {
+        rotate: false,
+      },
+    };
+  }
+
+  /**
+   * Should never have highlighting enabled but this will remove any highlighting style
+   * from the annotation.  NOTE: this will not remove styling from handles
+   */
+  highlightStyle() {
+    if (this.type === "rectangle" || this.type === "Polygon") {
+      return {
+        handles: {
+          rotate: false,
+        },
+      };
+    }
+    if (this.type === "Point") {
+      return {
+        stroke: false,
+      };
+    }
+    return {
+      handles: {
+        rotate: false,
+      },
+    };
+  }
+}
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index a8287e3..783062f 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -2,6 +2,7 @@
 import geo, { GeoEvent } from 'geojs';
 import { SpectroInfo, spectroToGeoJSon } from '../geoJSUtils';
 import { SpectrogramAnnotation } from '../../../api/api';
+import { LayerStyle } from './types';
 
 interface RectGeoJSData{
   id: number;
@@ -10,31 +11,6 @@ interface RectGeoJSData{
   polygon: GeoJSON.Polygon;
 }
 
-// eslint-disable-next-line max-len
-export type StyleFunction<T, D> = T | ((point: [number, number], index: number, data: D) => T | undefined);
-export type ObjectFunction<T, D> = T | ((data: D, index: number) => T | undefined);
-export type PointFunction<T, D> = T | ((data: D) => T | undefined);
-
-export interface LayerStyle<D> {
-    strokeWidth?: StyleFunction<number, D> | PointFunction<number, D>;
-    strokeOffset?: StyleFunction<number, D> | PointFunction<string, D>;
-    strokeOpacity?: StyleFunction<number, D> | PointFunction<string, D>;
-    strokeColor?: StyleFunction<string, D> | PointFunction<string, D>;
-    fillColor?: StyleFunction<string, D> | PointFunction<string, D>;
-    fillOpacity?: StyleFunction<number, D> | PointFunction<number, D>;
-    position?: (point: [number, number]) => { x: number; y: number };
-    color?: (data: D) => string;
-    textOpacity?: (data: D) => number;
-    fontSize?: (data: D) => string | undefined;
-    offset?: (data: D) => { x: number; y: number };
-    fill?: ObjectFunction<boolean, D> | boolean;
-    radius?: PointFunction<number, D> | number;
-    textAlign?: ((data: D) => string) | string;
-    textScaled?: ((data: D) => number | undefined) | number | undefined;
-    [x: string]: unknown;
-  }
-  
-
 export default class RectangleLayer{
     formattedData: RectGeoJSData[];
 
@@ -54,6 +30,8 @@ export default class RectangleLayer{
 
     spectroInfo: SpectroInfo;
 
+    style: LayerStyle<RectGeoJSData>;
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(geoViewerRef: any, event: (name: string, data: any) => void, spectroInfo: SpectroInfo) {
     this.geoViewerRef = geoViewerRef;
@@ -64,11 +42,7 @@ export default class RectangleLayer{
       this.selectedIndex = [];
       this.event = event;
       //Only initialize once, prevents recreating Layer each edit
-      this.initialize();
-    }
-
-    initialize() {
-      const layer = this.geoViewerRef.value.createLayer('feature', {
+      const layer = this.geoViewerRef.createLayer('feature', {
         features: ['polygon'],
       });
       this.featureLayer = layer
@@ -98,6 +72,7 @@ export default class RectangleLayer{
             this.event('annotation-clicked', { id: null, edit: false });
         }
       });
+      this.style = this.createStyle();
     }
 
     hoverAnnotations(e: GeoEvent) {
@@ -146,13 +121,15 @@ export default class RectangleLayer{
         arr.push(newAnnotation);
 
       });
-      return arr;
+      this.formattedData = arr;
     }
 
     redraw() {
+        // add some styles
       this.featureLayer
         .data(this.formattedData)
         .polygon((d: RectGeoJSData) => d.polygon.coordinates[0])
+        .style(this.createStyle())
         .draw();
     }
 
@@ -163,15 +140,22 @@ export default class RectangleLayer{
     }
 
     createStyle(): LayerStyle<RectGeoJSData> {
-      return {
-        // Style conversion to get array objects to work in geoJS
-        position: (point) => ({ x: point[0], y: point[1] }),
-        strokeColor: (_point, _index, data) => {
-          if (data.selected) {
-            return 'cyan';
-          }
-          return 'red';
-        },
-      };
-    }
+        return {
+            ...{
+                strokeColor: 'black',
+                strokeWidth: 4.0,
+                antialiasing: 0,
+                stroke: true,
+                uniformPolygon: true,
+                fill: false,      
+            },
+            // Style conversion to get array objects to work in geoJS
+            position: (point) => {
+                return ({ x: point[0], y: point[1] });
+            },
+            strokeColor: (_point, _index, data) => {
+              
+              return 'red';
+            },          };
+        }
 }
diff --git a/client/src/components/geoJS/layers/types.ts b/client/src/components/geoJS/layers/types.ts
new file mode 100644
index 0000000..d0fec29
--- /dev/null
+++ b/client/src/components/geoJS/layers/types.ts
@@ -0,0 +1,22 @@
+export type StyleFunction<T, D> = T | ((point: [number, number], index: number, data: D) => T | undefined);
+export type ObjectFunction<T, D> = T | ((data: D, index: number) => T | undefined);
+export type PointFunction<T, D> = T | ((data: D) => T | undefined);
+
+export interface LayerStyle<D> {
+    strokeWidth?: StyleFunction<number, D> | PointFunction<number, D>;
+    strokeOffset?: StyleFunction<number, D> | PointFunction<string, D>;
+    strokeOpacity?: StyleFunction<number, D> | PointFunction<string, D>;
+    strokeColor?: StyleFunction<string, D> | PointFunction<string, D>;
+    fillColor?: StyleFunction<string, D> | PointFunction<string, D>;
+    fillOpacity?: StyleFunction<number, D> | PointFunction<number, D>;
+    position?: (point: [number, number]) => { x: number; y: number };
+    color?: (data: D) => string;
+    textOpacity?: (data: D) => number;
+    fontSize?: (data: D) => string | undefined;
+    offset?: (data: D) => { x: number; y: number };
+    fill?: ObjectFunction<boolean, D> | boolean;
+    radius?: PointFunction<number, D> | number;
+    textAlign?: ((data: D) => string) | string;
+    textScaled?: ((data: D) => number | undefined) | number | undefined;
+    [x: string]: unknown;
+  }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 4b6b54f..d8dc192 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent, onMounted, Ref, ref, } from 'vue';
-import { getSpectrogram } from '../api/api';
+import { getSpectrogram, SpectrogramAnnotation } from '../api/api';
 import SpectrogramViewer from '../components/SpectrogramViewer.vue';
+import { SpectroInfo } from '../components/geoJS/geoJSUtils';
 
 export default defineComponent({
   name: "Spectrogram",
@@ -16,17 +17,22 @@ export default defineComponent({
   },
   setup(props) {
     const image: Ref<HTMLImageElement> = ref(new Image());
+    const spectroInfo: Ref<SpectroInfo | undefined> = ref();
+    const annotations: Ref<SpectrogramAnnotation[] | undefined> = ref([]);
     const loadedImage = ref(false);
     const loadData = async () => {
       const response = await getSpectrogram(props.id);
       image.value.src = `data:image/png;base64,${response.data['base64_spectrogram']}`;
-      
+      spectroInfo.value = response.data['spectroInfo'];
+      annotations.value = response.data['annotations'];
       loadedImage.value = true;
     };
     onMounted(() => loadData());
     return { 
       loadedImage,
       image,
+      spectroInfo,
+      annotations,
     };
   },
 });
@@ -36,5 +42,7 @@ export default defineComponent({
   <spectrogram-viewer
     v-if="loadedImage"
     :image="image"
+    :spectro-info="spectroInfo"
+    :annotations="annotations"
   />
 </template>