diff --git a/bats_ai/core/admin/__init__.py b/bats_ai/core/admin/__init__.py
index 68eb9b8..23510a1 100644
--- a/bats_ai/core/admin/__init__.py
+++ b/bats_ai/core/admin/__init__.py
@@ -1,11 +1,15 @@
 from .annotations import AnnotationsAdmin
 from .image import ImageAdmin
 from .recording import RecordingAdmin
+from .species import SpeciesAdmin
 from .spectrogram import SpectrogramAdmin
+from .temporal_annotations import TemporalAnnotationsAdmin
 
 __all__ = [
     'AnnotationsAdmin',
     'ImageAdmin',
     'RecordingAdmin',
     'SpectrogramAdmin',
+    'TemporalAnnotationsAdmin',
+    'SpeciesAdmin',
 ]
diff --git a/bats_ai/core/admin/species.py b/bats_ai/core/admin/species.py
new file mode 100644
index 0000000..cad6420
--- /dev/null
+++ b/bats_ai/core/admin/species.py
@@ -0,0 +1,17 @@
+from django.contrib import admin
+
+from bats_ai.core.models import Species
+
+
+@admin.register(Species)
+class SpeciesAdmin(admin.ModelAdmin):
+    list_display = [
+        'pk',
+        'species_code',
+        'family',
+        'genus',
+        'species',
+        'common_name',
+        'species_code_6',
+    ]
+    list_select_related = True
diff --git a/bats_ai/core/admin/temporal_annotations.py b/bats_ai/core/admin/temporal_annotations.py
new file mode 100644
index 0000000..9415855
--- /dev/null
+++ b/bats_ai/core/admin/temporal_annotations.py
@@ -0,0 +1,18 @@
+from django.contrib import admin
+
+from bats_ai.core.models import TemporalAnnotations
+
+
+@admin.register(TemporalAnnotations)
+class TemporalAnnotationsAdmin(admin.ModelAdmin):
+    list_display = [
+        'pk',
+        'recording',
+        'owner',
+        'start_time',
+        'end_time',
+        'type',
+        'comments',
+    ]
+    list_select_related = True
+    autocomplete_fields = ['owner']
diff --git a/bats_ai/core/migrations/0007_temporalannotations.py b/bats_ai/core/migrations/0007_temporalannotations.py
new file mode 100644
index 0000000..6549b82
--- /dev/null
+++ b/bats_ai/core/migrations/0007_temporalannotations.py
@@ -0,0 +1,43 @@
+# Generated by Django 4.1.13 on 2024-02-15 18:08
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('core', '0006_alter_recording_recording_location'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TemporalAnnotations',
+            fields=[
+                (
+                    'id',
+                    models.BigAutoField(
+                        auto_created=True, primary_key=True, serialize=False, verbose_name='ID'
+                    ),
+                ),
+                ('start_time', models.IntegerField(blank=True, null=True)),
+                ('end_time', models.IntegerField(blank=True, null=True)),
+                ('type', models.TextField(blank=True, null=True)),
+                ('comments', models.TextField(blank=True, null=True)),
+                (
+                    'owner',
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+                (
+                    'recording',
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to='core.recording'
+                    ),
+                ),
+                ('species', models.ManyToManyField(to='core.species')),
+            ],
+        ),
+    ]
diff --git a/bats_ai/core/models/__init__.py b/bats_ai/core/models/__init__.py
index 3dfd89d..cc8bf05 100644
--- a/bats_ai/core/models/__init__.py
+++ b/bats_ai/core/models/__init__.py
@@ -4,6 +4,7 @@
 from .recording_annotation_status import RecordingAnnotationStatus
 from .species import Species
 from .spectrogram import Spectrogram
+from .temporal_annotations import TemporalAnnotations
 
 __all__ = [
     'Annotations',
@@ -12,4 +13,5 @@
     'RecordingAnnotationStatus',
     'Species',
     'Spectrogram',
+    'TemporalAnnotations',
 ]
diff --git a/bats_ai/core/models/temporal_annotations.py b/bats_ai/core/models/temporal_annotations.py
new file mode 100644
index 0000000..501e2ac
--- /dev/null
+++ b/bats_ai/core/models/temporal_annotations.py
@@ -0,0 +1,15 @@
+from django.contrib.auth.models import User
+from django.db import models
+
+from .recording import Recording
+from .species import Species
+
+
+class TemporalAnnotations(models.Model):
+    recording = models.ForeignKey(Recording, on_delete=models.CASCADE)
+    owner = models.ForeignKey(User, on_delete=models.CASCADE)
+    start_time = models.IntegerField(blank=True, null=True)
+    end_time = models.IntegerField(blank=True, null=True)
+    type = models.TextField(blank=True, null=True)
+    comments = models.TextField(blank=True, null=True)
+    species = models.ManyToManyField(Species)
diff --git a/bats_ai/core/views/__init__.py b/bats_ai/core/views/__init__.py
index 6a0e84a..ddf5efb 100644
--- a/bats_ai/core/views/__init__.py
+++ b/bats_ai/core/views/__init__.py
@@ -1,7 +1,11 @@
+from .annotations import router as AnnotationRouter
 from .recording import router as RecordingRouter
 from .species import router as SpeciesRouter
+from .temporal_annotations import router as TemporalAnnotationRouter
 
 __all__ = [
     'RecordingRouter',
     'SpeciesRouter',
+    'AnnotationRouter',
+    'TemporalAnnotationRouter',
 ]
diff --git a/bats_ai/core/views/annotations.py b/bats_ai/core/views/annotations.py
index 68c9445..e83fd25 100644
--- a/bats_ai/core/views/annotations.py
+++ b/bats_ai/core/views/annotations.py
@@ -2,9 +2,9 @@
 
 from django.http import HttpRequest
 from ninja import Schema
-from ninja.errors import HttpError
 from ninja.pagination import RouterPaginated
-from oauth2_provider.models import AccessToken
+
+from bats_ai.core.models import Annotations, Recording
 
 logger = logging.getLogger(__name__)
 
@@ -23,10 +23,28 @@ class AnnotationSchema(Schema):
     comments: str
 
 
-def get_owner_id(request: HttpRequest):
-    token = request.headers.get('Authorization').replace('Bearer ', '')
-    token_found = AccessToken.objects.get(token=token)
-    if not token_found:
-        raise HttpError(401, 'Authentication credentials were not provided.')
+@router.get('/{id}')
+def get_annotation(request: HttpRequest, id: int):
+    try:
+        annotation = Annotations.objects.get(pk=id)
+        recording = annotation.recording
+
+        # Check if the user owns the recording or if the recording is public
+        if recording.owner == request.user or recording.public:
+            # Query annotations associated with the recording that are owned by the current user
+            annotations_qs = Annotations.objects.filter(recording=recording, owner=request.user)
+
+            # Serialize the annotations using AnnotationSchema
+            annotations_data = [
+                AnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+                for annotation in annotations_qs
+            ]
+
+            return annotations_data
+        else:
+            return {
+                'error': 'Permission denied. You do not own this annotation, or the associated recording is not public.'
+            }
 
-    return token_found.user.pk
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 4fc9323..f9926fa 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -10,8 +10,12 @@
 from ninja.files import UploadedFile
 from ninja.pagination import RouterPaginated
 
-from bats_ai.core.models import Annotations, Recording, Species
+from bats_ai.core.models import Annotations, Recording, Species, TemporalAnnotations
 from bats_ai.core.views.species import SpeciesSchema
+from bats_ai.core.views.temporal_annotations import (
+    TemporalAnnotationSchema,
+    UpdateTemporalAnnotationSchema,
+)
 
 logger = logging.getLogger(__name__)
 
@@ -202,13 +206,22 @@ def get_spectrogram(request: HttpRequest, id: int):
     spectro_data['currentUser'] = request.user.email
 
     annotations_qs = Annotations.objects.filter(recording=recording, owner=request.user)
+    temporal_annotations_qs = TemporalAnnotations.objects.filter(
+        recording=recording, owner=request.user
+    )
 
     # Serialize the annotations using AnnotationSchema
     annotations_data = [
         AnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
         for annotation in annotations_qs
     ]
+    temporal_annotations_data = [
+        TemporalAnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+        for annotation in temporal_annotations_qs
+    ]
+
     spectro_data['annotations'] = annotations_data
+    spectro_data['temporal'] = temporal_annotations_data
     return spectro_data
 
 
@@ -306,6 +319,9 @@ def get_other_user_annotations(request: HttpRequest, id: int):
             annotations_qs = Annotations.objects.filter(recording=recording).exclude(
                 owner=request.user
             )
+            temporal_qs = TemporalAnnotations.objects.filter(recording=recording).exclude(
+                owner=request.user
+            )
 
             # Create a dictionary to store annotations for each user
             annotations_by_user = {}
@@ -315,13 +331,24 @@ def get_other_user_annotations(request: HttpRequest, id: int):
                 user_email = annotation.owner.email
 
                 # If user_email is not already a key in the dictionary, initialize it with an empty list
-                annotations_by_user.setdefault(user_email, [])
+                annotations_by_user.setdefault(user_email, {'annotations': [], 'temporal': []})
 
                 # Append the annotation to the list for the corresponding user_email
