diff --git a/client/src/components/AnnotationEditor.vue b/client/src/components/AnnotationEditor.vue
index 1245061..5321a3a 100644
--- a/client/src/components/AnnotationEditor.vue
+++ b/client/src/components/AnnotationEditor.vue
@@ -28,13 +28,13 @@ export default defineComponent({
   emits: ['update:annotation', 'delete:annotation'],
   setup(props, { emit }) {
     const speciesList = computed(() => {
-        return props.species.map((item) => (item.common_name));
+        return props.species.map((item) => (item.species_code || item.common_name)).sort();
     });
-    const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.common_name) || []);
+    const speciesEdit: Ref<string[]> = ref( props.annotation?.species?.map((item) => item.species_code || item.common_name) || []);
     const comments: Ref<string> = ref(props.annotation?.comments || '');
     watch(() => props.annotation, () => {
         if (props.annotation?.species) {
-            speciesEdit.value = props.annotation.species.map((item) => item.common_name);
+            speciesEdit.value = props.annotation.species.map((item) => item.species_code || item.common_name);
         }
         if (props.annotation?.comments) {
             comments.value = props.annotation.comments;
@@ -91,7 +91,7 @@ export default defineComponent({
       </v-row>
     </v-card-title>
     <v-row>
-      <v-select
+      <v-autocomplete
         v-model="speciesEdit"
         multiple
         closable-chips
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index 37f10e9..05c2bcd 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -22,10 +22,6 @@ export default defineComponent({
         type: Number as PropType<number | null>,
         default: null,
     },
-    mode: {
-      type: String as PropType<'creation' | 'editing' | 'disabled'>,
-      required: true,
-    }
   },
   emits: ['select'],
   setup(props) {
@@ -58,7 +54,7 @@ export default defineComponent({
         Annotations
         <v-spacer />
         <v-btn
-          :disabled="mode === 'creation'"
+          :disabled="annotationState === 'creating'"
           @click="annotationState = 'creating'"
         >
           Add<v-icon>mdi-plus</v-icon>
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 17d7e2b..4681b79 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -48,7 +48,6 @@ export default defineComponent({
     "selected",
     "geoViewerRef",
     "hoverData",
-    "set-mode",
   ],
   setup(props, { emit }) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
@@ -221,7 +220,6 @@ export default defineComponent({
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"
       @set-cursor="setCursor($event)"
-      @set-mode="$emit('set-mode', $event)"
     />
     <div
       ref="imageCursorRef" 
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index d22c5ef..8a1ad46 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -39,7 +39,7 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ["selected", "update:annotation", "create:annotation", "set-cursor", "set-mode"],
+  emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
   setup(props, { emit }) {
     const {
       annotationState,
@@ -67,7 +67,6 @@ export default defineComponent({
     const event = (type: string, data: any) => {
       // Will handle clicking, selecting and editing here
       if (type === "update:mode") {
-        emit("set-mode", data.mode);
         setAnnotationState(data.mode);
       }
       if (type === "update:cursor") {
@@ -263,7 +262,7 @@ export default defineComponent({
               editAnnotationLayer.getMode() === "disabled" &&
               props.selectedId === null
             ) {
-              emit("set-mode", "disabled");
+              annotationState.value === 'disabled';
               editAnnotationLayer.featureLayer.clear();
             }
           });
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 888ba4e..1ef1b21 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -9,7 +9,7 @@ const colorScale: Ref<d3.ScaleOrdinal<string, string, never> | undefined> = ref(
 const selectedUsers: Ref<string[]> = ref([]);
 const currentUser: Ref<string> = ref('');
 
-type AnnotationState = "" | "editing" | "creating";
+type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
   const setAnnotationState = (state: AnnotationState) => {
     annotationState.value = state;
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index e08be3e..b023ce1 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -38,6 +38,7 @@ export default defineComponent({
       setSelectedUsers,
       createColorScale,
       currentUser,
+      annotationState,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
@@ -49,7 +50,6 @@ export default defineComponent({
     const loadedImage = ref(false);
     const compressed = ref(false);
     const gridEnabled = ref(false);
-    const mode: Ref<"creation" | "editing" | "disabled"> = ref("disabled");
     const getAnnotationsList = async (annotationId?: number) => {
       const response = await getAnnotations(props.id);
       annotations.value = response.data.sort((a, b) => a.start_time - b.start_time);
@@ -128,10 +128,6 @@ export default defineComponent({
     };
     watch(compressed, () => loadData());
 
-    const setMode = (newMode: "creation" | "editing" | "disabled") => {
-      mode.value = newMode;
-    };
-
     const keyboardEvent = (e: KeyboardEvent) => {
       if (e.key === "ArrowDown") {
         selectNextIndex(1);
@@ -158,6 +154,7 @@ export default defineComponent({
     });
 
     return {
+      annotationState,
       compressed,
       loadedImage,
       image,
@@ -168,7 +165,6 @@ export default defineComponent({
       getAnnotationsList,
       setParentGeoViewer,
       setHoverData,
-      setMode,
       toggleLayerVisibility,
       speciesList,
       selectedAnnotation,
@@ -177,7 +173,6 @@ export default defineComponent({
       layerVisibility,
       timeRef,
       freqRef,
-      mode,
       // Other user selection
       otherUserAnnotations,
       otherUsers,
@@ -193,123 +188,128 @@ export default defineComponent({
   <v-row>
     <v-col>
       <v-toolbar>
-        <v-row>
-          <v-col cols="2">
-            <div>
-              <b>Time:</b>
-              <span v-if="timeRef >= 0">{{ timeRef.toFixed(0) }}ms</span>
-            </div>
-            <div>
-              <b>Frequency:</b>
-              <span v-if="freqRef >= 0">{{ freqRef.toFixed(2) }}KHz</span>
-            </div>
-          </v-col>
-          <v-col
-            v-if="mode !== 'disabled'"
-            cols="1"
-            style="font-size: 20px"
-          >
-            <b>Mode:</b>
-            <span> {{ mode }}</span>
-          </v-col>
-          <v-col
-            v-if="otherUsers.length && colorScale" 
-            class="ma-0 pa-0 pt-5"
-          >
-            <v-select
-              v-model="selectedUsers"
-              :items="otherUsers"
-              density="compact"
-              label="Other Users"
-              multiple
-              clearable
-              variant="outlined"
-              closable-chips
+        <v-container>
+          <v-row align="center">
+            <v-col cols="2">
+              <div>
+                <b>Time:</b>
+                <span v-if="timeRef >= 0">{{ timeRef.toFixed(0) }}ms</span>
+              </div>
+              <div>
+                <b>Frequency:</b>
+                <span v-if="freqRef >= 0">{{ freqRef.toFixed(2) }}KHz</span>
+              </div>
+            </v-col>
+            <v-col
+              cols="1"
+              class="px-0"
+              style="font-size: 20px"
+            >
+              <div v-if="annotationState !== '' && annotationState !== 'disabled'">
+                <b>Mode:</b>
+                <span> {{ annotationState }}</span>
+              </div>
+            </v-col>
+            <v-col
+              v-if="otherUsers.length && colorScale" 
+              cols="3"
+              class="ma-0 pa-0 pt-5"
             >
-              <template #selection="{ item }">
-                <v-chip
-                  closable
-                  :color="colorScale(item.value)"
-                  text-color="gray"
-                  @click:close="deleteChip(item.value)"
+              <v-select
+                v-model="selectedUsers"
+                :items="otherUsers"
+                density="compact"
+                label="Other Users"
+                multiple
+                clearable
+                variant="outlined"
+                closable-chips
+              >
+                <template #selection="{ item }">
+                  <v-chip
+                    closable
+                    :color="colorScale(item.value)"
+                    text-color="gray"
+                    @click:close="deleteChip(item.value)"
+                  >
+                    {{ item.value }}
+                  </v-chip>
+                </template>
+              </v-select>
+            </v-col>
+            <v-spacer />
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="layerVisibility.includes('species') ? 'blue' : ''"
+                  @click="toggleLayerVisibility('species')"
                 >
-                  {{ item.value }}
-                </v-chip>
+                  mdi-bat
+                </v-icon>
               </template>
-            </v-select>
-          </v-col>
-          <v-spacer />
-          <v-tooltip bottom>
-            <template #activator="{ props: subProps }">
-              <v-icon
-                v-bind="subProps"
-                size="35"
-                class="mr-5 mt-5"
-                :color="layerVisibility.includes('species') ? 'blue' : ''"
-                @click="toggleLayerVisibility('species')"
-              >
-                mdi-bat
-              </v-icon>
-            </template>
-            <span> Turn Species Label On/Off</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template #activator="{ props: subProps }">
-              <v-btn
-                v-bind="subProps"
-                size="35"
-                class="mr-5 mt-5"
-                :color="layerVisibility.includes('time') ? 'blue' : ''"
-                @click="toggleLayerVisibility('time')"
-              >
-                <h3>ms</h3>
-              </v-btn>
-            </template>
-            <span> Turn Time Label On/Off</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template #activator="{ props: subProps }">
-              <v-btn
-                v-bind="subProps"
-                size="35"
-                class="mr-5 mt-5"
-                :color="layerVisibility.includes('freq') ? 'blue' : ''"
-                @click="toggleLayerVisibility('freq')"
-              >
-                <h3>KHz</h3>
-              </v-btn>
-            </template>
-            <span> Turn Time Label On/Off</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template #activator="{ props: subProps }">
-              <v-icon
-                v-bind="subProps"
-                size="35"
-                class="mr-5 mt-5"
-                :color="gridEnabled ? 'blue' : ''"
-                @click="gridEnabled = !gridEnabled"
-              >
-                mdi-grid
-              </v-icon>
-            </template>
-            <span> Turn Legend Grid On/Off</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template #activator="{ props: subProps }">
-              <v-icon
-                v-bind="subProps"
-                size="35"
-                class="mr-5 mt-5"
-                :color="compressed ? 'blue' : ''"
-                @click="compressed = !compressed"
-              >
-                mdi-calendar-collapse-horizontal
-              </v-icon>
-            </template>
-            <span> Toggle Compressed View</span>
-          </v-tooltip>
-        </v-row>
+              <span> Turn Species Label On/Off</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="layerVisibility.includes('time') ? 'blue' : ''"
+                  @click="toggleLayerVisibility('time')"
+                >
+                  <h3>ms</h3>
+                </v-btn>
+              </template>
+              <span> Turn Time Label On/Off</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="layerVisibility.includes('freq') ? 'blue' : ''"
+                  @click="toggleLayerVisibility('freq')"
+                >
+                  <h3>KHz</h3>
+                </v-btn>
+              </template>
+              <span> Turn Time Label On/Off</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="gridEnabled ? 'blue' : ''"
+                  @click="gridEnabled = !gridEnabled"
+                >
+                  mdi-grid
+                </v-icon>
+              </template>
+              <span> Turn Legend Grid On/Off</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="compressed ? 'blue' : ''"
+                  @click="compressed = !compressed"
+                >
+                  mdi-calendar-collapse-horizontal
+                </v-icon>
+              </template>
+              <span> Toggle Compressed View</span>
+            </v-tooltip>
+          </v-row>
+        </v-container>
       </v-toolbar>
       <spectrogram-viewer
         v-if="loadedImage"
@@ -325,7 +325,6 @@ export default defineComponent({
         @update:annotation="getAnnotationsList()"
         @geo-viewer-ref="setParentGeoViewer($event)"
         @hover-data="setHoverData($event)"
-        @set-mode="setMode($event)"
       />
       <thumbnail-viewer
         v-if="loadedImage && parentGeoViewerRef"
@@ -343,7 +342,6 @@ export default defineComponent({
       <annotation-list
         :annotations="annotations"
         :selected-id="selectedId"
-        :mode="mode"
         class="annotation-list"
         @select="selectedId = $event"
       />