diff --git a/bats_ai/core/migrations/0012_alter_annotations_confidence.py b/bats_ai/core/migrations/0012_alter_annotations_confidence.py
new file mode 100644
index 0000000..f9c75a0
--- /dev/null
+++ b/bats_ai/core/migrations/0012_alter_annotations_confidence.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.1.13 on 2024-12-02 16:31
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('core', '0011_alter_annotations_options_annotations_confidence_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='annotations',
+            name='confidence',
+            field=models.FloatField(
+                default=1.0,
+                help_text='A confidence value between 0 and 1.0, default is 1.0.',
+                validators=[
+                    django.core.validators.MinValueValidator(0.0),
+                    django.core.validators.MaxValueValidator(1.0),
+                ],
+            ),
+        ),
+    ]
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index e9a668a..71f559a 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -62,6 +62,26 @@ class RecordingUploadSchema(Schema):
     unusual_occurrences: str = None
 
 
+class RecordingAnnotationSchema(Schema):
+    # species: list[SpeciesSchema] | None
+    comments: str | None = None
+    model: str | None = None
+    owner: str
+    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 AnnotationSchema(Schema):
     start_time: int
     end_time: int
@@ -74,7 +94,7 @@ class AnnotationSchema(Schema):
     owner_email: str = None
 
     @classmethod
-    def from_orm(cls, obj, owner_email=None, **kwargs):
+    def from_orm(cls, obj: Annotations, owner_email=None, **kwargs):
         return cls(
             start_time=obj.start_time,
             end_time=obj.end_time,
@@ -217,7 +237,10 @@ def get_recordings(request: HttpRequest, public: bool | None = None):
     for recording in recordings:
         user = User.objects.get(id=recording['owner_id'])
         fileAnnotations = RecordingAnnotation.objects.filter(recording=recording['id'])
-        recording['fileAnnotations'] = fileAnnotations
+        recording['fileAnnotations'] = [
+            RecordingAnnotationSchema.from_orm(fileAnnotation).dict()
+            for fileAnnotation in fileAnnotations
+        ]
         recording['owner_username'] = user.username
         recording['audio_file_presigned_url'] = default_storage.url(recording['audio_file'])
         recording['hasSpectrogram'] = Recording.objects.get(id=recording['id']).has_spectrogram
@@ -263,8 +286,13 @@ def get_recording(request: HttpRequest, id: int):
                 recording_id=recording['id'], owner=request.user
             ).exists()
             recording['userMadeAnnotations'] = user_has_annotations
-            annotations = RecordingAnnotation.objects.filter(recording=id).annotate('confidence')
-            recording['fileAnnotations'] = annotations
+            fileAnnotations = RecordingAnnotation.objects.filter(recording=id).order_by(
+                'confidence'
+            )
+            recording['fileAnnotations'] = [
+                RecordingAnnotationSchema.from_orm(fileAnnotation).dict()
+                for fileAnnotation in fileAnnotations
+            ]
 
             return recording
         else:
diff --git a/client/package.json b/client/package.json
index 7237695..ef94d4f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue-project-template",
+  "name": "bat-ai-client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/client/src/App.vue b/client/src/App.vue
index c2fb841..df706fa 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -12,7 +12,7 @@ export default defineComponent({
     const oauthClient = inject<OAuthClient>("oauthClient");
     const router = useRouter();
     const route = useRoute();
-    const { nextShared, sharedList } = useState();
+    const { nextShared, sharedList, sideTab, } = useState();
     const getShared = async () => {
       sharedList.value = (await getRecordings(true)).data;
     };
@@ -57,7 +57,7 @@ export default defineComponent({
       }
     });
 
-    return { oauthClient, containsSpectro, loginText, logInOrOut, activeTab, nextShared };
+    return { oauthClient, containsSpectro, loginText, logInOrOut, activeTab, nextShared, sideTab };
   },
 });
 </script>
