diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index faff64a..f77aae0 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -48,6 +48,16 @@ class AnnotationSchema(Schema):
     id: int
 
 
+class UpdateAnnotationsSchema(Schema):
+    start_time: int | None
+    end_time: int | None
+    low_freq: int | None
+    high_freq: int | None
+    species: list[SpeciesSchema] | None
+    comments: str | None
+    id: int | None
+
+
 def get_user(request: HttpRequest):
     auth_header = request.headers.get('Authorization', None)
     if auth_header is not None:
@@ -179,7 +189,7 @@ def patch_annotation(
     request,
     recording_id: int,
     id: int,
-    annotation: AnnotationSchema,
+    annotation: UpdateAnnotationsSchema,
     species_ids: list[int],
 ):
     user_id = get_user(request)
@@ -193,11 +203,16 @@ def patch_annotation(
         return {'error': 'Annotation not found'}
 
     # Update annotation details
-    annotation_instance.start_time = annotation.start_time
-    annotation_instance.end_time = annotation.end_time
-    annotation_instance.low_freq = annotation.low_freq
-    annotation_instance.high_freq = annotation.high_freq
-    annotation_instance.comments = annotation.comments
+    if annotation.start_time:
+        annotation_instance.start_time = annotation.start_time
+    if annotation.end_time:
+        annotation_instance.end_time = annotation.end_time
+    if annotation.low_freq:
+        annotation_instance.low_freq = annotation.low_freq
+    if annotation.high_freq:
+        annotation_instance.high_freq = annotation.high_freq
+    if annotation.comments:
+        annotation_instance.comments = annotation.comments
     annotation_instance.save()
 
     # Clear existing species associations
diff --git a/client/package-lock.json b/client/package-lock.json
index 37a77c2..d05e0be 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,6 +16,7 @@
         "d3": "^7.8.5",
         "django-s3-file-field": "^1.0.0",
         "geojs": "^1.11.1",
+        "lodash": "^4.17.21",
         "vue": "^3.3.1",
         "vue-router": "^4.0.12",
         "vuetify": "^3.3.12"
@@ -23,6 +24,7 @@
       "devDependencies": {
         "@types/geojson": "^7946.0.13",
         "@types/jest": "^27.4.1",
+        "@types/lodash": "^4.14.202",
         "@vitejs/plugin-vue": "^2.2.0",
         "@vue/eslint-config-typescript": "^10.0.0",
         "@vuetify/vite-plugin": "^1.0.0-alpha.10",
@@ -3065,6 +3067,12 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "devOptional": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
diff --git a/client/package.json b/client/package.json
index a6275bd..652ce37 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,6 +21,7 @@
     "d3": "^7.8.5",
     "django-s3-file-field": "^1.0.0",
     "geojs": "^1.11.1",
+    "lodash": "^4.17.21",
     "vue": "^3.3.1",
     "vue-router": "^4.0.12",
     "vuetify": "^3.3.12"
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@types/geojson": "^7946.0.13",
     "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.202",
     "@vitejs/plugin-vue": "^2.2.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vuetify/vite-plugin": "^1.0.0-alpha.10",
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index cbff784..19662e3 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -42,6 +42,7 @@ export interface Species {
     genus: string;
     common_name: string;
     species_code_6?: string;
+    id: number;
 }
 
 export interface SpectrogramAnnotation {
@@ -50,8 +51,21 @@ export interface SpectrogramAnnotation {
     low_freq: number;
     high_freq: number;
     id: number;
+    editing?: boolean;
+    species?: Species[];
+    comments?: string;
 }
 
+export interface UpdateSpectrogramAnnotation {
+    start_time?: number;
+    end_time?: number;
+    low_freq?: number;
+    high_freq?: number;
+    id?: number;
+    editing?: boolean;
+    species?: Species[];
+    comments?: string;
+}
 
 export interface Spectrogram {
     'base64_spectrogram': string;
@@ -106,9 +120,34 @@ async function getSpectrogram(id: string) {
     return axiosInstance.get<Spectrogram>(`/recording/${id}/spectrogram`);
 }
 
+async function getAnnotations(recordingId: string) {
+    return axiosInstance.get<SpectrogramAnnotation[]>(`/recording/${recordingId}/annotations`);
+
+}
+
+async function getSpecies() {
+    return axiosInstance.get<Species[]>('/species/');
+}
+
+async function patchAnnotation(recordingId: string, annotationId: number, annotation: UpdateSpectrogramAnnotation, speciesList: number[] = []) {
+    return axiosInstance.patch(`/recording/${recordingId}/annotations/${annotationId}`, { annotation, species_ids: speciesList});
+}
+
+async function putAnnotation(recordingId: string, annotation: UpdateSpectrogramAnnotation, speciesList: number[] = []) {
+    return axiosInstance.put<{message: string, id: number}>(`/recording/${recordingId}/annotations`, { annotation, species_ids: speciesList});
+}
+
+async function deleteAnnotation(recordingId: string, annotationId: number) {
+    return axiosInstance.delete(`/recording/${recordingId}/annotations/${annotationId}`);
+}
 
 export {
  uploadRecordingFile,
  getRecordings,
  getSpectrogram,
+ getSpecies,
+ getAnnotations,
+ patchAnnotation,
+ putAnnotation,
+ deleteAnnotation
 };
\ No newline at end of file
diff --git a/client/src/components/AnnotationEditor.vue b/client/src/components/AnnotationEditor.vue
new file mode 100644
index 0000000..1245061
--- /dev/null
+++ b/client/src/components/AnnotationEditor.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { deleteAnnotation, patchAnnotation, Species, SpectrogramAnnotation } from "../api/api";
+
+export default defineComponent({
+  name: "AnnotationEditor",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotation: {
+      type: Object as PropType<SpectrogramAnnotation | null>,
+      default: () => null,
+    },
+    species: {
+        type: Array as PropType<Species[]>,
+        required: true,
+    },
+    recordingId: {
+        type: String,
+        required: true,
+    }
+  },
+  emits: ['update:annotation', 'delete:annotation'],
+  setup(props, { emit }) {
+    const speciesList = computed(() => {
+        return props.species.map((item) => (item.common_name));
+    });
+    const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.common_name) || []);
+    const comments: Ref<string> = ref(props.annotation?.comments || '');
+    watch(() => props.annotation, () => {
+        if (props.annotation?.species) {
+            speciesEdit.value = props.annotation.species.map((item) => item.common_name);
+        }
+        if (props.annotation?.comments) {
+            comments.value = props.annotation.comments;
+        }
+    });
+    const updateAnnotation = async () => {
+        if (props.annotation) {
+            // convert species names to Ids;
+            const speciesIds: number[] = [];
+            speciesEdit.value.forEach((item) => {
+                const found = props.species.find((specie) => specie.common_name === item);
+                if (found) {
+                    speciesIds.push(found.id);
+                }
+            });
+            await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value }, speciesIds );
+            // Signal to redownload the updated annotation values if possible
+            emit('update:annotation');
+        }
+
+    };
+
+    const deleteAnno = async () => {
+        if (props.annotation && props.recordingId) {
+            await deleteAnnotation(props.recordingId, props.annotation.id);
+            emit('delete:annotation');
+        }
+    };
+    return {
+        speciesList,
+        speciesEdit,
+        comments,
+        updateAnnotation,
+        deleteAnno
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row class="pa-2">
+        Edit Annotations
+        <v-spacer />
+        <v-btn
+          size="x-small"
+          color="error"
+          class="mt-1"
+          @click="deleteAnno()"
+        >
+          Delete<v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+    <v-row>
+      <v-select
+        v-model="speciesEdit"
+        multiple
+        closable-chips
+        chips
+        :items="speciesList"
+        label="Species"
+        @update:model-value="updateAnnotation()"
+      />
+    </v-row>
+    <v-row>
+      <v-textarea
+        v-model="comments"
+        label="Comments"
+        @change="updateAnnotation()"
+      />
+    </v-row>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
new file mode 100644
index 0000000..47dbdf8
--- /dev/null
+++ b/client/src/components/AnnotationList.vue
@@ -0,0 +1,115 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { SpectrogramAnnotation } from "../api/api";
+import useState from "../use/useState";
+
+export default defineComponent({
+  name: "AnnotationList",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramAnnotation[]>,
+      default: () => [],
+    },
+    selectedId: {
+        type: Number as PropType<number | null>,
+        default: null,
+    }
+  },
+  emits: ['select'],
+  setup() {
+    const { annotationState, setAnnotationState } = useState();
+    return {
+        annotationState,
+        setAnnotationState,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="pa-0 ma-0">
+    <v-card-title>
+      <v-row class="pa-2">
+        Annotations
+        <v-spacer />
+        <v-btn
+          :disabled="annotationState === 'creating'"
+          @click="annotationState = 'creating'"
+        >
+          Add<v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+    <v-list>
+      <v-list-item
+        v-for="annotation in annotations"
+        :key="annotation.id"
+        :class="{selected: annotation.id===selectedId}"
+        class="d-flex flex-column align-start"
+        @click="$emit('select', annotation.id)"
+      >
+        <v-row>
+          <v-col
+            class="annotation-id"
+          >
+            {{ annotation.id }}
+          </v-col>
+          <v-col class="annotation-time">
+            <span>{{ annotation.start_time }}ms to {{ annotation.end_time }}ms </span>
+          </v-col>
+          <v-col class="annotation-freq">
+            <span>{{ annotation.low_freq }}hz to {{ annotation.high_freq }}hz </span>
+          </v-col>
+        </v-row>
+        <v-row
+          v-for="item in annotation.species"
+          :key="`${annotation.id}_${item.common_name}`"
+        >
+          <v-col>
+            <div class="species-name">
+              {{ item.common_name }}
+            </div>
+            <div
+              v-if="item.family"
+              class="species-hierarchy"
+            >
+              <span> {{ item.family }}</span>
+              <span v-if="item.genus">-></span>
+              <span v-if="item.genus">{{ item.genus }}</span>
+            </div>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+.annotation-id {
+    cursor:pointer;
+    text-decoration: underline;
+}
+.annotation-time {
+    font-size: 0.7em;
+}
+.annotation-freq {
+    font-size: 0.7em;
+}
+.species-name {
+    font-weight: bold;
+    font-size: 0.7em;
+}
+.species-hierarchy {
+    font-size: 0.5em;
+}
+.selected {
+    background-color: cyan;
+}
+</style>
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index e07a896..807046b 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
 import { SpectroInfo, useGeoJS } from './geoJS/geoJSUtils';
-import { SpectrogramAnnotation } from "../api/api";
+import { patchAnnotation, putAnnotation, SpectrogramAnnotation } from "../api/api";
 import LayerManager from "./geoJS/LayerManager.vue";
 
 export default defineComponent({
@@ -21,9 +21,18 @@ export default defineComponent({
     annotations: {
       type: Array as PropType<SpectrogramAnnotation[]>,
       default: () => [],
+    },
+    selectedId: {
+        type: Number as PropType<number | null>,
+        default: null,
+    },
+    recordingId: {
+      type: String as PropType<string | null>,
+      required: true,
     }
   },
-  setup(props) {
+  emits: ['update:annotation', 'create:annotation', 'selected'],
+  setup(props, { emit }) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized  = ref(false);
@@ -36,10 +45,29 @@ export default defineComponent({
       initialized.value = true;
     });
 
+    const updateAnnotation = async (annotation: SpectrogramAnnotation) => {
+      // We call the patch on the selected annotation
+      if (props.recordingId !== null && props.selectedId !== null) {
+        await patchAnnotation(props.recordingId, props.selectedId, annotation);
+        emit('update:annotation', annotation);
+      }
+    };
+
+    const createAnnotation = async (annotation: SpectrogramAnnotation) => {
+      // We call the patch on the selected annotation
+      if (props.recordingId !== null) {
+        const response =  await putAnnotation(props.recordingId, annotation);
+        emit('create:annotation', response.data.id);
+      }
+    };
+
+
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
       initialized,
+      updateAnnotation,
+      createAnnotation,
     };
   },
 });
@@ -57,6 +85,10 @@ export default defineComponent({
       :geo-viewer-ref="geoViewerRef"
       :spectro-info="spectroInfo"
       :annotations="annotations"
+      :selected-id="selectedId"
+      @selected="$emit('selected',$event)"
+      @update:annotation="updateAnnotation($event)"
+      @create:annotation="createAnnotation($event)"
     />
   </div>
 </template>
@@ -69,8 +101,7 @@ export default defineComponent({
   top: 0;
   bottom: 0;
   z-index: 0;
-  width:100vw;
-  height: 100vh;
+  height: 90vh;
   background-color: black;
 
   display: flex;
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 3e41fe6..8311c75 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -8,7 +8,8 @@ import { VDatePicker } from 'vuetify/labs/VDatePicker';
 export default defineComponent({
   components: {
     VDatePicker,
-  },  
+  },
+  emits: ['done', 'cancel'],
   setup(props, { emit }) {
     const fileInputEl: Ref<HTMLInputElement | null> = ref(null);
     const fileModel: Ref<File | undefined> = ref();
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index da6e69b..5b47eb4 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,46 +1,197 @@
 <script lang="ts">
-import { defineComponent, onMounted, PropType } from 'vue';
-import { SpectrogramAnnotation } from '../../api/api';
-import { SpectroInfo } from './geoJSUtils';
-import RectangleLayer from './layers/rectangleLayer';
-
+import { defineComponent, onMounted, PropType, Ref, ref, watch } from "vue";
+import { SpectrogramAnnotation } from "../../api/api";
+import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
+import EditAnnotationLayer from "./layers/editAnnotationLayer";
+import RectangleLayer from "./layers/rectangleLayer";
+import { cloneDeep } from "lodash";
+import useState from "../../use/useState";
 export default defineComponent({
-    name:'LayerManager',
-    props: {
-        geoViewerRef: {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            type: Object as PropType<any>,
-            required: true,
-        },
-        spectroInfo: {
-            type: Object as PropType<SpectroInfo | undefined>,
-            default: () => undefined
-        },
-        annotations: {
-            type: Array as PropType<SpectrogramAnnotation[]>,
-            default: () => [],
-        }
+  name: "LayerManager",
+  props: {
+    geoViewerRef: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      type: Object as PropType<any>,
+      required: true,
+    },
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramAnnotation[]>,
+      default: () => [],
+    },
+    selectedId: {
+      type: Number as PropType<number | null>,
+      default: null,
     },
-    setup(props) {
-        // 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
-        };
-        onMounted(() => {
-            if (props.spectroInfo) {
-                const rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
-                rectAnnotationLayer.formatData(props.annotations);
-                rectAnnotationLayer.redraw();
+  },
+  emits: ['selected', 'update:annotation', 'create:annotation'],
+  setup(props, { emit }) {
+    const { annotationState } = useState();
+    const selectedAnnotationId: Ref<null | number> = ref(null);
+    const hoveredAnnotationId: Ref<null | number> = ref(null);
+    const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(props.annotations));
+    const editing = ref(false);
+    const editingAnnotation: Ref<null | SpectrogramAnnotation> = ref(null);
+    let rectAnnotationLayer: RectangleLayer;
+    let editAnnotationLayer: EditAnnotationLayer;
+    // 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
+      if (type === "annotation-cleared") {
+        editing.value = false;
+        selectedAnnotationId.value = null;
+        editingAnnotation.value = null;
+        editAnnotationLayer.disable();
+        triggerUpdate();
+        const copy: SpectrogramAnnotation[] = cloneDeep(localAnnotations.value);
+        copy.forEach((item) => (item.editing = undefined));
+        localAnnotations.value = copy;
+        emit("selected", selectedAnnotationId.value);
+      }
+      if (type === "annotation-clicked") {
+        if (selectedAnnotationId.value !== null) {
+          const foundIndex = localAnnotations.value.findIndex(
+            (item) => item.id === selectedAnnotationId.value
+          );
+          if (foundIndex !== -1) {
+            editingAnnotation.value = localAnnotations.value[foundIndex];
+            const copy: SpectrogramAnnotation[] = cloneDeep(localAnnotations.value);
+            copy[foundIndex].editing = true;
+            localAnnotations.value = copy;
+          }
+        }
+        selectedAnnotationId.value = data.id;
+        editing.value = data.edit;
+        editingAnnotation.value = null;
+        emit("selected", selectedAnnotationId.value);
+        triggerUpdate();
+      }
+      if (type === "annotation-hover") {
+        hoveredAnnotationId.value = data.id;
+      }
+      if (type === "annotation-right-clicked") {
+        selectedAnnotationId.value = data.id;
+        editing.value = data.edit;
+        const foundIndex = localAnnotations.value.findIndex(
+          (item) => item.id === selectedAnnotationId.value
+        );
+        if (editing.value && foundIndex !== -1) {
+          editingAnnotation.value = localAnnotations.value[foundIndex];
+          const copy: SpectrogramAnnotation[] = cloneDeep(localAnnotations.value);
+          copy[foundIndex].editing = true;
+          localAnnotations.value = copy;
+        } else if (!editing.value && foundIndex !== -1) {
+          editingAnnotation.value = null;
+          localAnnotations.value[foundIndex].editing = undefined;
+        }
+        emit("selected", selectedAnnotationId.value);
+        triggerUpdate();
+      }
+      if (type === "update:geojson") {
+        const status = data["status"];
+        const creating = data["creating"];
+        const geoJSON = data["geoJSON"];
+        if (geoJSON && selectedAnnotationId.value !== null && status === "editing" && !creating) {
+          if (annotationState.value !== "creating") {
+            const index = localAnnotations.value.findIndex(
+              (item) => item.id === selectedAnnotationId.value
+            );
+            if (index !== -1 && props.spectroInfo) {
+              // update bounds for the localAnnotation
+              const { low_freq, high_freq, start_time, end_time } = geojsonToSpectro(
+                geoJSON,
+                props.spectroInfo
+              );
+              localAnnotations.value[index] = {
+                ...localAnnotations.value[index],
+                low_freq,
+                high_freq,
+                start_time,
+                end_time,
+              };
+              editingAnnotation.value = localAnnotations.value[index];
             }
-        });
-
-        return {
-            
-        };
-    }
+            triggerUpdate();
+            emit("update:annotation", editingAnnotation.value);
+          }
+        } else if (creating) {
+          if (geoJSON && props.spectroInfo) {
+            const { low_freq, high_freq, start_time, end_time } = geojsonToSpectro(
+              geoJSON,
+              props.spectroInfo
+            );
+            const newAnnotation: SpectrogramAnnotation = {
+              low_freq,
+              high_freq,
+              start_time,
+              end_time,
+              comments: "",
+              species: [],
+              id: 0,
+            };
+            emit("create:annotation", newAnnotation);
+            editAnnotationLayer.disable();
+            annotationState.value = '';
+            editing.value = false;
+          }
+        }
+      }
+    };
+    const triggerUpdate = () => {
+      // Check for selected and editing annotations;
+      if (rectAnnotationLayer) {
+        rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value);
+        rectAnnotationLayer.redraw();
+      }
+      if (editing.value && editingAnnotation.value) {
+        setTimeout(() => {
+          editAnnotationLayer.changeData(editingAnnotation.value);
+        }, 0);
+      }
+    };
+    watch(() => props.annotations, () => {
+      localAnnotations.value = props.annotations;
+      rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value);
+      rectAnnotationLayer.redraw();
+    });
+    watch(
+      () => props.selectedId,
+      () => {
+        selectedAnnotationId.value = props.selectedId;
+        triggerUpdate();
+      }
+    );
+    onMounted(() => {
+      if (props.spectroInfo) {
+        rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
+        editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
+        rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value);
+        rectAnnotationLayer.redraw();
+      }
+    });
+    watch(
+      () => annotationState.value,
+      () => {
+        if (annotationState.value === "creating") {
+          editing.value = false;
+          selectedAnnotationId.value = null;
+          editingAnnotation.value = null;
+          editAnnotationLayer.changeData(null);
+          triggerUpdate();
+        }
+      }
+    );
+    return {
+      annotationState,
+      localAnnotations,
+    };
+  },
 });
 </script>
 
 <template>
   <div />
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 3af9073..048fa70 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -188,10 +188,10 @@ function geojsonToSpectro(geojson: GeoJSON.Feature<GeoJSON.Polygon>, spectroInfo
   const coords = geojson.geometry.coordinates[0];
   const widthScale =  spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
   const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
-  const start_time = coords[1][0] / widthScale;
-  const end_time = coords[3][0] / widthScale;
-  const low_freq = coords[1][1] / heightScale;
-  const high_freq = coords[3][1] / heightScale;
+  const start_time = Math.round(coords[1][0] / widthScale);
+  const end_time = Math.round(coords[3][0] / widthScale);
+  const low_freq = Math.round(spectroInfo.high_freq - (coords[1][1]) / heightScale);
+  const high_freq = Math.round(spectroInfo.high_freq - (coords[3][1]) / heightScale);
   return {
     start_time,
     end_time,
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
index b9fad24..da6216f 100644
--- a/client/src/components/geoJS/layers/editAnnotationLayer.ts
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -6,9 +6,6 @@ import { LayerStyle } from "./types";
 import { GeoJSON } from "geojson";
 
 export type EditAnnotationTypes = "rectangle";
-interface EditAnnotationLayerParams {
-  type: EditAnnotationTypes;
-}
 
 interface RectGeoJSData {
   id: number;
@@ -92,11 +89,11 @@ export default class EditAnnotationLayer {
   ) {
     (this.geoViewerRef = geoViewerRef), (this.event = event);
     this.type = "rectangle";
-    this.style =  {
-        strokeColor: 'black',
-        strokeWidth: 1.0,
-        antialiasing: 0,
-      };
+    this.style = {
+      strokeColor: "black",
+      strokeWidth: 1.0,
+      antialiasing: 0,
+    };
     this.formattedData = [];
     this.spectroInfo = spectroInfo;
     this.skipNextExternalUpdate = false;
@@ -199,12 +196,10 @@ export default class EditAnnotationLayer {
       // 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",
-            }),
+          this.geoViewerRef.interactor().simulateEvent("mouseup", {
+            map: { x: e.mouse.geo.x, y: e.mouse.geo.y },
+            button: "left",
+          }),
         0
       );
     } else if (this.shapeInProgress) {
@@ -319,7 +314,7 @@ export default class EditAnnotationLayer {
   }
 
   /** overrides default function to disable and clear anotations before drawing again */
-  async changeData(frameData: SpectrogramAnnotation) {
+  async changeData(frameData: SpectrogramAnnotation | null) {
     if (this.skipNextExternalUpdate === false) {
       // disable resets things before we load a new/different shape or mode
       this.disable();
@@ -344,25 +339,40 @@ export default class EditAnnotationLayer {
    *
    * @param frameData a single FrameDataTrack Array that is the editing item
    */
-  formatData(annotationData: SpectrogramAnnotation) {
+  formatData(annotationData: SpectrogramAnnotation | null) {
     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];
+    if (annotationData) {
+      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];
+      return;
+    } else {
+      this.setMode(this.type);
+    }
+    if (typeof this.type !== "string") {
+      throw new Error(
+        `editing props needs to be a string of value 
+        ${geo.listAnnotations().join(", ")}
+          when geojson prop is not set`
+      );
+    } else {
+      // point or rectangle mode for the editor
+      this.setMode(this.type);
+    }
   }
 
   /**
@@ -388,6 +398,7 @@ export default class EditAnnotationLayer {
         this.event("update:geojson", {
           status: "editing",
           creating: this.getMode() === "creation",
+          geoJSON: geoJSONData[0],
           type: this.type,
           selectedKey: this.selectedKey,
         });
@@ -415,10 +426,12 @@ export default class EditAnnotationLayer {
               );
               // 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],
-              }));
+              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);
@@ -446,7 +459,7 @@ export default class EditAnnotationLayer {
             type: this.type,
             selectedKey: this.selectedKey,
           });
-          }
+        }
       }
     }
   }
@@ -476,7 +489,7 @@ export default class EditAnnotationLayer {
         fill: false,
       },
       fill: false,
-      strokeColor: "red",
+      strokeColor: "cyan",
     };
   }
 
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 783062f..e98a16e 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -1,161 +1,164 @@
 /* eslint-disable class-methods-use-this */
-import geo, { GeoEvent } from 'geojs';
-import { SpectroInfo, spectroToGeoJSon } from '../geoJSUtils';
-import { SpectrogramAnnotation } from '../../../api/api';
-import { LayerStyle } from './types';
+import geo, { GeoEvent } from "geojs";
+import { SpectroInfo, spectroToGeoJSon } from "../geoJSUtils";
+import { SpectrogramAnnotation } from "../../../api/api";
+import { LayerStyle } from "./types";
 
-interface RectGeoJSData{
+interface RectGeoJSData {
   id: number;
   selected: boolean;
-  editing: boolean | string;
+  editing?: boolean;
   polygon: GeoJSON.Polygon;
 }
 
-export default class RectangleLayer{
-    formattedData: RectGeoJSData[];
+export default class RectangleLayer {
+  formattedData: RectGeoJSData[];
 
-    drawingOther: boolean; //drawing another type of annotation at the same time?
+  drawingOther: boolean; //drawing another type of annotation at the same time?
 
-    hoverOn: boolean; //to turn over annnotations on
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    featureLayer: any;
+  hoverOn: boolean; //to turn over annnotations on
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  featureLayer: any;
 
-    selectedIndex: number[]; // sparse array
+  selectedIndex: number[]; // sparse array
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    geoViewerRef: 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;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
 
-    spectroInfo: SpectroInfo;
+  spectroInfo: SpectroInfo;
 
-    style: LayerStyle<RectGeoJSData>;
+  style: LayerStyle<RectGeoJSData>;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geoViewerRef: any,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(geoViewerRef: any, event: (name: string, data: any) => void, spectroInfo: SpectroInfo) {
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
     this.geoViewerRef = geoViewerRef;
-      this.drawingOther = false;
-      this.spectroInfo = spectroInfo;
-      this.formattedData = [];
-      this.hoverOn = false;
-      this.selectedIndex = [];
-      this.event = event;
-      //Only initialize once, prevents recreating Layer each edit
-      const layer = this.geoViewerRef.createLayer('feature', {
-        features: ['polygon'],
-      });
-      this.featureLayer = layer
-        .createFeature('polygon', { selectionAPI: true })
-        .geoOn(geo.event.feature.mouseclick, (e: GeoEvent) => {
+    this.drawingOther = false;
+    this.spectroInfo = spectroInfo;
+    this.formattedData = [];
+    this.hoverOn = false;
+    this.selectedIndex = [];
+    this.event = event;
+    //Only initialize once, prevents recreating Layer each edit
+    const layer = this.geoViewerRef.createLayer("feature", {
+      features: ["polygon"],
+    });
+    this.featureLayer = layer
+      .createFeature("polygon", { selectionAPI: true })
+      .geoOn(geo.event.feature.mouseclick, (e: GeoEvent) => {
         /**
          * Handle clicking on individual annotations, if DrawingOther is true we use the
          * Rectangle type if only the polygon is visible we use the polygon bounds
          * */
-          if (e.mouse.buttonsDown.left) {
-            if (!e.data.editing || (e.data.editing && !e.data.selected)) {
-              this.event('annotation-clicked', { id: e.data.id, edit: false });
-            }
-          } else if (e.mouse.buttonsDown.right) {
-            if (!e.data.editing || (e.data.editing && !e.data.selected)) {
-              this.event('annotation-right-clicked', { id: e.data.id, edit: true });
-            }
+        if (e.mouse.buttonsDown.left) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            this.event("annotation-clicked", { id: e.data.id, edit: false });
+          }
+        } else if (e.mouse.buttonsDown.right) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            this.event("annotation-right-clicked", { id: e.data.id, edit: true });
           }
-        });
-      this.featureLayer.geoOn(
-        geo.event.feature.mouseclick_order,
-        this.featureLayer.mouseOverOrderClosestBorder,
-      );
-      this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
-        // If we aren't clicking on an annotation we can deselect the current track
-        if (this.featureLayer.pointSearch(e.geo).found.length === 0) {
-            this.event('annotation-clicked', { id: null, edit: false });
         }
       });
-      this.style = this.createStyle();
-    }
-
-    hoverAnnotations(e: GeoEvent) {
-      const { found } = this.featureLayer.pointSearch(e.mouse.geo);
-      this.event('annotation-hover', {id: found, pos: e.mouse.geo});
-    }
-
-    setHoverAnnotations(val: boolean) {
-      if (!this.hoverOn && val) {
-        this.featureLayer.geoOn(
-          geo.event.feature.mouseover,
-          (e: GeoEvent) => this.hoverAnnotations(e),
-        );
-        this.featureLayer.geoOn(
-          geo.event.feature.mouseoff,
-          (e: GeoEvent) => this.hoverAnnotations(e),
-        );
-        this.hoverOn = true;
-      } else if (this.hoverOn && !val) {
-        this.featureLayer.geoOff(geo.event.feature.mouseover);
-        this.featureLayer.geoOff(geo.event.feature.mouseoff);
-        this.hoverOn = false;
+    this.featureLayer.geoOn(
+      geo.event.feature.mouseclick_order,
+      this.featureLayer.mouseOverOrderClosestBorder
+    );
+    this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
+      // If we aren't clicking on an annotation we can deselect the current track
+      if (this.featureLayer.pointSearch(e.geo).found.length === 0) {
+        this.event("annotation-cleared", { id: null, edit: false });
       }
+    });
+    this.style = this.createStyle();
+  }
+
+  hoverAnnotations(e: GeoEvent) {
+    const { found } = this.featureLayer.pointSearch(e.mouse.geo);
+    this.event("annotation-hover", { id: found, pos: e.mouse.geo });
+  }
+
+  setHoverAnnotations(val: boolean) {
+    if (!this.hoverOn && val) {
+      this.featureLayer.geoOn(geo.event.feature.mouseover, (e: GeoEvent) =>
+        this.hoverAnnotations(e)
+      );
+      this.featureLayer.geoOn(geo.event.feature.mouseoff, (e: GeoEvent) =>
+        this.hoverAnnotations(e)
+      );
+      this.hoverOn = true;
+    } else if (this.hoverOn && !val) {
+      this.featureLayer.geoOff(geo.event.feature.mouseover);
+      this.featureLayer.geoOff(geo.event.feature.mouseoff);
+      this.hoverOn = false;
     }
+  }
 
-    /**
+  /**
    * Used to set the drawingOther parameter used to change styling if other types are drawn
    * and also handle selection clicking between different types
    * @param val - determines if we are drawing other types of annotations
    */
-    setDrawingOther(val: boolean) {
-      this.drawingOther = val;
-    }
+  setDrawingOther(val: boolean) {
+    this.drawingOther = val;
+  }
 
-
-    formatData(annotationData: SpectrogramAnnotation[]) {
-      const arr: RectGeoJSData[] = [];
-      annotationData.forEach((annotation: SpectrogramAnnotation, ) => {
+  formatData(annotationData: SpectrogramAnnotation[], selectedIndex: number | null) {
+    const arr: RectGeoJSData[] = [];
+    annotationData.forEach((annotation: SpectrogramAnnotation) => {
         const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
         const newAnnotation: RectGeoJSData = {
-            id: annotation.id,
-            selected: false,
-            editing: false,
-            polygon,
-          };
+          id: annotation.id,
+          selected: annotation.id === selectedIndex,
+          editing: annotation.editing,
+          polygon,
+        };
         arr.push(newAnnotation);
-
-      });
-      this.formattedData = arr;
-    }
-
-    redraw() {
-        // add some styles
-      this.featureLayer
-        .data(this.formattedData)
-        .polygon((d: RectGeoJSData) => d.polygon.coordinates[0])
-        .style(this.createStyle())
-        .draw();
-    }
-
-    disable() {
-      this.featureLayer
-        .data([])
-        .draw();
-    }
-
-    createStyle(): LayerStyle<RectGeoJSData> {
-        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';
-            },          };
+    });
+    this.formattedData = arr;
+  }
+
+  redraw() {
+    // add some styles
+    this.featureLayer
+      .data(this.formattedData)
+      .polygon((d: RectGeoJSData) => d.polygon.coordinates[0])
+      .style(this.createStyle())
+      .draw();
+  }
+
+  disable() {
+    this.featureLayer.data([]).draw();
+  }
+
+  createStyle(): LayerStyle<RectGeoJSData> {
+    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) => {
+        if (data.selected) {
+          return "cyan";
         }
+        return "red";
+      },
+    };
+  }
 }
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
new file mode 100644
index 0000000..ac9ca6d
--- /dev/null
+++ b/client/src/use/useState.ts
@@ -0,0 +1,15 @@
+import { ref, Ref } from 'vue';
+
+const annotationState: Ref<AnnotationState> = ref('');
+
+type AnnotationState = '' | 'editing' | 'creating';
+export default function useState() {
+    const setAnnotationState = (state: AnnotationState) => {
+        annotationState.value = state;
+    };
+    return {
+        annotationState,
+        setAnnotationState,
+    };
+}
+
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index d8dc192..1b3b0b9 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -1,13 +1,17 @@
 <script lang="ts">
-import { defineComponent, onMounted, Ref, ref, } from 'vue';
-import { getSpectrogram, SpectrogramAnnotation } from '../api/api';
+import { computed, defineComponent, onMounted, Ref, ref, } from 'vue';
+import { getSpecies, getAnnotations, getSpectrogram, Species, SpectrogramAnnotation } from '../api/api';
 import SpectrogramViewer from '../components/SpectrogramViewer.vue';
 import { SpectroInfo } from '../components/geoJS/geoJSUtils';
+import AnnotationList from '../components/AnnotationList.vue';
+import AnnotationEditor from '../components/AnnotationEditor.vue';
 
 export default defineComponent({
   name: "Spectrogram",
   components: {
     SpectrogramViewer,
+    AnnotationList,
+    AnnotationEditor,
   },
   props: {
     id: {
@@ -19,30 +23,83 @@ export default defineComponent({
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
     const annotations: Ref<SpectrogramAnnotation[] | undefined> = ref([]);
+    const selectedId: Ref<number | null> = ref(null);
+    const speciesList: Ref<Species[]> = ref([]);
     const loadedImage = ref(false);
+    const getAnnotationsList= async (annotationId?: number) => {
+        const response = await getAnnotations(props.id);
+        annotations.value = response.data;
+        if (annotationId !== undefined) {
+          selectedId.value = annotationId;
+        }
+        
+    };
     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;
+      const speciesResponse = await getSpecies();
+      speciesList.value = speciesResponse.data;
+    };
+    const setSelection = (annotationId: number) => {
+      selectedId.value= annotationId;
     };
+    const selectedAnnotation = computed(() => {
+      if (selectedId.value !== null && annotations.value) {
+        const found = annotations.value.findIndex((item) => item.id === selectedId.value);
+          if (found !== -1) {
+            return annotations.value[found];
+          }
+        }
+      return null;
+    });
     onMounted(() => loadData());
     return { 
       loadedImage,
       image,
       spectroInfo,
       annotations,
+      selectedId,
+      setSelection,
+      getAnnotationsList,
+      speciesList,
+      selectedAnnotation,
     };
   },
 });
 </script>
 
 <template>
-  <spectrogram-viewer
-    v-if="loadedImage"
-    :image="image"
-    :spectro-info="spectroInfo"
-    :annotations="annotations"
-  />
+  <v-row>
+    <v-col>
+      <spectrogram-viewer
+        v-if="loadedImage"
+        :image="image"
+        :spectro-info="spectroInfo"
+        :recording-id="id"
+        :annotations="annotations"
+        :selected-id="selectedId"
+        @selected="setSelection($event)"
+        @create:annotation="getAnnotationsList($event)"
+      />
+    </v-col>
+    <v-col style="max-width:300px">
+      <annotation-list
+        :annotations="annotations"
+        :selected-id="selectedId"
+        @select="selectedId = $event"
+      />
+      <annotation-editor
+        v-if="selectedAnnotation"
+        :species="speciesList"
+        :recording-id="id"
+        :annotation="selectedAnnotation"
+        class="mt-4"
+        @update:annotation="getAnnotationsList()"
+        @delete:annotation="getAnnotationsList()"
+      />
+    </v-col>
+  </v-row>
 </template>
diff --git a/client/yarn.lock b/client/yarn.lock
index 093b34c..8700ec4 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1717,6 +1717,11 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/lodash@^4.14.202":
+  version "4.14.202"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/node@*":
   version "17.0.21"
   resolved "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz"