diff --git a/client/src/App.vue b/client/src/App.vue
index c7d25f30..823ef327 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -32,7 +32,6 @@ export default defineComponent({
     const checkLogin = async () => {
       if (oauthClient.isLoggedIn) {
         loginText.value = "Logout";
-        await loadConfiguration();
         await loadCurrentUser();
         await loadReviewerMaterials();
         if (sharedList.value.length === 0) {
@@ -52,7 +51,8 @@ export default defineComponent({
         oauthClient.redirectToLogin();
       }
     };
-    onMounted(() => {
+    onMounted(async () => {
+      await loadConfiguration();
       checkLogin();
     });
     router.afterEach((guard) => {
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index dd89abf2..daa606ad 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, CSSProperties } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
 import useState from "@use/useState";
 import { watch, ref } from "vue";
@@ -32,51 +32,77 @@ export default defineComponent({
   },
   emits: ['select', 'update:annotation', 'delete:annotation'],
   setup() {
-    const { creationType, annotationState, setAnnotationState, annotations, sequenceAnnotations, selectedId, selectedType, setSelectedId, sideTab, configuration } = useState();
+    const {
+      creationType,
+      annotationState,
+      setAnnotationState,
+      annotations,
+      sequenceAnnotations,
+      selectedId,
+      selectedType,
+      setSelectedId,
+      sideTab,
+      configuration,
+    } = useState();
     const tab = ref('recording');
     const scrollToId = (id: number) => {
-    const el = document.getElementById(`annotation-${id}`);
-    if (el) {
-      el.scrollIntoView({block: 'end', behavior: 'smooth'});
-    }
-  };
-  watch(selectedId, () => {
-    tab.value = selectedType.value;
-    if (selectedId.value !== null) {
-      scrollToId(selectedId.value);
-    }
-  });
-  watch(selectedType, () => {
-    tab.value = selectedType.value;
-  });
-  const pulseEnabled = computed(() => configuration.value.display_pulse_annotations);
-  const sequenceEnabled = computed(() => configuration.value.display_sequence_annotations);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tabSwitch = (event: any) => {
-    // On tab switches we want to deselect the curret annotation
-    if (['sequence', 'pulse'].includes(event)) {
-      tab.value = event as 'sequence' | 'pulse';
-      selectedType.value = event as 'sequence' | 'pulse';
-      selectedId.value = null;
-    } else {
-      tab.value = 'recording';
-    }
-  };
+      const el = document.getElementById(`annotation-${id}`);
+      if (el) {
+        el.scrollIntoView({block: 'end', behavior: 'smooth'});
+      }
+    };
+    watch(selectedId, () => {
+      tab.value = selectedType.value;
+      if (selectedId.value !== null) {
+        scrollToId(selectedId.value);
+      }
+    });
+    watch(selectedType, () => {
+      tab.value = selectedType.value;
+    });
+    const pulseEnabled = computed(() => configuration.value.display_pulse_annotations);
+    const sequenceEnabled = computed(() => configuration.value.display_sequence_annotations);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tabSwitch = (event: any) => {
+      // On tab switches we want to deselect the curret annotation
+      if (['sequence', 'pulse'].includes(event)) {
+        tab.value = event as 'sequence' | 'pulse';
+        selectedType.value = event as 'sequence' | 'pulse';
+        selectedId.value = null;
+      } else {
+        tab.value = 'recording';
+      }
+    };
+
+    const styles = computed<CSSProperties>(() => {
+      const appBarHeight = 64;
+      const sidebarOptionsHeight = 36;
+      const vettingOptionsHeight = 161;
+      let offset = appBarHeight + sidebarOptionsHeight;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        offset += vettingOptionsHeight;
+      }
+      return {
+        'max-height': `calc(100vh - ${offset}px)`,
+        'overflow-y': 'auto'
+      };
+    });
 
     return {
-        annotationState,
-        annotations,
-        creationType,
-        sequenceAnnotations,
-        selectedId,
-        selectedType,
-        setAnnotationState,
-        setSelectedId,
-        tabSwitch,
-        tab,
-        sideTab,
-        pulseEnabled,
-        sequenceEnabled,
+      annotationState,
+      annotations,
+      creationType,
+      sequenceAnnotations,
+      selectedId,
+      selectedType,
+      setAnnotationState,
+      setSelectedId,
+      tabSwitch,
+      tab,
+      sideTab,
+      pulseEnabled,
+      sequenceEnabled,
+      styles,
     };
   },
 });
@@ -85,7 +111,7 @@ export default defineComponent({
 <template>
   <div
     class="pa-2"
-    :class="{'annotation-list': ['pulse','sequence'].includes(tab),'recording-list': !['pulse','sequence'].includes(tab)}"
+    :style="styles"
   >
     <v-row dense>
       <v-tabs
@@ -256,7 +282,7 @@ export default defineComponent({
         </v-list>
       </v-window-item>
       <v-window-item value="recording">
-        <RecordingAnnotations 
+        <RecordingAnnotations
           :species="species"
           :recording-id="parseInt(recordingId)"
         />
@@ -298,13 +324,4 @@ export default defineComponent({
 .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/components/MapLocation.vue b/client/src/components/MapLocation.vue
index 3da9499f..24714a54 100644
--- a/client/src/components/MapLocation.vue
+++ b/client/src/components/MapLocation.vue
@@ -59,6 +59,9 @@ export default defineComponent({
         markerFeature.value = markerLayer.value.createFeature("marker");
         bboxFeature.value = bboxLayer.value.createFeature("polygon");
         uiLayer.value.createWidget('slider');
+        uiLayer.value.createWidget('scale', {
+          position: { bottom: 10, left: 10},
+        });
 
 
         if (props.grtsCellId !== undefined) {
diff --git a/client/src/components/RecordingAnnotations.vue b/client/src/components/RecordingAnnotations.vue
index 6951b98a..a167ec8e 100644
--- a/client/src/components/RecordingAnnotations.vue
+++ b/client/src/components/RecordingAnnotations.vue
@@ -309,14 +309,4 @@ export default defineComponent({
 .selected {
   background-color: cyan;
 }
-
-.annotation-list {
-  max-height: 85vh;
-  overflow-y: auto;
-}
-
-.recording-list {
-  max-height: 85vh;
-  overflow-y: auto;
-}
 </style>
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
index 0dce3ecd..39b4f458 100644
--- a/client/src/components/RecordingList.vue
+++ b/client/src/components/RecordingList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, Ref, onMounted, computed } from 'vue';
+import { defineComponent, ref, Ref, onMounted, computed, CSSProperties } from 'vue';
 import { FileAnnotation, getRecordings, Recording, Species } from '../api/api';
 import useState from '@use/useState';
 import  { EditingRecording } from './UploadRecording.vue';
@@ -49,159 +49,76 @@ export default defineComponent({
       return userSubmittedAnnotations[0].species.map((specie: Species) => specie.species_code).join(', ');
     };
 
+    const styles = computed<CSSProperties>(() => {
+      const appBarHeight = 64;
+      const sidebarOptionsHeight = 36;
+      const vettingOptionsHeight = 161;
+      const showSubmittedHeight = 80;
+      let offset = appBarHeight + sidebarOptionsHeight;
+      if (configuration.value.mark_annotations_completed_enabled) {
+        offset += (vettingOptionsHeight + showSubmittedHeight);
+      }
+      return {
+        'max-height': `calc(100vh - ${offset}px)`,
+        'overflow-y': 'auto'
+      };
+    });
+
     return {
-        recordingList,
-        sharedList,
-        modifiedList,
-        filtered,
-        editingRecording,
-        openPanel,
-        userSubmittedAnnotation,
-        configuration,
-        myRecordingsDisplay,
-        sharedRecordingsDisplay,
-        showSubmittedRecordings,
+      recordingList,
+      sharedList,
+      modifiedList,
+      filtered,
+      editingRecording,
+      openPanel,
+      userSubmittedAnnotation,
+      configuration,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
+      showSubmittedRecordings,
+      styles,
      };
   },
 });
 </script>
 
 <template>
-  <v-expansion-panels v-model="openPanel">
-    <v-col v-if="configuration.mark_annotations_completed_enabled">
-      <v-row>
-        <v-col>
-          <v-checkbox
-            v-model="showSubmittedRecordings"
-            label="Show submitted recordings"
-            hide-details
-          />
-        </v-col>
-      </v-row>
-    </v-col>
-    <v-expansion-panel v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
-      <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <div
-          v-for="item in myRecordingsDisplay"
-          :key="`public_${item.id}`"
-        >
-          <v-card class="pa-2 my-2">
-            <v-row dense>
-              <v-col class="text-left">
-                <b>Name:</b><router-link
-                  :to="`/recording/${item.id.toString()}/spectrogram`"
-                >
-                  {{ item.name }}
-                </router-link>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col>
-                <b>Public:</b>
-                <v-icon
-                  v-if="item.public"
-                  color="success"
-                >
-                  mdi-check
-                </v-icon>
-                <v-icon
-                  v-else
-                  color="error"
-                >
-                  mdi-close
-                </v-icon>
-              </v-col>
-              <v-col>
-                <div>
-                  <b class="pr-1">Annotations:</b>{{ item.userAnnotations }}
-                </div>
-              </v-col>
-            </v-row>
-            <v-row
-              v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
-              dense
-            >
-              <v-col>
-                <div>
-                  <b>Submitted: </b>
-                  <v-icon
-                    v-if="userSubmittedAnnotation(item)"
-                    color="success"
-                  >
-                    mdi-check
-                  </v-icon>
-                  <v-icon
-                    v-else
-                    color="error"
-                  >
-                    mdi-close
-                  </v-icon>
-                </div>
-              </v-col>
-              <v-col v-if="userSubmittedAnnotation(item)">
-                <b>My label: </b>
-                <span>{{ userSubmittedAnnotation(item) }}</span>
-              </v-col>
-            </v-row>
-          </v-card>
-        </div>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-    <v-expansion-panel>
-      <v-expansion-panel-title>Public</v-expansion-panel-title>
-      <v-expansion-panel-text class="ma-0 pa-0">
-        <v-switch
-          v-if="!configuration.mark_annotations_completed_enabled"
-          v-model="filtered"
-          label="Filter Annotated"
-          dense
+  <div>
+    <v-row v-if="configuration.mark_annotations_completed_enabled">
+      <v-col>
+        <v-checkbox
+          v-model="showSubmittedRecordings"
+          label="Show submitted recordings"
+          hide-details
         />
-        <div
-          v-for="item in modifiedList"
-          :key="`public_${item.id}`"
-        >
-          <v-card class="pa-2 my-2">
-            <v-row dense>
-              <v-col class="text-left">
-                <b class="pr-1">Name:</b>
-                <router-link
-                  :to="`/recording/${item.id.toString()}/spectrogram`"
-                >
-                  {{ item.name }}
-                </router-link>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col>
-                <div style="font-size:0.75em">
-                  <b>Owner:</b> {{ item.owner_username }}
-                </div>
-              </v-col>
-            </v-row>
-            <v-row dense>
-              <v-col v-if="!configuration.mark_annotations_completed_enabled">
-                <div>
-                  <b>Annotated:</b>
-                  <v-icon
-                    v-if="item.userMadeAnnotations"
-                    color="success"
-                  >
-                    mdi-check
-                  </v-icon>
-                  <v-icon
-                    v-else
-                    color="error"
+      </v-col>
+    </v-row>
+    <v-expansion-panels
+      v-model="openPanel"
+      :style="styles"
+    >
+      <v-expansion-panel v-if="configuration.is_admin || configuration.non_admin_upload_enabled">
+        <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <div
+            v-for="item in myRecordingsDisplay"
+            :key="`public_${item.id}`"
+          >
+            <v-card class="pa-2 my-2">
+              <v-row dense>
+                <v-col class="text-left">
+                  <b>Name:</b><router-link
+                    :to="`/recording/${item.id.toString()}/spectrogram`"
                   >
-                    mdi-close
-                  </v-icon>
-                </div>
-              </v-col>
-              <v-col v-else>
-                <div>
-                  <b>Submitted: </b>
+                    {{ item.name }}
+                  </router-link>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col>
+                  <b>Public:</b>
                   <v-icon
-                    v-if="userSubmittedAnnotation(item)"
+                    v-if="item.public"
                     color="success"
                   >
                     mdi-check
@@ -212,20 +129,122 @@ export default defineComponent({
                   >
                     mdi-close
                   </v-icon>
-                </div>
-              </v-col>
-              <v-col
+                </v-col>
+                <v-col>
+                  <div>
+                    <b class="pr-1">Annotations:</b>{{ item.userAnnotations }}
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row
                 v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+                dense
               >
-                <b>My label: </b>
-                <span>{{ userSubmittedAnnotation(item) }}</span>
-              </v-col>
-            </v-row>
-          </v-card>
-        </div>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-  </v-expansion-panels>
+                <v-col>
+                  <div>
+                    <b>Submitted: </b>
+                    <v-icon
+                      v-if="userSubmittedAnnotation(item)"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col v-if="userSubmittedAnnotation(item)">
+                  <b>My label: </b>
+                  <span>{{ userSubmittedAnnotation(item) }}</span>
+                </v-col>
+              </v-row>
+            </v-card>
+          </div>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-title>Public</v-expansion-panel-title>
+        <v-expansion-panel-text class="ma-0 pa-0">
+          <v-switch
+            v-if="!configuration.mark_annotations_completed_enabled"
+            v-model="filtered"
+            label="Filter Annotated"
+            dense
+          />
+          <div
+            v-for="item in modifiedList"
+            :key="`public_${item.id}`"
+          >
+            <v-card class="pa-2 my-2">
+              <v-row dense>
+                <v-col class="text-left">
+                  <b class="pr-1">Name:</b>
+                  <router-link
+                    :to="`/recording/${item.id.toString()}/spectrogram`"
+                  >
+                    {{ item.name }}
+                  </router-link>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col>
+                  <div style="font-size:0.75em">
+                    <b>Owner:</b> {{ item.owner_username }}
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row dense>
+                <v-col v-if="!configuration.mark_annotations_completed_enabled">
+                  <div>
+                    <b>Annotated:</b>
+                    <v-icon
+                      v-if="item.userMadeAnnotations"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col v-else>
+                  <div>
+                    <b>Submitted: </b>
+                    <v-icon
+                      v-if="userSubmittedAnnotation(item)"
+                      color="success"
+                    >
+                      mdi-check
+                    </v-icon>
+                    <v-icon
+                      v-else
+                      color="error"
+                    >
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col
+                  v-if="configuration.mark_annotations_completed_enabled && userSubmittedAnnotation(item)"
+                >
+                  <b>My label: </b>
+                  <span>{{ userSubmittedAnnotation(item) }}</span>
+                </v-col>
+              </v-row>
+            </v-card>
+          </div>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
 </template>
 
 <style scoped>
@@ -236,4 +255,9 @@ export default defineComponent({
 .v-expansion-panel-text__wrapper {
     padding: 0 !important;
 }
+
+.overflow-recordings {
+  max-height: 50vh;
+  overflow-y: auto;
+}
 </style>
diff --git a/client/src/components/geoJS/layers/axesLayer.ts b/client/src/components/geoJS/layers/axesLayer.ts
index 7b0218fe..03a5acb3 100644
--- a/client/src/components/geoJS/layers/axesLayer.ts
+++ b/client/src/components/geoJS/layers/axesLayer.ts
@@ -289,7 +289,7 @@ export default class AxesLayer extends BaseTextLayer<TickTextData> {
       this.lineData.push(line);
 
       this.textData.push({
-        text: `${(tick.value / 1000).toFixed(0)}KHz`,
+        text: `${(tick.value / 1000).toFixed(0)}kHz`,
         x: gcsTextStart,
         y,
         textAlign: 'left',
diff --git a/client/src/components/geoJS/layers/boundingBoxLayer.ts b/client/src/components/geoJS/layers/boundingBoxLayer.ts
index 86616116..d8bb31ad 100644
--- a/client/src/components/geoJS/layers/boundingBoxLayer.ts
+++ b/client/src/components/geoJS/layers/boundingBoxLayer.ts
@@ -118,14 +118,14 @@ export default class BoundingBoxLayer extends BaseTextLayer<BoundingBoxTextData>
         textBaseline: 'top',
       },
       {
-        text: `${(lowFreq / 1000).toFixed(1)}KHz`,
+        text: `${(lowFreq / 1000).toFixed(1)}kHz`,
         x: coordinates[3][0] + 5,
         y: coordinates[3][1],
         textAlign: 'start',
         textBaseline: 'middle',
       },
       {
-        text: `${(highFreq / 1000).toFixed(1)}KHz`,
+        text: `${(highFreq / 1000).toFixed(1)}kHz`,
         x: coordinates[2][0] + 5,
         y: coordinates[2][1],
         textAlign: 'start',
diff --git a/client/src/components/geoJS/layers/measureToolLayer.ts b/client/src/components/geoJS/layers/measureToolLayer.ts
index 17ffef4f..b132e1e4 100644
--- a/client/src/components/geoJS/layers/measureToolLayer.ts
+++ b/client/src/components/geoJS/layers/measureToolLayer.ts
@@ -164,7 +164,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     const frequency = height - this.yValue >= 0
       ? ((height - newY) * (this.spectroInfo.high_freq - this.spectroInfo.low_freq)) / height / 1000 + this.spectroInfo.low_freq / 1000
       : -1;
-    const textValue = `${frequency.toFixed(1)}KHz`;
+    const textValue = `${frequency.toFixed(1)}kHz`;
     const { x: textX, y: textY } = this._getTextCoordinates();
     this.textData = [
       {
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index e780b3c6..995b02e8 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       const userSubmittedAnnotation = recording.fileAnnotations.find((annotation: FileAnnotation) => (
         annotation.owner === currentUser.value && annotation.submitted
       ));
-      return userSubmittedAnnotation?.species[0]?.species_code;
+      return userSubmittedAnnotation?.species[0]?.species_code || '';
     }
 
     function addSubmittedColumns() {
@@ -285,10 +285,10 @@ export default defineComponent({
     });
 
     onMounted(async () => {
-      addSubmittedColumns();
-      hideDetailedMetadataColumns();
       await fetchRecordingTags();
       await fetchRecordings();
+      addSubmittedColumns();
+      hideDetailedMetadataColumns();
     });
 
     const uploadDone = () => {
@@ -582,24 +582,39 @@ export default defineComponent({
           v-if="configuration.mark_annotations_completed_enabled"
           #item.submitted="{ item }"
         >
-          <v-icon
-            v-if="currentUserSubmissionStatus(item) === 1"
-            color="success"
-          >
-            mdi-check
-          </v-icon>
-          <v-icon
-            v-else-if="currentUserSubmissionStatus(item) === -1"
-            color="error"
-          >
-            mdi-close
-          </v-icon>
-          <v-icon
-            v-else
-            color="warning"
-          >
-            mdi-circle-outline
-          </v-icon>
+          <v-tooltip v-if="currentUserSubmissionStatus(item) === 1">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="success"
+              >
+                mdi-check
+              </v-icon>
+            </template>
+            You have submitted an annotation for this recording
+          </v-tooltip>
+          <v-tooltip v-else-if="currentUserSubmissionStatus(item) === 0">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="warning"
+              >
+                mdi-circle-outline
+              </v-icon>
+            </template>
+            You have created an annotation, but it has not been submitted
+          </v-tooltip>
+          <v-tooltip v-else>
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="error"
+              >
+                mdi-close
+              </v-icon>
+            </template>
+            You have not created an annotation for this recording
+          </v-tooltip>
         </template>
         <template #bottom />
       </v-data-table>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index cc4f8d2a..0d0a1ccb 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -639,8 +639,8 @@ export default defineComponent({
             v-if="configuration.mark_annotations_completed_enabled"
           >
             <v-col>
-              <v-row>
-                <v-col>
+              <v-row dense>
+                <v-col dense>
                   <span class="text-h6">
                     Vetting Controls
                   </span>
@@ -658,12 +658,15 @@ export default defineComponent({
                   </v-tooltip>
                 </v-col>
               </v-row>
-              <v-row>
+              <v-row dense>
                 <v-col>
                   <reference-materials-dialog />
                 </v-col>
               </v-row>
-              <v-row v-if="nextUnsubmittedRecordingId">
+              <v-row
+                v-if="nextUnsubmittedRecordingId"
+                dense
+              >
                 <v-col>
                   <v-btn
                     flat
@@ -701,24 +704,21 @@ export default defineComponent({
               />
             </v-col>
           </div>
-          <div v-if="sideTab === 'annotations'">
-            <annotation-list
-              :annotations="annotations"
-              :sequence-annotations="sequenceAnnotations"
-              :selected-annotation="selectedAnnotation"
-              :species="speciesList"
-              :recording-id="id"
-              @select="processSelection($event)"
-              @update:annotation="getAnnotationsList()"
-              @delete:annotation="
-                getAnnotationsList();
-                selectedId = null;
-              "
-            />
-          </div>
-          <div v-else-if="sideTab === 'recordings'">
-            <recording-list />
-          </div>
+          <annotation-list
+            v-if="sideTab === 'annotations'"
+            :annotations="annotations"
+            :sequence-annotations="sequenceAnnotations"
+            :selected-annotation="selectedAnnotation"
+            :species="speciesList"
+            :recording-id="id"
+            @select="processSelection($event)"
+            @update:annotation="getAnnotationsList()"
+            @delete:annotation="
+              getAnnotationsList();
+              selectedId = null;
+            "
+          />
+          <recording-list v-else />
         </v-card-text>
       </v-card>
     </v-col>