diff --git a/client/src/components/AnnotationEditor.vue b/client/src/components/AnnotationEditor.vue
index 40cc2a3..f516fae 100644
--- a/client/src/components/AnnotationEditor.vue
+++ b/client/src/components/AnnotationEditor.vue
@@ -115,43 +115,45 @@ export default defineComponent({
         </v-btn>
       </v-row>
     </v-card-title>
-    <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-autocomplete
-        v-model="type"
-        multiple
-        closable-chips
-        chips
-        :items="callTypes"
-        label="Type"
-        @update:model-value="updateAnnotation()"
-      />
-    </v-row>
+    <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-autocomplete
+          v-model="type"
+          multiple
+          closable-chips
+          chips
+          :items="callTypes"
+          label="Type"
+          @update:model-value="updateAnnotation()"
+        />
+      </v-row>
 
-    <v-row>
-      <v-textarea
-        v-model="comments"
-        label="Comments"
-        @change="updateAnnotation()"
-      />
-    </v-row>
+      <v-row>
+        <v-textarea
+          v-model="comments"
+          label="Comments"
+          @change="updateAnnotation()"
+        />
+      </v-row>
+    </v-card-text> 
   </v-card>
 </template>
 
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index 6832295..cd4ac67 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -3,22 +3,34 @@ import { defineComponent, PropType } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
 import useState from "../use/useState";
 import { watch, ref } from "vue";
-import RecordingList from "./RecordingList.vue";
-
+import AnnotationEditor from "./AnnotationEditor.vue";
+import { Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
 export default defineComponent({
   name: "AnnotationList",
   components: {
-    RecordingList,
+    AnnotationEditor,
   },
   props: {
     spectroInfo: {
       type: Object as PropType<SpectroInfo | undefined>,
       default: () => undefined,
     },
+    selectedAnnotation: {
+      type: Object as PropType<SpectrogramAnnotation | SpectrogramTemporalAnnotation | null>,
+      default: () => null,
+    },
+    species: {
+        type: Array as PropType<Species[]>,
+        required: true,
+    },
+    recordingId: {
+        type: String,
+        required: true,
+    }
   },
-  emits: ['select'],
+  emits: ['select', 'update:annotation', 'delete:annotation'],
   setup() {
-    const { creationType, annotationState, setAnnotationState, annotations, temporalAnnotations, selectedId, selectedType, setSelectedId } = useState();
+    const { creationType, annotationState, setAnnotationState, annotations, temporalAnnotations, selectedId, selectedType, setSelectedId, sideTab } = useState();
     const tab = ref('pulse');
     const scrollToId = (id: number) => {
     const el = document.getElementById(`annotation-${id}`);
@@ -37,7 +49,7 @@ export default defineComponent({
   });
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tabSwitch = (event: any) => {
-    // On tab switches we want to deselect the curret anntation
+    // 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';
@@ -58,164 +70,167 @@ export default defineComponent({
         setSelectedId,
         tabSwitch,
         tab,
+        sideTab,
     };
   },
 });
 </script>
 
 <template>
-  <v-card
-    class="pa-0 ma-0"
+  <div
+    class="pa-2"
     :class="{'annotation-list': ['pulse','sequence'].includes(tab),'recording-list': !['pulse','sequence'].includes(tab)}"
   >
-    <v-card-title>
-      <v-row dense>
-        <v-tabs
-          v-model="tab"
-          class="ma-auto"
-          @update:model-value="tabSwitch($event)"
+    <v-row dense>
+      <v-tabs
+        v-model="tab"
+        class="ma-auto"
+        @update:model-value="tabSwitch($event)"
+      >
+        <v-tab
+          value="recording"
+          size="x-small"
         >
-          <v-tab
-            value="recordings"
-            size="x-small"
-          >
-            Recordings
-          </v-tab>
-          <v-tab
-            value="pulse"
-            size="x-small"
-          >
-            Pulse
-          </v-tab>
-          <v-tab
-            value="sequence"
-            size="x-small"
-          >
-            Sequence
-          </v-tab>
-        </v-tabs>
-      </v-row>
-    </v-card-title>
-    <v-card-text class="">
-      <v-window v-model="tab">
-        <v-window-item value="recordings">
-          <recording-list />
-        </v-window-item>
-        <v-window-item value="pulse">
-          <v-row class="pa-2">
-            <v-col>
-              Annotations
-            </v-col>
-            <v-spacer />
-            <v-col>
-              <v-btn
-                :disabled="annotationState === 'creating'"
-                @click="annotationState = 'creating'; creationType = 'pulse' "
-              >
-                Add<v-icon>mdi-plus</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
+          Recording
+        </v-tab>
+        <v-tab
+          value="pulse"
+          size="x-small"
+        >
+          Pulse
+        </v-tab>
+        <v-tab
+          value="sequence"
+          size="x-small"
+        >
+          Sequence
+        </v-tab>
+      </v-tabs>
+    </v-row>
+    <v-window v-model="tab">
+      <v-window-item value="pulse">
+        <v-row class="pa-2">
+          <v-col>
+            Annotations
+          </v-col>
+          <v-spacer />
+          <v-col>
+            <v-btn
+              :disabled="annotationState === 'creating'"
+              @click="annotationState = 'creating'; creationType = 'pulse' "
+            >
+              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===selectedId}"
-              class="annotation-item"
-              @click="setSelectedId(annotation.id, 'pulse')"
+        <v-list>
+          <v-list-item
+            v-for="annotation in annotations"
+            :id="`annotation-${annotation.id}`"
+            :key="annotation.id"
+            :class="{selected: annotation.id===selectedId}"
+            class="annotation-item"
+            @click="setSelectedId(annotation.id, 'pulse')"
+          >
+            <v-row>
+              <v-col class="annotation-time">
+                <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
+                <span class="pl-2"><b>({{ annotation.end_time - annotation.start_time }}ms)</b></span>
+              </v-col>
+              <v-col class="annotation-freq">
+                <span>{{ (annotation.low_freq/1000).toFixed(1) }}-{{ (annotation.high_freq/1000).toFixed() }}Khz </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>
+      </v-window-item>
+      <v-window-item value="sequence">
+        <v-row class="pa-2">
+          <v-col>
+            Annotations
+          </v-col>
+          <v-spacer />
+          <v-col>
+            <v-btn
+              :disabled="annotationState === 'creating'"
+              @click="annotationState = 'creating'; creationType = 'sequence' "
             >
-              <v-row>
-                <v-col class="annotation-time">
-                  <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
-                  <span class="pl-2"><b>({{ annotation.end_time - annotation.start_time }}ms)</b></span>
-                </v-col>
-                <v-col class="annotation-freq">
-                  <span>{{ (annotation.low_freq/1000).toFixed(1) }}-{{ (annotation.high_freq/1000).toFixed() }}Khz </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>
-        </v-window-item>
-        <v-window-item value="sequence">
-          <v-row class="pa-2">
-            <v-col>
-              Annotations
-            </v-col>
-            <v-spacer />
-            <v-col>
-              <v-btn
-                :disabled="annotationState === 'creating'"
-                @click="annotationState = 'creating'; creationType = 'sequence' "
-              >
-                Add<v-icon>mdi-plus</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
+              Add<v-icon>mdi-plus</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
 
-          <v-list>
-            <v-list-item
-              v-for="annotation in temporalAnnotations"
-              :id="`annotation-${annotation.id}`"
-              :key="annotation.id"
-              :class="{selected: annotation.id===selectedId}"
-              class="annotation-item"
-              @click="setSelectedId(annotation.id, 'sequence')"
+        <v-list>
+          <v-list-item
+            v-for="annotation in temporalAnnotations"
+            :id="`annotation-${annotation.id}`"
+            :key="annotation.id"
+            :class="{selected: annotation.id===selectedId}"
+            class="annotation-item"
+            @click="setSelectedId(annotation.id, 'sequence')"
+          >
+            <v-row>
+              <v-col class="annotation-time">
+                <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
+                <span class="pl-2"><b>({{ annotation.end_time - annotation.start_time }}ms)</b></span>
+              </v-col>
+              <v-col class="annotation-time">
+                <b>Type:</b><span>{{ annotation.type }}</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-row>
-                <v-col class="annotation-time">
-                  <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
-                  <span class="pl-2"><b>({{ annotation.end_time - annotation.start_time }}ms)</b></span>
-                </v-col>
-                <v-col class="annotation-time">
-                  <b>Type:</b><span>{{ annotation.type }}</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>
-        </v-window-item>
-      </v-window>
-    </v-card-text>
-  </v-card>
+              <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>
+      </v-window-item>
+      <annotation-editor
+        v-if="selectedAnnotation"
+        :species="species"
+        :recording-id="recordingId"
+        :annotation="selectedAnnotation"
+        @update:annotation="$emit('update:annotation')"
+        @delete:annotation="$emit('delete:annotation')"
+        class="mt-4"
+      />
+    </v-window>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/RecordingAnnotation.vue b/client/src/components/RecordingAnnotation.vue
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 20ca538..475a9bb 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -21,6 +21,7 @@ const nextShared: Ref<Recording | false> = ref(false);
 const blackBackground = ref(true);
 const scaledVals: Ref<{x: number, y: number}> = ref({x: 0, y: 0});
 const viewCompressedOverlay = ref(false);
+const sideTab: Ref<'annotations' | 'recordings'> = ref('annotations');
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -97,5 +98,6 @@ export default function useState() {
     blackBackground,
     scaledVals,
     viewCompressedOverlay,
+    sideTab,
   };
 }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 910846c..b1fda64 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -20,8 +20,8 @@ import {
 import SpectrogramViewer from "../components/SpectrogramViewer.vue";
 import { SpectroInfo } from "../components/geoJS/geoJSUtils";
 import AnnotationList from "../components/AnnotationList.vue";
-import AnnotationEditor from "../components/AnnotationEditor.vue";
 import ThumbnailViewer from "../components/ThumbnailViewer.vue";
+import RecordingList from "../components/RecordingList.vue";
 import useState from "../use/useState";
 import RecordingInfoDialog from "../components/RecordingInfoDialog.vue";
 export default defineComponent({
@@ -29,9 +29,9 @@ export default defineComponent({
   components: {
     SpectrogramViewer,
     AnnotationList,
-    AnnotationEditor,
     ThumbnailViewer,
     RecordingInfoDialog,
+    RecordingList,
   },
   props: {
     id: {
@@ -55,6 +55,7 @@ export default defineComponent({
       selectedType,
       scaledVals,
       viewCompressedOverlay,
+      sideTab,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
@@ -267,6 +268,7 @@ export default defineComponent({
       freqRef,
       toggleCompressedOverlay,
       viewCompressedOverlay,
+      sideTab,
       // Other user selection
       otherUserAnnotations,
       temporalAnnotations,
@@ -282,7 +284,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-row>
+  <v-row dense>
     <v-dialog
       v-model="recordingInfo"
       width="600"
@@ -505,23 +507,70 @@ export default defineComponent({
       />
     </v-col>
     <v-col style="max-width: 400px">
-      <annotation-list
-        :annotations="annotations"
-        :temporal-annotations="temporalAnnotations"
-        @select="processSelection($event)"
-      />
-      <annotation-editor
-        v-if="selectedAnnotation"
-        :species="speciesList"
-        :recording-id="id"
-        :annotation="selectedAnnotation"
-        class="mt-4"
-        @update:annotation="getAnnotationsList()"
-        @delete:annotation="
-          getAnnotationsList();
-          selectedId = null;
-        "
-      />
+      <v-card>
+        <v-card-title>
+          <v-row dense>
+            <v-spacer />
+            <v-tooltip
+              bottom
+            >
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  :variant="sideTab === 'recordings' ? 'flat' : 'outlined'"
+                  :color="sideTab === 'recordings' ? 'primary' : ''"
+                  class="mx-2"
+                  size="small"
+                  @click="sideTab = 'recordings'"
+                >
+                  Recordings
+                </v-btn>
+              </template>
+              <span>
+                View Recordings in sideTab
+              </span>
+            </v-tooltip>
+            <v-tooltip
+              bottom
+            >
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  :variant="sideTab === 'annotations' ? 'flat' : 'outlined'"
+                  :color="sideTab === 'annotations' ? 'primary' : ''"
+                  class="mx-2"
+                  size="small"
+                  @click="sideTab = 'annotations'"
+                >
+                  Annotations
+                </v-btn>
+              </template>
+              <span>
+                View Annotations in sideTab
+              </span>
+            </v-tooltip>
+            <v-spacer />
+          </v-row>
+        </v-card-title>
+        <v-card-text class="pa-0">
+          <div v-if="sideTab === 'annotations'">
+            <annotation-list
+              :annotations="annotations"
+              :temporal-annotations="temporalAnnotations"
+              :selected-annotation="selectedAnnotation"
+              @select="processSelection($event)"
+              @update:annotation="getAnnotationsList()"
+              @delete:annotation="
+                getAnnotationsList();
+                selectedId = null;
+              "
+            />
+          </div>
+          <div v-else-if="sideTab === 'recordings'">
+            <recording-list />
+          </div>
+        </v-card-text>
+      </v-card>
     </v-col>
   </v-row>
 </template>