-                annotations_by_user[user_email].append(
+                annotations_by_user[user_email]['annotations'].append(
                     AnnotationSchema.from_orm(annotation, owner_email=user_email).dict()
                 )
 
+            for annotation in temporal_qs:
+                user_email = annotation.owner.email
+
+                # If user_email is not already a key in the dictionary, initialize it with an empty list
+                annotations_by_user.setdefault(user_email, {'annotations': [], 'temporal': []})
+
+                # Append the annotation to the list for the corresponding user_email
+                annotations_by_user[user_email]['temporal'].append(
+                    TemporalAnnotationSchema.from_orm(annotation, owner_email=user_email).dict()
+                )
+
             return annotations_by_user
         else:
             return {
@@ -403,7 +430,7 @@ def patch_annotation(
     recording_id: int,
     id: int,
     annotation: UpdateAnnotationsSchema,
-    species_ids: list[int],
+    species_ids: list[int] | None,
 ):
     try:
         recording = Recording.objects.get(pk=recording_id)
@@ -428,16 +455,68 @@ def patch_annotation(
             annotation_instance.save()
 
             # Clear existing species associations
-            annotation_instance.species.clear()
+            if species_ids:
+                annotation_instance.species.clear()
+                # Add species to the annotation based on the provided species_ids
+                for species_id in species_ids:
+                    try:
+                        species_obj = Species.objects.get(pk=species_id)
+                        annotation_instance.species.add(species_obj)
+                    except Species.DoesNotExist:
+                        # Handle the case where the species with the given ID doesn't exist
+                        return {'error': f'Species with ID {species_id} not found'}
 
-            # Add species to the annotation based on the provided species_ids
-            for species_id in species_ids:
-                try:
-                    species_obj = Species.objects.get(pk=species_id)
-                    annotation_instance.species.add(species_obj)
-                except Species.DoesNotExist:
-                    # Handle the case where the species with the given ID doesn't exist
-                    return {'error': f'Species with ID {species_id} not found'}
+            return {'message': 'Annotation updated successfully', 'id': annotation_instance.pk}
+        else:
+            return {
+                'error': 'Permission denied. You do not own this recording, and it is not public.'
+            }
+
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
+    except Annotations.DoesNotExist:
+        return {'error': 'Annotation not found'}
+
+
+@router.patch('/{recording_id}/temporal-annotations/{id}')
+def patch_temporal_annotation(
+    request,
+    recording_id: int,
+    id: int,
+    annotation: UpdateTemporalAnnotationSchema,
+    species_ids: list[int] | None,
+):
+    try:
+        recording = Recording.objects.get(pk=recording_id)
+
+        # Check if the user owns the recording or if the recording is public
+        if recording.owner == request.user or recording.public:
+            annotation_instance = TemporalAnnotations.objects.get(
+                pk=id, recording=recording, owner=request.user
+            )
+
+            # Update annotation details
+            if annotation.start_time:
+                annotation_instance.start_time = annotation.start_time
+            if annotation.end_time:
+                annotation_instance.end_time = annotation.end_time
+            if annotation.comments:
+                annotation_instance.comments = annotation.comments
+            if annotation.type:
+                annotation_instance.type = annotation.type
+            annotation_instance.save()
+
+            # Clear existing species associations
+            if species_ids:
+                annotation_instance.species.clear()
+                # Add species to the annotation based on the provided species_ids
+                for species_id in species_ids:
+                    try:
+                        species_obj = Species.objects.get(pk=species_id)
+                        annotation_instance.species.add(species_obj)
+                    except Species.DoesNotExist:
+                        # Handle the case where the species with the given ID doesn't exist
+                        return {'error': f'Species with ID {species_id} not found'}
 
             return {'message': 'Annotation updated successfully', 'id': annotation_instance.pk}
         else:
@@ -475,3 +554,90 @@ def delete_annotation(request, recording_id: int, id: int):
         return {'error': 'Recording not found'}
     except Annotations.DoesNotExist:
         return {'error': 'Annotation not found'}
+
+
+# TEMPORAL ANNOTATIONS
+
+
+@router.get('/{id}/temporal-annotations')
+def get_temporal_annotations(request: HttpRequest, id: int):
+    try:
+        recording = Recording.objects.get(pk=id)
+
+        # Check if the user owns the recording or if the recording is public
+        if recording.owner == request.user or recording.public:
+            # Query annotations associated with the recording that are owned by the current user
+            annotations_qs = TemporalAnnotations.objects.filter(
+                recording=recording, owner=request.user
+            )
+
+            # Serialize the annotations using AnnotationSchema
+            annotations_data = [
+                TemporalAnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+                for annotation in annotations_qs
+            ]
+
+            return annotations_data
+        else:
+            return {
+                'error': 'Permission denied. You do not own this recording, and it is not public.'
+            }
+
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
+
+
+@router.put('/{id}/temporal-annotations')
+def put_temporal_annotation(
+    request,
+    id: int,
+    annotation: TemporalAnnotationSchema,
+    species_ids: list[int] | None,
+):
+    try:
+        recording = Recording.objects.get(pk=id)
+        if recording.owner == request.user or recording.public:
+            # Create a new annotation
+            new_annotation = TemporalAnnotations.objects.create(
+                recording=recording,
+                owner=request.user,
+                start_time=annotation.start_time,
+                end_time=annotation.end_time,
+                type=annotation.type,
+                comments=annotation.comments,
+            )
+
+            return {'message': 'Annotation added successfully', 'id': new_annotation.pk}
+        else:
+            return {
+                'error': 'Permission denied. You do not own this recording, and it is not public.'
+            }
+
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
+
+
+@router.delete('/{recording_id}/temporal-annotations/{id}')
+def delete_temporal_annotation(request, recording_id: int, id: int):
+    try:
+        recording = Recording.objects.get(pk=recording_id)
+
+        # Check if the user owns the recording or if the recording is public
+        if recording.owner == request.user or recording.public:
+            annotation_instance = TemporalAnnotations.objects.get(
+                pk=id, recording=recording, owner=request.user
+            )
+
+            # Delete the annotation
+            annotation_instance.delete()
+
+            return {'message': 'Annotation deleted successfully'}
+        else:
+            return {
+                'error': 'Permission denied. You do not own this recording, and it is not public.'
+            }
+
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
+    except Annotations.DoesNotExist:
+        return {'error': 'Annotation not found'}
diff --git a/bats_ai/core/views/temporal_annotations.py b/bats_ai/core/views/temporal_annotations.py
new file mode 100644
index 0000000..0495acb
--- /dev/null
+++ b/bats_ai/core/views/temporal_annotations.py
@@ -0,0 +1,66 @@
+from django.http import HttpRequest
+from ninja import Schema
+from ninja.pagination import RouterPaginated
+
+from bats_ai.core.models import Annotations, Recording, TemporalAnnotations
+from bats_ai.core.views.species import SpeciesSchema
+
+router = RouterPaginated()
+
+
+class TemporalAnnotationSchema(Schema):
+    id: int
+    start_time: int
+    end_time: int
+    type: str
+    comments: str
+    species: list[SpeciesSchema] | None
+    owner_email: str = None
+
+    @classmethod
+    def from_orm(cls, obj, owner_email=None, **kwargs):
+        return cls(
+            start_time=obj.start_time,
+            end_time=obj.end_time,
+            type=obj.type,
+            species=[SpeciesSchema.from_orm(species) for species in obj.species.all()],
+            comments=obj.comments,
+            id=obj.id,
+            owner_email=owner_email,  # Include owner_email in the schema
+        )
+
+
+class UpdateTemporalAnnotationSchema(Schema):
+    start_time: int = None
+    end_time: int = None
+    type: str | None = None
+    comments: str | None = None
+
+
+@router.get('/{id}')
+def get_temporal_annotation(request: HttpRequest, id: int):
+    try:
+        annotation = Annotations.objects.get(pk=id)
+        recording = annotation.recording
+
+        # Check if the user owns the recording or if the recording is public
+        if recording.owner == request.user or recording.public:
+            # Query annotations associated with the recording that are owned by the current user
+            annotations_qs = TemporalAnnotations.objects.filter(
+                recording=recording, owner=request.user
+            )
+
+            # Serialize the annotations using AnnotationSchema
+            annotations_data = [
+                TemporalAnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+                for annotation in annotations_qs
+            ]
+
+            return annotations_data
+        else:
+            return {
+                'error': 'Permission denied. You do not own this annotation, or the associated recording is not public.'
+            }
+
+    except Recording.DoesNotExist:
+        return {'error': 'Recording not found'}
diff --git a/client/src/App.vue b/client/src/App.vue
index c31c389..43b0aa9 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,18 +1,21 @@
 <script lang="ts">
 import { defineComponent, inject, computed, ref } from 'vue';
 import OAuthClient from '@girder/oauth-client';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   setup() {
     const oauthClient = inject<OAuthClient>('oauthClient');
+    const router = useRouter();
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
     }
 
     const loginText = computed(() => (oauthClient.isLoggedIn ? 'Logout' : 'Login'));
-    const logInOrOut = () => {
+    const logInOrOut = async () => {
       if (oauthClient.isLoggedIn) {
-        oauthClient.logout();
+        await oauthClient.logout();
+        router.push('Login');
       } else {
         oauthClient.redirectToLogin();
       }
@@ -27,6 +30,7 @@ export default defineComponent({
   <v-app id="app">
     <v-app-bar app>
       <v-tabs
+        v-if="oauthClient.isLoggedIn"
         fixed-tabs
         :model-value="activeTab"
       >
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 5a0be0c..d7af174 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -60,6 +60,18 @@ export interface SpectrogramAnnotation {
     owner_email?: string;
 }
 
+export interface SpectrogramTemporalAnnotation {
+    start_time: number;
+    end_time: number;
+    id: number;
+    editing?: boolean;
+    type?: string;
+    comments?: string;
+    species?: Species[];
+    owner_email?: string;
+}
+
+
 export interface UpdateSpectrogramAnnotation {
     start_time?: number;
     end_time?: number;
@@ -71,6 +83,16 @@ export interface UpdateSpectrogramAnnotation {
     comments?: string;
 }
 
+export interface UpdateSpectrogramTemporalAnnotation {
+    start_time?: number;
+    end_time?: number;
+    id?: number;
+    editing?: boolean;
+    species?: Species[];
+    comments?: string;
+    type?: string;
+}
+
 export interface UserInfo {
     username: string;
     email: string;
@@ -81,13 +103,14 @@ export interface Spectrogram {
     url?: string;
     filename?: string;
     annotations?: SpectrogramAnnotation[];
+    temporal?: SpectrogramTemporalAnnotation[];
     spectroInfo?: SpectroInfo;
     currentUser?: string;
     otherUsers?: UserInfo[];
 
 }
 
-export type OtherUserAnnotations = Record<string, SpectrogramAnnotation[]>;
+export type OtherUserAnnotations = Record<string, {annotations: SpectrogramAnnotation[], temporal: SpectrogramTemporalAnnotation[]}>;
 
 interface PaginatedNinjaResponse<T> {
     count: number,
@@ -174,25 +197,40 @@ async function getSpectrogramCompressed(id: string) {
 
 async function getAnnotations(recordingId: string) {
     return axiosInstance.get<SpectrogramAnnotation[]>(`/recording/${recordingId}/annotations`);
+}
 
+async function getTemporalAnnotations(recordingId: string) {
+    return axiosInstance.get<SpectrogramTemporalAnnotation[]>(`/recording/${recordingId}/temporal-annotations`);
 }
 
 async function getSpecies() {
     return axiosInstance.get<Species[]>('/species/');
 }
 
-async function patchAnnotation(recordingId: string, annotationId: number, annotation: UpdateSpectrogramAnnotation, speciesList: number[] = []) {
+async function patchAnnotation(recordingId: string, annotationId: number, annotation: UpdateSpectrogramAnnotation, speciesList: number[] | null = null) {
     return axiosInstance.patch(`/recording/${recordingId}/annotations/${annotationId}`, { annotation, species_ids: speciesList});
 }
 
+async function patchTemporalAnnotation(recordingId: string, annotationId: number, annotation: UpdateSpectrogramTemporalAnnotation, speciesList: number[] | null = null) {
+    return axiosInstance.patch(`/recording/${recordingId}/temporal-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 putTemporalAnnotation(recordingId: string, annotation: UpdateSpectrogramTemporalAnnotation, speciesList: number[] | null = null) {
+    return axiosInstance.put<{message: string, id: number}>(`/recording/${recordingId}/temporal-annotations`, { annotation, species_ids: speciesList});
+}
+
 async function deleteAnnotation(recordingId: string, annotationId: number) {
     return axiosInstance.delete(`/recording/${recordingId}/annotations/${annotationId}`);
 }
 
+async function deleteTemporalAnnotation(recordingId: string, annotationId: number) {
+    return axiosInstance.delete(`/recording/${recordingId}/temporal-annotations/${annotationId}`);
+}
+
 async function getOtherUserAnnotations(recordingId: string) {
     return axiosInstance.get<OtherUserAnnotations>(`/recording/${recordingId}/annotations/other_users`);
 }
@@ -203,10 +241,14 @@ export {
  patchRecording,
  getSpectrogram,
  getSpectrogramCompressed,
+ getTemporalAnnotations,
  getOtherUserAnnotations,
  getSpecies,
  getAnnotations,
  patchAnnotation,
+ patchTemporalAnnotation,
  putAnnotation,
- deleteAnnotation
+ putTemporalAnnotation,
+ deleteAnnotation,
+ deleteTemporalAnnotation,
 };
\ No newline at end of file
diff --git a/client/src/components/AnnotationEditor.vue b/client/src/components/AnnotationEditor.vue
index 5321a3a..76715c1 100644
--- a/client/src/components/AnnotationEditor.vue
+++ b/client/src/components/AnnotationEditor.vue
@@ -1,7 +1,8 @@
 <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";
+import { deleteAnnotation, deleteTemporalAnnotation, patchAnnotation, patchTemporalAnnotation, Species, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import useState from "../use/useState";
 
 export default defineComponent({
   name: "AnnotationEditor",
@@ -13,7 +14,7 @@ export default defineComponent({
       default: () => undefined,
     },
     annotation: {
-      type: Object as PropType<SpectrogramAnnotation | null>,
+      type: Object as PropType<SpectrogramAnnotation | SpectrogramTemporalAnnotation | null>,
       default: () => null,
     },
     species: {
@@ -27,30 +28,42 @@ export default defineComponent({
   },
   emits: ['update:annotation', 'delete:annotation'],
   setup(props, { emit }) {
+    const { selectedType } = useState();
     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 type: Ref<string> = ref('');
+    if (selectedType.value === 'sequence') {
+      type.value = (props.annotation as SpectrogramTemporalAnnotation).type || '';
+    }
     watch(() => props.annotation, () => {
         if (props.annotation?.species) {
             speciesEdit.value = props.annotation.species.map((item) => item.species_code || item.common_name);
         }
-        if (props.annotation?.comments) {
+        if (selectedType.value === 'pulse' && props.annotation?.comments) {
             comments.value = props.annotation.comments;
         }
+        if (selectedType.value === 'pulse' && (props.annotation as SpectrogramTemporalAnnotation).type) {
+            type.value = (props.annotation as SpectrogramTemporalAnnotation).type || '';
+        }
     });
     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);
+                const found = props.species.find((specie) => specie.species_code === item);
                 if (found) {
                     speciesIds.push(found.id);
                 }
             });
-            await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value }, speciesIds );
+            if (selectedType.value === 'pulse') {
+              await patchAnnotation(props.recordingId, props.annotation?.id, { ...props.annotation, comments: comments.value }, speciesIds );
+            } else if (selectedType.value === 'sequence') {
+              await patchTemporalAnnotation(props.recordingId, props.annotation.id, {...props.annotation, comments: comments.value, type: type.value,}, speciesIds);
+            }
             // Signal to redownload the updated annotation values if possible
             emit('update:annotation');
         }
@@ -58,15 +71,22 @@ export default defineComponent({
     };
 
     const deleteAnno = async () => {
-        if (props.annotation && props.recordingId) {
+      if (props.annotation && props.recordingId && selectedType.value === 'pulse') {
             await deleteAnnotation(props.recordingId, props.annotation.id);
             emit('delete:annotation');
         }
+        if (props.annotation && props.recordingId && selectedType.value === 'sequence') {
+            await deleteTemporalAnnotation(props.recordingId, props.annotation.id);
+            emit('delete:annotation');
+        }
+        
     };
     return {
         speciesList,
         speciesEdit,
         comments,
+        type,
+        selectedType,
         updateAnnotation,
         deleteAnno
     };
@@ -101,6 +121,14 @@ export default defineComponent({
         @update:model-value="updateAnnotation()"
       />
     </v-row>
+    <v-row v-if="selectedType === 'sequence'">
+      <v-text-field
+        v-model="type"
+        label="Type"
+        @change="updateAnnotation()"
+      />
+    </v-row>
+
     <v-row>
       <v-textarea
         v-model="comments"
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index f2e15c9..589860e 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
-import { SpectrogramAnnotation } from "../api/api";
 import useState from "../use/useState";
-import { watch } from "vue";
+import { watch, ref } from "vue";
 
 export default defineComponent({
   name: "AnnotationList",
@@ -14,34 +13,36 @@ export default defineComponent({
       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(props) {
-    const { annotationState, setAnnotationState } = useState();
+  setup() {
+    const { creationType, annotationState, setAnnotationState, annotations, temporalAnnotations, selectedId, selectedType, setSelectedId } = useState();
+    const tab = ref('sequence');
     const scrollToId = (id: number) => {
     const el = document.getElementById(`annotation-${id}`);
     if (el) {
       el.scrollIntoView({block: 'end', behavior: 'smooth'});
     }
   };
-  watch(() => props.selectedId, () => {
-    if (props.selectedId !== null) {
-      scrollToId(props.selectedId);
+  watch(selectedId, () => {
+    if (selectedId.value !== null) {
+      scrollToId(selectedId.value);
     }
   });
-  
+  watch(selectedType, () => {
+    tab.value = selectedType.value;
+  });
 
     return {
         annotationState,
+        annotations,
+        creationType,
+        temporalAnnotations,
+        selectedId,
+        selectedType,
         setAnnotationState,
+        setSelectedId,
+        tab,
     };
   },
 });
@@ -50,61 +51,129 @@ export default defineComponent({
 <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-tabs v-model="tab">
+        <v-tab value="sequence">
+          Sequence
+        </v-tab>
+        <v-tab value="pulse">
+          Pulse
+        </v-tab>
+      </v-tabs>
     </v-card-title>
-    <v-list>
-      <v-list-item>
-        <v-row dense>
-          <v-col><b>Time</b></v-col>
-          <v-col><b>Frequency</b></v-col>
-        </v-row>
-      </v-list-item>
-      <v-list-item
-        v-for="annotation in annotations"
-        :id="`annotation-${annotation.id}`"
-        :key="annotation.id"
-        :class="{selected: annotation.id===selectedId}"
-        class="annotation-item"
-        @click="$emit('select', annotation.id)"
-      >
-        <v-row>
-          <v-col class="annotation-time">
-            <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</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"
+    <v-card-text class="">
+      <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-row>
+                <v-col class="annotation-time">
+                  <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</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>
+
+          <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')"
             >
-              <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-row>
+                <v-col class="annotation-time">
+                  <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</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>
 </template>
 
diff --git a/client/src/components/MapLocation.vue b/client/src/components/MapLocation.vue
index 41e910e..d6e5408 100644
--- a/client/src/components/MapLocation.vue
+++ b/client/src/components/MapLocation.vue
@@ -1,7 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref } from "vue";
-import useState from "../use/useState";
 import { watch } from "vue";
 import geo, { GeoEvent } from "geojs";
 
@@ -117,7 +116,10 @@ export default defineComponent({
 
 <template>
   <v-card class="pa-0 ma-0">
-    <div ref="mapRef" :style="`width:${size.width}px; height:${size.height}px`" />
+    <div
+      ref="mapRef"
+      :style="`width:${size.width}px; height:${size.height}px`"
+    />
   </v-card>
 </template>
 
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 4681b79..cfab3b4 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -2,14 +2,17 @@
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
 import { SpectroInfo, spectroToCenter, useGeoJS } from "./geoJS/geoJSUtils";
 import {
-  OtherUserAnnotations,
   patchAnnotation,
+  patchTemporalAnnotation,
   putAnnotation,
+  putTemporalAnnotation,
   SpectrogramAnnotation,
+  SpectrogramTemporalAnnotation,
 } from "../api/api";
 import LayerManager from "./geoJS/LayerManager.vue";
 import { GeoEvent } from "geojs";
 import geo from "geojs";
+import useState from "../use/useState";
 
 export default defineComponent({
   name: "SpectroViewer",
@@ -25,18 +28,6 @@ export default defineComponent({
       type: Object as PropType<SpectroInfo | undefined>,
       default: () => undefined,
     },
-    annotations: {
-      type: Array as PropType<SpectrogramAnnotation[]>,
-      default: () => [],
-    },
-    otherUserAnnotations: {
-      type: Object as PropType<OtherUserAnnotations>,
-      default: () => ({}),
-    },
-    selectedId: {
-      type: Number as PropType<number | null>,
-      default: null,
-    },
     recordingId: {
       type: String as PropType<string | null>,
       required: true,
@@ -45,11 +36,11 @@ export default defineComponent({
   emits: [
     "update:annotation",
     "create:annotation",
-    "selected",
     "geoViewerRef",
     "hoverData",
   ],
   setup(props, { emit }) {
+    const { annotations, temporalAnnotations, selectedId, selectedType, creationType } = useState();
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized = ref(false);
@@ -144,50 +135,59 @@ export default defineComponent({
       geoJS.getGeoViewer().value.geoOn(geo.event.mousemove, mouseMoveEvent);
     });
 
-    const updateAnnotation = async (annotation: SpectrogramAnnotation) => {
+    const updateAnnotation = async (annotation: SpectrogramAnnotation | SpectrogramTemporalAnnotation) => {
       // We call the patch on the selected annotation
-      if (props.recordingId !== null && props.selectedId !== null) {
-        await patchAnnotation(props.recordingId, props.selectedId, annotation);
+      if (props.recordingId !== null && selectedId.value !== null) {
+        if (selectedType.value === 'pulse') {
+          await patchAnnotation(props.recordingId, selectedId.value, annotation);
+        } else if (selectedType.value === 'sequence') {
+          await patchTemporalAnnotation(props.recordingId, selectedId.value, annotation);
+        }
         emit("update:annotation", annotation);
       }
     };
 
-    const createAnnotation = async (annotation: SpectrogramAnnotation) => {
+    const createAnnotation = async (annotation: SpectrogramAnnotation | SpectrogramTemporalAnnotation) => {
       // 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);
+        if (creationType.value === 'pulse') {
+          const response = await putAnnotation(props.recordingId, annotation);
+          emit("create:annotation", response.data.id);
+        } else if (creationType.value === 'sequence') {
+          const response = await putTemporalAnnotation(props.recordingId, annotation);
+          emit("create:annotation", response.data.id);
+        }
       }
     };
     let skipNextSelected = false;
     watch(
-      () => props.selectedId,
+      selectedId,
       () => {
         if (skipNextSelected) {
           skipNextSelected = false;
           return;
+          
         }
-        const found = props.annotations.find((item) => item.id === props.selectedId);
+        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value): temporalAnnotations.value.find((item) => item.id === selectedId.value);
         if (found && props.spectroInfo) {
-          const center = spectroToCenter(found, props.spectroInfo);
+
+          const center = spectroToCenter(found, props.spectroInfo, selectedType.value);
           const x = center[0];
           const y = center[1];
-          geoJS.getGeoViewer().value.center({ x, y });
+          const bounds = geoJS.getGeoViewer().value.bounds();
+          if (x < bounds.left || x > bounds.right) {
+            geoJS.getGeoViewer().value.center({ x, y });
+          }
         }
       }
     );
 
-    const clickSelected = (annotation: SpectrogramAnnotation) => {
-      skipNextSelected = true;
-      emit("selected", annotation);
-    };
 
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
       initialized,
       cursor,
-      clickSelected,
       setCursor,
       updateAnnotation,
       createAnnotation,
@@ -213,10 +213,6 @@ export default defineComponent({
       v-if="initialized"
       :geo-viewer-ref="geoViewerRef"
       :spectro-info="spectroInfo"
-      :annotations="annotations"
-      :other-user-annotations="otherUserAnnotations"
-      :selected-id="selectedId"
-      @selected="clickSelected($event)"
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"
       @set-cursor="setCursor($event)"
diff --git a/client/src/components/TemporalList.vue b/client/src/components/TemporalList.vue
new file mode 100644
index 0000000..cbe32eb
--- /dev/null
+++ b/client/src/components/TemporalList.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { SpectrogramTemporalAnnotation } from "../api/api";
+import useState from "../use/useState";
+import { watch } from "vue";
+
+export default defineComponent({
+  name: "TemporalList",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramTemporalAnnotation[]>,
+      default: () => [],
+    },
+    selectedId: {
+        type: Number as PropType<number | null>,
+        default: null,
+    },
+  },
+  emits: ['select'],
+  setup(props) {
+    const { annotationState, setAnnotationState } = useState();
+    const scrollToId = (id: number) => {
+    const el = document.getElementById(`annotation-${id}`);
+    if (el) {
+      el.scrollIntoView({block: 'end', behavior: 'smooth'});
+    }
+  };
+  watch(() => props.selectedId, () => {
+    if (props.selectedId !== null) {
+      scrollToId(props.selectedId);
+    }
+  });
+  
+
+    return {
+        annotationState,
+        setAnnotationState,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="pa-0 ma-0">
+    <v-card-title>
+      <v-row class="pa-2">
+        Temporal 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-row dense>
+          <v-col><b>Time</b></v-col>
+        </v-row>
+      </v-list-item>
+      <v-list-item
+        v-for="annotation in annotations"
+        :id="`annotation-${annotation.id}`"
+        :key="annotation.id"
+        :class="{selected: annotation.id===selectedId}"
+        class="annotation-item"
+        @click="$emit('select', annotation.id)"
+      >
+        <v-row>
+          <v-col class="annotation-time">
+            <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
+          </v-col>
+        </v-row>
+        <v-row
+          class="ma-0 pa-0"
+        >
+          <v-col class="ma-0 pa-0">
+            <div class="type-name">
+              {{ annotation.type }}
+            </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: 1em;
+}
+.annotation-item {
+  border: 1px solid gray;
+}
+.type-name {
+    font-weight: bold;
+    font-size: 1em;
+}.selected {
+    background-color: cyan;
+}
+</style>
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 8f71304..75bf020 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -291,7 +291,7 @@ export default defineComponent({
                       <v-spacer />
                       <map-location
                         :size="{width: 600, height: 400}"
-                        :location="{ x: latitude, y: longitude}"
+                        :location="{ x: longitude, y: latitude}"
                         :update-map="updateMap"
                         @location="setLocation($event)"
                       />
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 8a1ad46..ef0d3f1 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,13 +1,15 @@
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, PropType, Ref, ref, watch } from "vue";
-import { OtherUserAnnotations, SpectrogramAnnotation } from "../../api/api";
+import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../api/api";
 import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
+import TemporalLayer from "./layers/temporalLayer";
 import LegendLayer from "./layers/legendLayer";
 import TimeLayer from "./layers/timeLayer";
 import FreqLayer from "./layers/freqLayer";
 import SpeciesLayer from "./layers/speciesLayer";
+import SpeciesSequenceLayer from "./layers/speciesSequenceLayer";
 import { cloneDeep } from "lodash";
 import useState from "../../use/useState";
 export default defineComponent({
@@ -22,18 +24,6 @@ export default defineComponent({
       type: Object as PropType<SpectroInfo | undefined>,
       default: () => undefined,
     },
-    annotations: {
-      type: Array as PropType<SpectrogramAnnotation[]>,
-      default: () => [],
-    },
-    otherUserAnnotations: {
-      type: Object as PropType<OtherUserAnnotations>,
-      default: () => ({}),
-    },
-    selectedId: {
-      type: Number as PropType<number | null>,
-      default: null,
-    },
     thumbnail: {
       type: Boolean,
       default: false,
@@ -42,27 +32,88 @@ export default defineComponent({
   emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
   setup(props, { emit }) {
     const {
+      creationType,
       annotationState,
       setAnnotationState,
       layerVisibility,
       selectedUsers,
       colorScale,
       currentUser,
+      annotations,
+      temporalAnnotations,
+      otherUserAnnotations,
+      selectedId,
+      selectedType,
+      setSelectedId,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
-    const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(props.annotations));
+    const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(annotations.value));
+    const localTemporalAnnotations: Ref<SpectrogramTemporalAnnotation[]> = ref(cloneDeep(temporalAnnotations.value));
     const editing = ref(false);
-    const editingAnnotation: Ref<null | SpectrogramAnnotation> = ref(null);
+    const editingAnnotation: Ref<null | SpectrogramAnnotation | SpectrogramTemporalAnnotation> = ref(null);
     let rectAnnotationLayer: RectangleLayer;
+    let temporalAnnotationLayer: TemporalLayer;
     let editAnnotationLayer: EditAnnotationLayer;
     let legendLayer: LegendLayer;
     let timeLayer: TimeLayer;
     let freqLayer: FreqLayer;
     let speciesLayer: SpeciesLayer;
+    let speciesSequenceLayer: SpeciesSequenceLayer;
     const displayError = ref(false);
     const errorMsg = ref("");
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+    const temporalEvent = (type: string, data: any) => {
+      if (type === "annotation-clicked") {
+        // click temporal annotation
+        if (selectedAnnotationId.value !== null) {
+          const foundIndex = temporalAnnotations.value.findIndex(
+            (item) => item.id === selectedAnnotationId.value
+          );
+          if (foundIndex !== -1) {
+            editingAnnotation.value = temporalAnnotations.value[foundIndex];
+            const copy: SpectrogramTemporalAnnotation[] = cloneDeep(localTemporalAnnotations.value);
+            copy[foundIndex].editing = true;
+            localTemporalAnnotations.value = copy;
+          }
+        }
+        selectedAnnotationId.value = data.id;
+        editing.value = data.edit;
+        editingAnnotation.value = null;
+        selectedId.value = selectedAnnotationId.value;
+        //emit("selected", selectedAnnotationId.value);
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'sequence');
+        }
+        setSelectedId(selectedAnnotationId.value);
+        triggerUpdate();
+      }
+      if (type === "annotation-right-clicked") {
+        selectedAnnotationId.value = data.id;
+        editing.value = data.edit;
+        const foundIndex = localTemporalAnnotations.value.findIndex(
+          (item) => item.id === selectedAnnotationId.value
+        );
+        if (editing.value && foundIndex !== -1) {
+          editingAnnotation.value = localTemporalAnnotations.value[foundIndex];
+          const copy: SpectrogramTemporalAnnotation[] = cloneDeep(localTemporalAnnotations.value);
+          copy[foundIndex].editing = true;
+          localTemporalAnnotations.value = copy;
+        } else if (!editing.value && foundIndex !== -1) {
+          editingAnnotation.value = null;
+          localTemporalAnnotations.value[foundIndex].editing = undefined;
+        }
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'sequence');
+        }
+        setSelectedId(selectedAnnotationId.value);
+        //emit("selected", selectedAnnotationId.value);
+        triggerUpdate();
+      }
+
+    };
+
     // 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
@@ -81,7 +132,11 @@ export default defineComponent({
         const copy: SpectrogramAnnotation[] = cloneDeep(localAnnotations.value);
         copy.forEach((item) => (item.editing = undefined));
         localAnnotations.value = copy;
-        emit("selected", selectedAnnotationId.value);
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'pulse');
+        }
+        setSelectedId(selectedAnnotationId.value);
+        //emit("selected", selectedAnnotationId.value);
       }
       if (type === "annotation-clicked") {
         if (selectedAnnotationId.value !== null) {
@@ -98,7 +153,12 @@ export default defineComponent({
         selectedAnnotationId.value = data.id;
         editing.value = data.edit;
         editingAnnotation.value = null;
-        emit("selected", selectedAnnotationId.value);
+        selectedId.value = selectedAnnotationId.value;
+        //emit("selected", selectedAnnotationId.value);
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'pulse');
+        }
+        setSelectedId(selectedAnnotationId.value);
         triggerUpdate();
       }
       if (type === "annotation-hover") {
@@ -119,7 +179,8 @@ export default defineComponent({
           editingAnnotation.value = null;
           localAnnotations.value[foundIndex].editing = undefined;
         }
-        emit("selected", selectedAnnotationId.value);
+        setSelectedId(selectedAnnotationId.value, 'pulse');
+        //emit("selected", selectedAnnotationId.value);
         triggerUpdate();
       }
       if (type === "update:geojson") {
@@ -128,10 +189,10 @@ export default defineComponent({
         const geoJSON = data["geoJSON"];
         if (geoJSON && selectedAnnotationId.value !== null && status === "editing" && !creating) {
           if (annotationState.value !== "creating") {
-            const index = localAnnotations.value.findIndex(
+            const index = selectedType.value === 'pulse' ? localAnnotations.value.findIndex(
               (item) => item.id === selectedAnnotationId.value
-            );
-            if (index !== -1 && props.spectroInfo) {
+            ) : localTemporalAnnotations.value.findIndex((item) => item.id === selectedAnnotationId.value);
+            if (index !== -1 && props.spectroInfo && selectedType.value === 'pulse') {
               // update bounds for the localAnnotation
               const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
               if (conversionResult.error) {
@@ -149,12 +210,29 @@ export default defineComponent({
               };
               editingAnnotation.value = localAnnotations.value[index];
             }
+            if (index !== -1 && props.spectroInfo && selectedType.value === 'sequence') {
+              // update bounds for the localAnnotation
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              if (conversionResult.error) {
+                displayError.value = true;
+                errorMsg.value = conversionResult.error;
+                return;
+              }
+              const { start_time, end_time } = conversionResult;
+              localTemporalAnnotations.value[index] = {
+                ...localTemporalAnnotations.value[index],
+                start_time,
+                end_time,
+              };
+              editingAnnotation.value = localTemporalAnnotations.value[index];
+            }
+
             triggerUpdate();
             emit("update:annotation", editingAnnotation.value);
           }
         } else if (creating) {
           if (geoJSON && props.spectroInfo) {
-            const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+            const conversionResult =  geojsonToSpectro(geoJSON, props.spectroInfo);
 
             if (conversionResult.error) {
               displayError.value = true;
@@ -162,16 +240,29 @@ export default defineComponent({
               return;
             }
             const { low_freq, high_freq, start_time, end_time } = conversionResult;
-            const newAnnotation: SpectrogramAnnotation = {
-              low_freq,
-              high_freq,
-              start_time,
-              end_time,
-              comments: "",
-              species: [],
-              id: 0,
-            };
-            emit("create:annotation", newAnnotation);
+            if (creationType.value === 'pulse') {
+              const newAnnotation: SpectrogramAnnotation = {
+                low_freq,
+                high_freq,
+                start_time,
+                end_time,
+                comments: "",
+                species: [],
+                id: 0,
+              };
+              emit("create:annotation", newAnnotation);
+          } else if (creationType.value === 'sequence') {
+            const newAnnotation: SpectrogramTemporalAnnotation = {
+                start_time,
+                end_time,
+                species: [],
+                type: '',
+                comments: '',
+                id: 0,
+              };
+              emit("create:annotation", newAnnotation);
+
+          }
             editAnnotationLayer.disable();
             annotationState.value = "";
             editing.value = false;
@@ -184,28 +275,42 @@ export default defineComponent({
       if (selectedUsers.value.length) {
         // We add more annotations to the system
         let additionalAnnotations: SpectrogramAnnotation[] = [];
+        let additionalTemporalAnnotations: SpectrogramTemporalAnnotation[] = [];
         for (let i = 0; i < selectedUsers.value.length; i += 1) {
-          const newAnnotations = props.otherUserAnnotations[selectedUsers.value[i]];
+          const newAnnotations = otherUserAnnotations.value[selectedUsers.value[i]]['annotations'];
           additionalAnnotations = additionalAnnotations.concat(newAnnotations);
+          const newTemporalAnnotations = otherUserAnnotations.value[selectedUsers.value[i]]['temporal'];
+          additionalTemporalAnnotations = additionalTemporalAnnotations.concat(newTemporalAnnotations);
+
         }
         additionalAnnotations = additionalAnnotations.concat(localAnnotations.value);
-        return { annotations: additionalAnnotations, colorScale };
+        additionalTemporalAnnotations = additionalTemporalAnnotations.concat(localTemporalAnnotations.value);
+        return { annotations: additionalAnnotations, temporalAnnotations: additionalTemporalAnnotations, colorScale };
       } else {
-        return { annotations: localAnnotations.value };
+        return { annotations: localAnnotations.value, temporalAnnotations: localTemporalAnnotations.value };
       }
     };
     const triggerUpdate = () => {
       // Check for selected and editing annotations;
-      const { annotations } = getDataForLayers();
+      const { annotations, temporalAnnotations } = getDataForLayers();
       if (rectAnnotationLayer) {
         rectAnnotationLayer.formatData(
           annotations,
-          selectedAnnotationId.value,
+          selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
           currentUser.value,
           colorScale.value
         );
         rectAnnotationLayer.redraw();
       }
+      if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
+        temporalAnnotationLayer.formatData(
+          temporalAnnotations,
+          selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
+          currentUser.value,
+          colorScale.value
+        );
+        temporalAnnotationLayer.redraw();
+      }
       if (!props.thumbnail) {
         if (layerVisibility.value.includes("grid")) {
           legendLayer.setGridEnabled(true);
@@ -214,7 +319,7 @@ export default defineComponent({
         }
         legendLayer.redraw();
         if (layerVisibility.value.includes("time")) {
-          timeLayer.formatData(annotations);
+          timeLayer.formatData(annotations, temporalAnnotations);
           timeLayer.redraw();
         } else {
           timeLayer.disable();
@@ -226,41 +331,47 @@ export default defineComponent({
           freqLayer.disable();
         }
         if (layerVisibility.value.includes("species")) {
-          speciesLayer.formatData(localAnnotations.value);
+          speciesLayer.formatData(annotations);
           speciesLayer.redraw();
+          speciesSequenceLayer.formatData(temporalAnnotations);
+          speciesSequenceLayer.redraw();
         } else {
           speciesLayer.disable();
+          speciesSequenceLayer.disable();
         }
       }
       if (editing.value && editingAnnotation.value) {
         setTimeout(() => {
-          editAnnotationLayer.changeData(editingAnnotation.value);
+          editAnnotationLayer.changeData(editingAnnotation.value, selectedType.value);
         }, 0);
       }
     };
     watch(
-      () => props.annotations,
+      annotations,
       () => {
-        localAnnotations.value = props.annotations;
-        rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
-        rectAnnotationLayer.redraw();
+        localAnnotations.value = annotations.value;
+        triggerUpdate();
       }
     );
+    watch (temporalAnnotations, () => {
+      localTemporalAnnotations.value = temporalAnnotations.value;
+      triggerUpdate();
+    });
     watch(selectedUsers, () => triggerUpdate());
     watch(
-      () => props.selectedId,
+      selectedId,
       () => {
-        selectedAnnotationId.value = props.selectedId;
+        selectedAnnotationId.value = selectedId.value;
         if (
           editAnnotationLayer &&
           editAnnotationLayer.getMode() === "editing" &&
-          props.selectedId === null
+          selectedId.value === null
         ) {
           nextTick(() => {
             if (
               editAnnotationLayer &&
               editAnnotationLayer.getMode() === "disabled" &&
-              props.selectedId === null
+              selectedId.value === null
             ) {
               annotationState.value === 'disabled';
               editAnnotationLayer.featureLayer.clear();
@@ -274,23 +385,34 @@ export default defineComponent({
     );
     onMounted(() => {
       if (props.spectroInfo) {
-        rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
+        rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
         rectAnnotationLayer.redraw();
+        temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
+        temporalAnnotationLayer.formatData(localTemporalAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
+        temporalAnnotationLayer.redraw();
         if (!props.thumbnail) {
           legendLayer = new LegendLayer(props.geoViewerRef, event, props.spectroInfo);
           timeLayer = new TimeLayer(props.geoViewerRef, event, props.spectroInfo);
-          timeLayer.formatData(localAnnotations.value);
+          timeLayer.formatData(localAnnotations.value, temporalAnnotations.value);
           freqLayer = new FreqLayer(props.geoViewerRef, event, props.spectroInfo);
           freqLayer.formatData(localAnnotations.value);
           speciesLayer = new SpeciesLayer(props.geoViewerRef, event, props.spectroInfo);
           speciesLayer.formatData(localAnnotations.value);
+          speciesSequenceLayer = new SpeciesSequenceLayer(props.geoViewerRef, event, props.spectroInfo);
+          speciesSequenceLayer.formatData(localTemporalAnnotations.value);
 
           legendLayer.redraw();
+          if (layerVisibility.value.includes('species')) {
+            speciesLayer.redraw();
+            speciesSequenceLayer.redraw();
+          } else {
+            speciesLayer.disable();
+            speciesSequenceLayer.disable();
+          }
           timeLayer.disable();
           freqLayer.disable();
-          speciesLayer.disable();
         }
       }
     });
@@ -306,7 +428,7 @@ export default defineComponent({
           editing.value = false;
           selectedAnnotationId.value = null;
           editingAnnotation.value = null;
-          editAnnotationLayer.changeData(null);
+          editAnnotationLayer.changeData(null, selectedType.value);
           triggerUpdate();
         }
       }
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 3cb945f..49dc4ed 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -169,7 +169,7 @@ const useGeoJS = () => {
   };
 };
 
-import { SpectrogramAnnotation } from "../../api/api";
+import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../api/api";
 
 export interface SpectroInfo {
   width: number;
@@ -182,6 +182,86 @@ export interface SpectroInfo {
   high_freq: number;
 }
 
+function spectroTemporalToGeoJSon(
+  annotation: SpectrogramTemporalAnnotation,
+  spectroInfo: SpectroInfo,
+  ymin = 0,
+  ymax = 10
+): GeoJSON.Polygon {
+  //scale pixels to time and frequency ranges
+  if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
+    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    // Now we remap our annotation to pixel coordinates
+    const start_time = annotation.start_time * widthScale;
+    const end_time = annotation.end_time * widthScale;
+    return {
+      type: "Polygon",
+      coordinates: [
+        [
+          [start_time, ymin],
+          [start_time, ymax],
+          [end_time, ymax],
+          [end_time, ymin],
+          [start_time, ymin],
+        ],
+      ],
+    };
+  } else if (spectroInfo.start_times && spectroInfo.end_times) {
+    // Compressed Spectro has different conversion
+    // Find what section the annotation is in
+    const start = annotation.start_time;
+    const end = annotation.end_time;
+    const { start_times, end_times } = spectroInfo;
+    const lengths = start_times.length === end_times.length ? start_times.length : 0;
+    let foundIndex = -1;
+    for (let i = 0; i < lengths; i += 1) {
+      if (
+        start_times[i] < start &&
+        start < end_times[i] &&
+        end < end_times[i] &&
+        end > start_times[i]
+      ) {
+        foundIndex = i;
+        break;
+      }
+    }
+    // We need to build the length of times to pixel size for the time spaces before the annotation
+    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    let pixelAdd = 0;
+    for (let i = 0; i < foundIndex; i += 1) {
+      pixelAdd += (end_times[i] - start_times[i]) * widthScale;
+    }
+    // Now we remap our annotation to pixel coordinates
+    const start_time = pixelAdd + (annotation.start_time - start_times[foundIndex]) * widthScale;
+    const end_time = pixelAdd + (annotation.end_time - start_times[foundIndex]) * widthScale;
+
+    return {
+      type: "Polygon",
+      coordinates: [
+        [
+          [start_time, ymin],
+          [start_time, ymax],
+          [end_time, ymax],
+          [end_time, ymin],
+          [start_time, ymin],
+        ],
+      ],
+    };
+  }
+  return {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+      ],
+    ],
+  };
+}
+
 function spectroToGeoJSon(
   annotation: SpectrogramAnnotation,
   spectroInfo: SpectroInfo
@@ -280,9 +360,16 @@ function findPolygonCenter(polygon: GeoJSON.Polygon): number[] {
   return [avgLng, avgLat];
 }
 
-function spectroToCenter(annotation: SpectrogramAnnotation, spectroInfo: SpectroInfo) {
-  const geoJSON = spectroToGeoJSon(annotation, spectroInfo);
-  return findPolygonCenter(geoJSON);
+function spectroToCenter(annotation: SpectrogramAnnotation | SpectrogramTemporalAnnotation, spectroInfo: SpectroInfo, type: 'sequence' | 'pulse') {
+  if (type === 'pulse') {
+    const geoJSON = spectroToGeoJSon(annotation as SpectrogramAnnotation, spectroInfo);
+    return findPolygonCenter(geoJSON);
+  }
+  if (type === 'sequence') {
+    const geoJSON = spectroTemporalToGeoJSon(annotation as SpectrogramTemporalAnnotation, spectroInfo);
+    return findPolygonCenter(geoJSON);
+  }
+  return [0,0];
 }
 
 /* beginning at bottom left, rectangle is defined clockwise */
@@ -384,4 +471,11 @@ function reOrdergeoJSON(coords: GeoJSON.Position[]) {
   ];
 }
 
-export { spectroToGeoJSon, geojsonToSpectro, reOrdergeoJSON, useGeoJS, spectroToCenter };
+export {
+  spectroToGeoJSon,
+  geojsonToSpectro,
+  reOrdergeoJSON,
+  useGeoJS,
+  spectroToCenter,
+  spectroTemporalToGeoJSon,
+};
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
index 18a7863..0f51002 100644
--- a/client/src/components/geoJS/layers/editAnnotationLayer.ts
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -1,7 +1,7 @@
 /*eslint class-methods-use-this: "off"*/
 import geo, { GeoEvent } from "geojs";
-import { SpectroInfo, spectroToGeoJSon, reOrdergeoJSON } from "../geoJSUtils";
-import { SpectrogramAnnotation } from "../../../api/api";
+import { SpectroInfo, spectroToGeoJSon, reOrdergeoJSON, spectroTemporalToGeoJSon } from "../geoJSUtils";
+import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../../api/api";
 import { LayerStyle } from "./types";
 import { GeoJSON } from "geojson";
 
@@ -14,13 +14,6 @@ interface RectGeoJSData {
   polygon: GeoJSON.Polygon;
 }
 
-interface EditHandleStyle {
-  type: string;
-  x: number;
-  y: number;
-  index: number;
-  editHandle: boolean;
-}
 
 const typeMapper = new Map([
   ["LineString", "line"],
@@ -80,6 +73,8 @@ export default class EditAnnotationLayer {
   /* in-progress events only emitted for lines and polygons */
   shapeInProgress: GeoJSON.LineString | GeoJSON.Polygon | null;
 
+  mode: 'pulse' | 'sequence';
+
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     geoViewerRef: any,
@@ -94,6 +89,7 @@ export default class EditAnnotationLayer {
       strokeWidth: 1.0,
       antialiasing: 0,
     };
+    this.mode = 'pulse';
     this.formattedData = [];
     this.spectroInfo = spectroInfo;
     this.skipNextExternalUpdate = false;
@@ -318,17 +314,18 @@ export default class EditAnnotationLayer {
   }
 
   /** overrides default function to disable and clear anotations before drawing again */
-  async changeData(frameData: SpectrogramAnnotation | null) {
+  async changeData(frameData: SpectrogramAnnotation | null | SpectrogramTemporalAnnotation, type: 'pulse' | 'sequence') {
+    this.mode = type;
     if (this.skipNextExternalUpdate === false) {
       // disable resets things before we load a new/different shape or mode
       this.disable();
       //TODO: Find a better way to track mouse up after placing a point or completing geometry
       //For line drawings and the actions of any recipes we want
       if (this.geoViewerRef.interactor().mouse().buttons.left) {
-        this.leftButtonCheckTimeout = window.setTimeout(() => this.changeData(frameData), 20);
+        this.leftButtonCheckTimeout = window.setTimeout(() => this.changeData(frameData, type), 20);
       } else {
         clearTimeout(this.leftButtonCheckTimeout);
-        this.formatData(frameData);
+        this.formatData(frameData, type);
       }
     } else {
       // prevent was called and it has prevented this update.
@@ -343,7 +340,7 @@ export default class EditAnnotationLayer {
    *
    * @param frameData a single FrameDataTrack Array that is the editing item
    */
-  formatData(annotationData: SpectrogramAnnotation | null) {
+  formatData(annotationData: SpectrogramAnnotation | null | SpectrogramTemporalAnnotation, type: 'pulse' | 'sequence') {
     this.selectedHandleIndex = -1;
     this.hoverHandleIndex = -1;
     this.event("update:selectedIndex", {
@@ -351,7 +348,8 @@ export default class EditAnnotationLayer {
       selectedKey: this.selectedKey,
     });
     if (annotationData) {
-      const geoJSONData = spectroToGeoJSon(annotationData, this.spectroInfo);
+
+      const geoJSONData = type === 'pulse' ? spectroToGeoJSon(annotationData as SpectrogramAnnotation, this.spectroInfo): spectroTemporalToGeoJSon(annotationData as SpectrogramTemporalAnnotation, this.spectroInfo, -10, -50);
       const geojsonFeature: GeoJSON.Feature = {
         type: "Feature",
         geometry: geoJSONData,
@@ -502,39 +500,43 @@ export default class EditAnnotationLayer {
    * Styling for the handles used to drag the annotation for ediing
    */
   editHandleStyle() {
-    if (this.type === "rectangle") {
+    if (this.type === "rectangle" && this.mode === 'pulse') {
       return {
         handles: {
           rotate: false,
+          resize: false,
         },
-      };
-    }
-    if (this.type === "Point") {
-      return {
-        handles: false,
-      };
-    }
-    if (this.type === "Polygon" || this.type === "LineString") {
+      }; 
+    } else if (this.type === 'rectangle' && this.mode === 'sequence') {
       return {
-        handles: {
-          rotate: false,
-          edge: this.type !== "LineString",
-        },
-        fill: true,
-        radius: (handle: EditHandleStyle): number => {
-          if (handle.type === "edge") {
-            return 5;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        strokeOpacity: (d: any) => {
+          if (d.type === 'edge' && [1,3].includes(d.index)) {
+            return 0.0;
           }
-          return 8;
+          return 1.0;
         },
-        fillOpacity: (_: EditHandleStyle, index: number) => {
-          if (index === this.selectedHandleIndex) {
-            return 1;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        stroke: (d: any) => {
+          if (d.type === 'edge' && [1,3].includes(d.index)) {
+            return false;
           }
-          return 0.25;
+          return true;
         },
-        strokeColor: "red",
-        fillColor: "red",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        radius: function (d: any) {
+          if (d.type === 'edge' && [1,3].includes(d.index)) {
+            return 0;
+          }
+          return 8;
+        },      
+        handles: {
+          rotate:false,
+          vertex: false,
+          edge: true,
+          center:false,
+          resize:false
+        }
       };
     }
     return {
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 5c7865e..7fc9193 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -16,7 +16,6 @@ interface RectGeoJSData {
 export default class RectangleLayer {
   formattedData: RectGeoJSData[];
 
-  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
@@ -43,7 +42,6 @@ export default class RectangleLayer {
     spectroInfo: SpectroInfo
   ) {
     this.geoViewerRef = geoViewerRef;
-    this.drawingOther = false;
     this.spectroInfo = spectroInfo;
     this.formattedData = [];
     this.hoverOn = false;
@@ -108,15 +106,6 @@ export default class RectangleLayer {
     }
   }
 
-  /**
-   * 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;
-  }
-
   formatData(
     annotationData: SpectrogramAnnotation[],
     selectedIndex: number | null,
diff --git a/client/src/components/geoJS/layers/speciesSequenceLayer.ts b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
new file mode 100644
index 0000000..6e06bd4
--- /dev/null
+++ b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
@@ -0,0 +1,135 @@
+/* eslint-disable class-methods-use-this */
+import { SpectrogramTemporalAnnotation } from "../../../api/api";
+import { SpectroInfo, spectroTemporalToGeoJSon } from "../geoJSUtils";
+import { LayerStyle } from "./types";
+
+interface TextData {
+  text: string;
+  x: number;
+  y: number;
+  offsetY?: number;
+  offsetX?: number;
+  textType: 'species' | 'type';
+}
+
+export default class SpeciesSequenceLayer {
+
+  textData: TextData[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  textLayer: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  textStyle: LayerStyle<TextData>;
+
+
+  // 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
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
+    this.geoViewerRef = geoViewerRef;
+    this.spectroInfo = spectroInfo;
+    this.textData = [];
+    this.event = event;
+    //Only initialize once, prevents recreating Layer each edit
+    const layer = this.geoViewerRef.createLayer("feature", {
+      features: ["text"],
+    });
+    this.textLayer = layer
+      .createFeature("text")
+      .text((data: TextData) => data.text)
+      .position((data: TextData) => ({ x: data.x, y: data.y }));
+
+
+    this.textStyle = this.createTextStyle();
+  }
+
+
+  formatData(annotationData: SpectrogramTemporalAnnotation[]) {
+    this.textData = [];
+    annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const [xmin, ymin] = polygon.coordinates[0][0];
+      const [xmax, ymax] = polygon.coordinates[0][2];
+      // For the compressed view we need to filter out default or NaN numbers
+      if (Number.isNaN(xmax) || Number.isNaN(xmin) || Number.isNaN(ymax) || Number.isNaN(ymin)) {
+        return;
+      }
+      if (xmax === -1 && ymin === -1 && ymax === -1 && xmin === -1) {
+        return;
+      }
+      let textOffset = 0;
+      const species = annotation.species;
+      const type = annotation.type;
+      if (species) {
+        for (let i =0; i< species.length; i += 1) {
+          const specie = species[i];
+          this.textData.push({
+            text: `${specie.species_code || specie.common_name}`,
+            x: xmin + (xmax-xmin) /2.0,
+            y: ymax ,
+            offsetX:0,
+            offsetY: -5 + textOffset,
+            textType: 'species',
+          });
+          textOffset -= 15;        
+        }
+      }
+      if (type) {
+        this.textData.push({
+          text: `${type}`,
+          x: xmin + (xmax-xmin) /2.0,
+          y: ymin ,
+          offsetX:0,
+          offsetY: 10,
+          textType: 'type'
+        });
+      }
+    });
+  }
+
+  redraw() {
+    // add some styles
+    this.textLayer.data(this.textData).style(this.createTextStyle()).draw();
+  }
+
+  disable() {
+    this.textLayer.data([]).draw();
+  }
+
+
+  createTextStyle(): LayerStyle<TextData> {
+    return {
+      ...{
+        strokeColor: "yellow",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+      },
+      color: (d) => {
+        if (d.textType === 'type') {
+          return 'yellow';
+        }
+        return "white";
+      },
+      offset: (data) => ({
+        x: data.offsetX || 0,
+        y: data.offsetY || 0,
+      }),
+      textAlign: 'center',
+    };
+  }
+}
diff --git a/client/src/components/geoJS/layers/temporalLayer.ts b/client/src/components/geoJS/layers/temporalLayer.ts
new file mode 100644
index 0000000..86d5694
--- /dev/null
+++ b/client/src/components/geoJS/layers/temporalLayer.ts
@@ -0,0 +1,193 @@
+/* eslint-disable class-methods-use-this */
+import geo, { GeoEvent } from "geojs";
+import { SpectroInfo, spectroTemporalToGeoJSon } from "../geoJSUtils";
+import { SpectrogramTemporalAnnotation } from "../../../api/api";
+import { LayerStyle } from "./types";
+
+interface RectGeoJSData {
+  id: number;
+  selected: boolean;
+  editing?: boolean;
+  polygon: GeoJSON.Polygon;
+  color?: string;
+  owned: boolean; // if the annotation is user owned
+}
+
+export default class TemporalLayer {
+  formattedData: RectGeoJSData[];
+
+  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;
+
+  selectedIndex: number[]; // sparse array
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  style: LayerStyle<RectGeoJSData>;
+
+  // 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
+    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) => {
+        /**
+         * 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)) {
+            if (e.data.owned) {
+              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)) {
+            if (e.data.owned) {
+              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-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;
+    }
+  }
+
+ 
+  formatData(
+    annotationData: SpectrogramTemporalAnnotation[],
+    selectedIndex: number | null,
+    currentUser: string,
+    colorScale?: d3.ScaleOrdinal<string, string, never>
+  ) {
+    const arr: RectGeoJSData[] = [];
+    annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const [xmin, ymin] = polygon.coordinates[0][0];
+      const [xmax, ymax] = polygon.coordinates[0][2];
+      // For the compressed view we need to filter out default or NaN numbers
+      if (Number.isNaN(xmax) || Number.isNaN(xmin) || Number.isNaN(ymax) || Number.isNaN(ymin)) {
+        return;
+      }
+      if (xmax === -1 && ymin === -1 && ymax === -1 && xmin === -1) {
+        return;
+      }
+      const newAnnotation: RectGeoJSData = {
+        id: annotation.id,
+        selected: annotation.id === selectedIndex,
+        editing: annotation.editing,
+        polygon,
+        owned: annotation.owner_email === currentUser,
+      };
+      if (colorScale && annotation.owner_email !== currentUser && annotation.owner_email) {
+        newAnnotation.color = colorScale(annotation.owner_email);
+      }
+      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: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: true,
+        fillOpacity: 0.20,
+      },
+      // Style conversion to get array objects to work in geoJS
+      position: (point) => {
+        return { x: point[0], y: point[1] };
+      },
+      fillColor: (_point, _index, data) => {
+        if (data.selected) {
+          return "cyan";
+        }
+        if (data.color) {
+          return data.color;
+        }
+        return "hotpink";
+      },
+      strokeColor: (_point, _index, data) => {
+        if (data.selected) {
+          return "cyan";
+        }
+        if (data.color) {
+          return data.color;
+        }
+        return "hotpink";
+      },
+    };
+  }
+}
diff --git a/client/src/components/geoJS/layers/timeLayer.ts b/client/src/components/geoJS/layers/timeLayer.ts
index 80edb2c..5757d19 100644
--- a/client/src/components/geoJS/layers/timeLayer.ts
+++ b/client/src/components/geoJS/layers/timeLayer.ts
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
-import { SpectrogramAnnotation } from "../../../api/api";
-import { SpectroInfo, spectroToGeoJSon } from "../geoJSUtils";
+import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../../api/api";
+import { SpectroInfo, spectroTemporalToGeoJSon, spectroToGeoJSon } from "../geoJSUtils";
 import { LayerStyle } from "./types";
 
 interface LineData {
@@ -69,7 +69,7 @@ export default class TimeLayer {
   }
 
 
-  formatData(annotationData: SpectrogramAnnotation[]) {
+  formatData(annotationData: SpectrogramAnnotation[], temporalData: SpectrogramTemporalAnnotation[] =[]) {
     this.textData = [];
     this.lineData = [];
     const lineDist = 12;
@@ -122,6 +122,56 @@ export default class TimeLayer {
         offsetY: 5,
       });
     });
+    temporalData.forEach((annotation: SpectrogramTemporalAnnotation) => {
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const {start_time, end_time } = annotation;
+      const [xmin, ymin] = polygon.coordinates[0][0];
+      const [xmax, ymax] = polygon.coordinates[0][2];
+      // For the compressed view we need to filter out default or NaN numbers
+      if (Number.isNaN(xmax) || Number.isNaN(xmin) || Number.isNaN(ymax) || Number.isNaN(ymin)) {
+        return;
+      }
+      if (xmax === -1 && ymin === -1 && ymax === -1 && xmin === -1) {
+        return;
+      }
+      // We create two small lines for the beginning/end of annotation
+      this.lineData.push({
+        line: {
+          type: "LineString",
+          coordinates: [
+            [xmin, ymax],
+            [xmin, ymax - lineDist],
+          ],
+        },
+        thicker: true,
+      });
+      this.lineData.push({
+        line: {
+          type: "LineString",
+          coordinates: [
+            [xmax, ymax],
+            [xmax, ymax - lineDist],
+          ],
+        },
+        thicker: true,
+      });
+      // Now we need to create the text Labels
+      this.textData.push({
+        text: `${start_time}ms`,
+        x: xmin,
+        y: ymax - lineDist,
+        offsetX: 0,
+        offsetY: -5,
+      });
+      this.textData.push({
+        text: `${end_time}ms`,
+        x: xmax,
+        y: ymax - lineDist,
+        offsetX: 0,
+        offsetY: -5,
+      });
+    });
+
   }
 
   redraw() {
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 11e2fa6..5e2e970 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-rou
 import HomePage from '../views/HomePage.vue';
 import Recordings from '../views/Recordings.vue';
 import Spectrogram from '../views/Spectrogram.vue';
+import Login from '../views/Login.vue';
 
 import oauthClient from '../plugins/Oauth';
 
@@ -10,10 +11,10 @@ function beforeEach(
   _: RouteLocationNormalized,
   next: (route?: string) => void,
 ) {
-  if (!oauthClient.isLoggedIn && to.name !== '/') {
-    next('/');
-  }
-  if (oauthClient.isLoggedIn && to.name === '/') {
+  if (!oauthClient.isLoggedIn && to.name !== 'Login') {
+    next('/login');
+    return;
+  }  if (oauthClient.isLoggedIn && to.name === 'Login') {
     next('/');
   }
   next();
@@ -28,6 +29,11 @@ function routerInit(){
         path: '/',
         component: HomePage,
       },
+      {
+        path: '/login',
+        name: 'Login',
+        component: Login,
+      },
       {
         path: '/recordings',
         component: Recordings,
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 1ef1b21..2b64985 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -1,13 +1,20 @@
 import { ref, Ref } from "vue";
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
+import { OtherUserAnnotations, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
 
 const annotationState: Ref<AnnotationState> = ref("");
-type LayersVis = "time" | "freq" | "species" | "grid";
-const layerVisibility: Ref<LayersVis[]> = ref([]);
+const creationType: Ref<'pulse' | 'sequence'> = ref("pulse");
+type LayersVis = "time" | "freq" | "species" | "grid" | 'temporal';
+const layerVisibility: Ref<LayersVis[]> = ref(['temporal', 'species']);
 const colorScale: Ref<d3.ScaleOrdinal<string, string, never> | undefined> = ref();
 const selectedUsers: Ref<string[]> = ref([]);
 const currentUser: Ref<string> = ref('');
+const selectedId: Ref<number | null> = ref(null);
+const selectedType: Ref<'pulse' | 'sequence'> = ref('sequence');
+const annotations : Ref<SpectrogramAnnotation[]> = ref([]);
+const temporalAnnotations: Ref<SpectrogramTemporalAnnotation[]> = ref([]);
+const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -35,9 +42,17 @@ export default function useState() {
     .domain(userEmails)
     .range(d3.schemeCategory10.filter(color => color !== 'red' && color !== 'cyan' && color !== 'yellow'));
 
+  }
+
+  function setSelectedId(id: number | null, annotationType?: 'pulse' | 'sequence' ) {
+    selectedId.value = id;
+    if (annotationType) {
+      selectedType.value = annotationType;
+    }
   }
     return {
     annotationState,
+    creationType,
     setAnnotationState,
     toggleLayerVisibility,
     layerVisibility,
@@ -46,5 +61,12 @@ export default function useState() {
     setSelectedUsers,
     selectedUsers,
     currentUser,
+    setSelectedId,
+    // State Passing Elements
+    annotations,
+    temporalAnnotations,
+    otherUserAnnotations,
+    selectedId,
+    selectedType,
   };
 }
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
new file mode 100644
index 0000000..3de239a
--- /dev/null
+++ b/client/src/views/Login.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent} from 'vue';
+
+export default defineComponent({
+  name: 'Login',
+  setup() {
+    return {
+
+    };
+  },
+});
+</script>
+
+<template>
+  <h2>Please Login to continue</h2>
+</template>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 37bc374..944d9cb 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -119,7 +119,7 @@ export default defineComponent({
         id: item.id,
       };
       if (item.recording_location) {
-        const [ lat, lon ] = item.recording_location.coordinates;
+        const [ lon, lat ] = item.recording_location.coordinates;
         editingRecording.value['location'] = {lat, lon};
       }
       uploadDialog.value = true;
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 3a7b421..42b96af 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -5,10 +5,9 @@ import {
   getAnnotations,
   getSpectrogram,
   Species,
-  SpectrogramAnnotation,
   getSpectrogramCompressed,
-  OtherUserAnnotations,
   getOtherUserAnnotations,
+  getTemporalAnnotations,
 } from "../api/api";
 import SpectrogramViewer from "../components/SpectrogramViewer.vue";
 import { SpectroInfo } from "../components/geoJS/geoJSUtils";
@@ -39,12 +38,14 @@ export default defineComponent({
       createColorScale,
       currentUser,
       annotationState,
+      annotations,
+      temporalAnnotations,
+      otherUserAnnotations,
+      selectedId,
+      selectedType,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
-    const annotations: Ref<SpectrogramAnnotation[] | undefined> = ref([]);
-    const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
-    const selectedId: Ref<number | null> = ref(null);
     const selectedUsers: Ref<string[]> = ref([]);
     const speciesList: Ref<Species[]> = ref([]);
     const loadedImage = ref(false);
@@ -53,6 +54,8 @@ export default defineComponent({
     const getAnnotationsList = async (annotationId?: number) => {
       const response = await getAnnotations(props.id);
       annotations.value = response.data.sort((a, b) => a.start_time - b.start_time);
+      const tempResp = await getTemporalAnnotations(props.id);
+      temporalAnnotations.value = tempResp.data.sort((a, b) => a.start_time - b.start_time);
       if (annotationId !== undefined) {
         selectedId.value = annotationId;
       }
@@ -83,7 +86,8 @@ export default defineComponent({
         : 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"]?.sort((a, b) => a.start_time - b.start_time);
+      annotations.value = response.data["annotations"]?.sort((a, b) => a.start_time - b.start_time) || [];
+      temporalAnnotations.value = response.data["temporal"]?.sort((a, b) => a.start_time - b.start_time) || [];
       if (response.data.currentUser) {
         currentUser.value = response.data.currentUser;
       }
@@ -101,12 +105,18 @@ export default defineComponent({
       selectedId.value = annotationId;
     };
     const selectedAnnotation = computed(() => {
-      if (selectedId.value !== null && annotations.value) {
+      if (selectedId.value !== null && selectedType.value === 'pulse' && annotations.value) {
         const found = annotations.value.findIndex((item) => item.id === selectedId.value);
         if (found !== -1) {
           return annotations.value[found];
         }
       }
+      if (selectedId.value !== null && selectedType.value === 'sequence' && temporalAnnotations.value) {
+        const found = temporalAnnotations.value.findIndex((item) => item.id === selectedId.value);
+        if (found !== -1) {
+          return temporalAnnotations.value[found];
+        }
+      }
       return null;
     });
     watch(gridEnabled, () => {
@@ -153,6 +163,11 @@ export default defineComponent({
       setSelectedUsers(selectedUsers.value);
     });
 
+    const processSelection = ({id, annotationType}: { id: number, annotationType: 'pulse' | 'sequence'}) => {
+      selectedId.value = id;
+      selectedType.value = annotationType;
+    };
+
     return {
       annotationState,
       compressed,
@@ -161,11 +176,13 @@ export default defineComponent({
       spectroInfo,
       annotations,
       selectedId,
+      selectedType,
       setSelection,
       getAnnotationsList,
       setParentGeoViewer,
       setHoverData,
       toggleLayerVisibility,
+      processSelection,
       speciesList,
       selectedAnnotation,
       parentGeoViewerRef,
@@ -175,6 +192,7 @@ export default defineComponent({
       freqRef,
       // Other user selection
       otherUserAnnotations,
+      temporalAnnotations,
       otherUsers,
       selectedUsers,
       deleteChip,
@@ -318,9 +336,7 @@ export default defineComponent({
         :image="image"
         :spectro-info="spectroInfo"
         :recording-id="id"
-        :annotations="annotations"
         :other-user-annotations="otherUserAnnotations"
-        :selected-id="selectedId"
         :grid="gridEnabled"
         @selected="setSelection($event)"
         @create:annotation="getAnnotationsList($event)"
@@ -333,9 +349,6 @@ export default defineComponent({
         :image="image"
         :spectro-info="spectroInfo"
         :recording-id="id"
-        :annotations="annotations"
-        :other-user-annotations="otherUserAnnotations"
-        :selected-id="selectedId"
         :parent-geo-viewer-ref="parentGeoViewerRef"
         @selected="setSelection($event)"
       />
@@ -343,9 +356,9 @@ export default defineComponent({
     <v-col style="max-width: 300px">
       <annotation-list
         :annotations="annotations"
-        :selected-id="selectedId"
+        :temporal-annotations="temporalAnnotations"
         class="annotation-list"
-        @select="selectedId = $event"
+        @select="processSelection($event)"
       />
       <annotation-editor
         v-if="selectedAnnotation"