diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 71f559a..d0701d9 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -63,7 +63,7 @@ class RecordingUploadSchema(Schema):
 
 
 class RecordingAnnotationSchema(Schema):
-    # species: list[SpeciesSchema] | None
+    species: list[SpeciesSchema] | None
     comments: str | None = None
     model: str | None = None
     owner: str
@@ -73,7 +73,7 @@ class RecordingAnnotationSchema(Schema):
     @classmethod
     def from_orm(cls, obj: RecordingAnnotation, **kwargs):
         return cls(
-            # species=[SpeciesSchema.from_orm(species) for species in obj.species.all()],
+            species=[SpeciesSchema.from_orm(species) for species in obj.species.all()],
             owner=obj.owner.username,
             confidence=obj.confidence,
             comments=obj.comments,
@@ -301,6 +301,18 @@ def get_recording(request: HttpRequest, id: int):
         return {'error': 'Recording not found'}
 
 
+@router.get('/{recording_id}/recording-annotations')
+def get_recording_annotations(request: HttpRequest, recording_id: int):
+    fileAnnotations = RecordingAnnotation.objects.filter(recording=recording_id).order_by(
+        'confidence'
+    )
+    output = [
+        RecordingAnnotationSchema.from_orm(fileAnnotation).dict()
+        for fileAnnotation in fileAnnotations
+    ]
+    return output
+
+
 @router.get('/{id}/spectrogram')
 def get_spectrogram(request: HttpRequest, id: int):
     try:
diff --git a/bats_ai/core/views/recording_annotation.py b/bats_ai/core/views/recording_annotation.py
index 3452e05..4f258c1 100644
--- a/bats_ai/core/views/recording_annotation.py
+++ b/bats_ai/core/views/recording_annotation.py
@@ -5,6 +5,7 @@
 from ninja.errors import HttpError
 
 from bats_ai.core.models import Recording, RecordingAnnotation, Species
+from bats_ai.core.views.recording import SpeciesSchema
 
 logger = logging.getLogger(__name__)
 
@@ -13,17 +14,27 @@
 
 # Schemas for serialization
 class RecordingAnnotationSchema(Schema):
-    id: int
-    recording: int
+    species: list[SpeciesSchema] | None
+    comments: str | None = None
+    model: str | None = None
     owner: str
-    species: list[int]
-    comments: str = None
-    model: str = None
     confidence: float
+    id: int | None = None
+
+    @classmethod
+    def from_orm(cls, obj: RecordingAnnotation, **kwargs):
+        return cls(
+            species=[SpeciesSchema.from_orm(species) for species in obj.species.all()],
+            owner=obj.owner.username,
+            confidence=obj.confidence,
+            comments=obj.comments,
+            model=obj.model,
+            id=obj.pk,
+        )
 
 
 class CreateRecordingAnnotationSchema(Schema):
-    recording: int
+    recordingId: int
     species: list[int]
     comments: str = None
     model: str = None
@@ -37,7 +48,6 @@ class UpdateRecordingAnnotationSchema(Schema):
     confidence: float = None
 
 
-# GET Endpoint
 @router.get('/{id}', response=RecordingAnnotationSchema)
 def get_recording_annotation(request: HttpRequest, id: int):
     try:
@@ -47,24 +57,15 @@ def get_recording_annotation(request: HttpRequest, id: int):
         if annotation.recording.owner != request.user and not annotation.recording.public:
             raise HttpError(403, 'Permission denied.')
 
-        return {
-            'id': annotation.id,
-            'recording': annotation.recording.id,
-            'owner': annotation.owner.username,
-            'species': [s.id for s in annotation.species.all()],
-            'comments': annotation.comments,
-            'model': annotation.model,
-            'confidence': annotation.confidence,
-        }
+        return RecordingAnnotationSchema.from_orm(annotation).dict()
     except RecordingAnnotation.DoesNotExist:
         raise HttpError(404, 'Recording annotation not found.')
 
 
-# PUT Endpoint
 @router.put('/', response={200: str})
 def create_recording_annotation(request: HttpRequest, data: CreateRecordingAnnotationSchema):
     try:
-        recording = Recording.objects.get(pk=data.recording)
+        recording = Recording.objects.get(pk=data.recordingId)
 
         # Check permission
         if recording.owner != request.user and not recording.public:
@@ -91,7 +92,6 @@ def create_recording_annotation(request: HttpRequest, data: CreateRecordingAnnot
         raise HttpError(404, 'One or more species IDs not found.')
 
 
-# PATCH Endpoint
 @router.patch('/{id}', response={200: str})
 def update_recording_annotation(
     request: HttpRequest, id: int, data: UpdateRecordingAnnotationSchema
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index bb9f824..ff5b150 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -107,10 +107,30 @@ export interface UserInfo {
     email: string;
     id: number;
 }
+
+export interface FileAnnotation {
+    species: Species[];
+    comments?: string;
+    model?: string;
+    owner: string;
+    confidence: number;
+    id: number;
+}
+
+export interface UpdateFileAnnotation {
+    recordingId?: number;
+    species_list: number[] | null;
+    comments?: string;
+    model?: string;
+    confidence: number;
+    id?: number;
+}
+
 export interface Spectrogram {
     url: string;
     filename?: string;
     annotations?: SpectrogramAnnotation[];
+    fileAnnotations: FileAnnotation[];
     temporal?: SpectrogramTemporalAnnotation[];
     spectroInfo?: SpectroInfo;
     compressed?: {
@@ -310,6 +330,23 @@ async function getOtherUserAnnotations(recordingId: string) {
 async function getCellLocation(cellId: number, quadrant?: 'SW' | 'NE' | 'NW' | 'SE') {
     return axiosInstance.get<GRTSCellCenter>(`/grts/${cellId}`, { params: { quadrant }});
 }
+async function getFileAnnotations(recordingId: number) {
+    return axiosInstance.get<FileAnnotation[]>(`recording/${recordingId}/recording-annotations`);
+}
+
+
+async function putFileAnnotation(fileAnnotation: UpdateFileAnnotation) {
+    return axiosInstance.put<{message: string, id: number}>(`/recording-annotation`, { fileAnnotation });
+}
+
+async function patchFileAnnotation(fileAnnotationId: number, fileAnnotation: UpdateFileAnnotation) {
+    return axiosInstance.patch<{message: string, id: number}>(`/recording-annotation/${fileAnnotationId}`, { fileAnnotation });
+}
+
+async function deleteFileAnnotation(fileAnnotationId: number) {
+    return axiosInstance.delete<{message: string, id: number}>(`/recording-annotation/${fileAnnotationId}`);
+}
+
 
 interface CellIDReponse {
     grid_cell_id?: number;
@@ -367,4 +404,8 @@ export {
  getCellLocation,
  getCellfromLocation,
  getGuanoMetadata,
+ getFileAnnotations,
+ putFileAnnotation,
+ patchFileAnnotation,
+ deleteFileAnnotation,
 };
\ No newline at end of file
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index cd4ac67..c1e648d 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -5,10 +5,12 @@ import useState from "../use/useState";
 import { watch, ref } from "vue";
 import AnnotationEditor from "./AnnotationEditor.vue";
 import { Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import RecordingAnnotations from "./RecordingAnnotations.vue";
 export default defineComponent({
   name: "AnnotationList",
   components: {
     AnnotationEditor,
+    RecordingAnnotations,
   },
   props: {
     spectroInfo: {
@@ -55,7 +57,7 @@ export default defineComponent({
       selectedType.value = event as 'sequence' | 'pulse';
       selectedId.value = null;
     } else {
-      tab.value = 'recordings';
+      tab.value = 'recording';
     }
   };
 
@@ -220,14 +222,20 @@ export default defineComponent({
           </v-list-item>
         </v-list>
       </v-window-item>
+      <v-window-item value="recording">
+        <RecordingAnnotations 
+          :species="species"
+          :recording-id="parseInt(recordingId)"
+        />
+      </v-window-item>
       <annotation-editor
-        v-if="selectedAnnotation"
+        v-if="selectedAnnotation && ['pulse', 'sequence'].includes(tab)"
         :species="species"
         :recording-id="recordingId"
         :annotation="selectedAnnotation"
+        class="mt-4"
         @update:annotation="$emit('update:annotation')"
         @delete:annotation="$emit('delete:annotation')"
-        class="mt-4"
       />
     </v-window>
   </div>
diff --git a/client/src/components/RecordingAnnotation.vue b/client/src/components/RecordingAnnotation.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/RecordingAnnotationEditor.vue b/client/src/components/RecordingAnnotationEditor.vue
new file mode 100644
index 0000000..9dfd27d
--- /dev/null
+++ b/client/src/components/RecordingAnnotationEditor.vue
@@ -0,0 +1,138 @@
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { deleteAnnotation, deleteFileAnnotation, deleteTemporalAnnotation, FileAnnotation, patchAnnotation, patchTemporalAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import useState from "../use/useState";
+import SpeciesInfo from "./SpeciesInfo.vue";
+export default defineComponent({
+  name: "AnnotationEditor",
+  components: {
+    SpeciesInfo,
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotation: {
+      type: Object as PropType<FileAnnotation | null>,
+      default: () => null,
+    },
+    species: {
+        type: Array as PropType<Species[]>,
+        required: true,
+    },
+    recordingId: {
+        type: Number,
+        required: true,
+    }
+  },
+  emits: ['update:annotation', 'delete:annotation'],
+  setup(props, { emit }) {
+    const speciesList = computed(() => {
+        return props.species.map((item) => (item.species_code || item.common_name)).sort();
+    });
+
+    const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.species_code || item.common_name) || []);
+    const comments: Ref<string> = ref(props.annotation?.comments || '');
+    const confidence: Ref<number> = ref(1.0);
+
+    watch(() => props.annotation, () => {
+        if (props.annotation?.species) {
+            speciesEdit.value = props.annotation.species.map((item) => item.species_code || item.common_name);
+        }
+        if (props.annotation?.comments) {
+            comments.value = props.annotation.comments;
+        }
+        if (props.annotation) {
+            confidence.value = props.annotation.confidence;
+        }
+    });
+    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.species_code === item);
+                if (found) {
+                    speciesIds.push(found.id);
+                }
+            });
+            const updateType = type.value.join('+');
+            if (selectedType.value === 'pulse') {
+              await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value, confidence: confidence.value }, speciesIds );
+            } else if (selectedType.value === 'sequence') {
+              await patchTemporalAnnotation(props.recordingId, props.annotation.id, {...props.annotation, comments: comments.value, type: updateType }, speciesIds);
+            }
+            // Signal to redownload the updated annotation values if possible
+            emit('update:annotation');
+        }
+
+    };
+
+    const deleteAnno = async () => {
+      if (props.annotation && props.recordingId) {
+            await deleteFileAnnotation(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-card-text>
+      <v-row>
+        <SpeciesInfo
+          :species-list="species"
+          :selected-species="speciesEdit"
+          class="my-2"
+        />
+      </v-row>
+      <v-row>
+        <v-autocomplete
+          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-text> 
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
new file mode 100644
index 0000000..d229bce
--- /dev/null
+++ b/client/src/components/RecordingAnnotations.vue
@@ -0,0 +1,187 @@
+<script lang="ts">
+import { defineComponent, onMounted, PropType, Ref } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import useState from "../use/useState";
+import { watch, ref } from "vue";
+import AnnotationEditor from "./AnnotationEditor.vue";
+import { FileAnnotation, getFileAnnotations, putFileAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation, UpdateFileAnnotation } from "../api/api";
+import RecordingAnnotationEditor from "./RecordingAnnotationEditor.vue";
+export default defineComponent({
+  name: "AnnotationList",
+  components: {
+    RecordingAnnotationEditor,
+  },
+  props: {
+    species: {
+        type: Array as PropType<Species[]>,
+        required: true,
+    },
+    recordingId: {
+        type: Number,
+        required: true,
+    }
+  },
+  emits: [],
+  setup(props) {
+    const selectedAnnotation: Ref<null | FileAnnotation> = ref(null);
+    const annotationState: Ref<'creating' | 'editing' | null> = ref(null);
+    const annotations: Ref<FileAnnotation[]> = ref([]);
+
+    const setSelectedId = (annotation: FileAnnotation) => {
+      selectedAnnotation.value = annotation;
+    };
+
+    const loadFileAnnotations = async () => {
+      annotations.value = (await getFileAnnotations(props.recordingId)).data;
+    };
+
+    onMounted(() => loadFileAnnotations());
+
+    const addAnnotation = async () => {
+      const newAnnotation: UpdateFileAnnotation = {
+        recordingId: props.recordingId,
+        species_list: [],
+    comments: '',
+    model: 'User Defined',
+    confidence: 1.0,
+
+      };
+      await putFileAnnotation(newAnnotation);
+      await loadFileAnnotations();
+      if (annotations.value.length) {
+        setSelectedId(annotations.value[annotations.value.length-1]);
+      }
+    };
+
+    const updatedAnnotation = async (deleted=false) => {
+     annotations.value = (await getFileAnnotations(props.recordingId)).data;
+     if (selectedAnnotation.value) {
+      const found = annotations.value.find((item) => selectedAnnotation.value?.id === item.id);
+      if (found) {
+        selectedAnnotation.value = found;
+      }
+     }
+     if (deleted) {
+      selectedAnnotation.value = null;
+     }
+    };
+
+    return {
+      selectedAnnotation,
+      annotationState,
+      annotations,
+      setSelectedId,
+      addAnnotation,
+      updatedAnnotation,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <v-row class="pa-2">
+      <v-col>
+        Annotations
+      </v-col>
+      <v-spacer />
+      <v-col>
+        <v-btn
+          :disabled="annotationState === 'creating'"
+          @click="addAnnotation;"
+        >
+          Add<v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-list>
+      <v-list-item
+        v-for="annotation in annotations"
+        :id="`annotation-${annotation.id}`"
+        :key="annotation.id"
+        :class="{selected: annotation.id===selectedAnnotation?.id}"
+        class="annotation-item"
+        @click="setSelectedId(annotation)"
+      >
+        <v-row>
+          <v-col class="annotation-owner">
+            <span>{{ annotation.owner }}</span>
+          </v-col>
+          <v-col class="annotation-confidence">
+            <span>{{ annotation.confidence }} </span>
+          </v-col>
+          <v-col class="annotation-model">
+            <span>{{ annotation.model }} </span>
+          </v-col>
+        </v-row>
+        <v-row
+          v-for="item in annotation.species"
+          :key="`${annotation.id}_${item.common_name}`"
+          class="ma-0 pa-0"
+        >
+          <v-col class="ma-0 pa-0">
+            <div class="species-name">
+              {{ item.species_code || 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>
+    <RecordingAnnotationEditor
+      v-if="selectedAnnotation"
+      :species="species"
+      :recording-id="recordingId"
+      :annotation="selectedAnnotation"
+      class="mt-4"
+      @update:annotation="updatedAnnotation()"
+      @delete:annotation="updatedAnnotation()"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.annotation-id {
+    cursor:pointer;
+    text-decoration: underline;
+}
+.annotation-owner {
+    font-size: 1em;
+}
+.annotation-confidence {
+    font-size: 1em;
+}
+.annotation-model {
+    font-size: 1em;
+}
+.annotation-item {
+  border: 1px solid gray;
+}
+.species-name {
+    font-weight: bold;
+    font-size: 1em;
+}
+.species-hierarchy {
+    font-size: 0.75em;
+}
+.selected {
+    background-color: cyan;
+}
+.annotation-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.recording-list {
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+</style>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index b1fda64..cda5543 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -558,6 +558,8 @@ export default defineComponent({
               :annotations="annotations"
               :temporal-annotations="temporalAnnotations"
               :selected-annotation="selectedAnnotation"
+              :species="speciesList"
+              :recording-id="id"
               @select="processSelection($event)"
               @update:annotation="getAnnotationsList()"
               @delete:annotation="