diff --git a/client/src/App.vue b/client/src/App.vue
index 5f2bedb..6eaeec7 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,17 +1,27 @@
 <script lang="ts">
-import { defineComponent, inject, ref, onMounted } from "vue";
+import { defineComponent, inject, ref, onMounted, computed, watch } from "vue";
 import OAuthClient from "@girder/oauth-client";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import useState from "./use/useState";
+import { getRecordings } from "./api/api";
 
 export default defineComponent({
   setup() {
     const oauthClient = inject<OAuthClient>("oauthClient");
     const router = useRouter();
+    const route = useRoute();
+    const { nextShared, sharedList } = useState();
+    const getShared = async () => {
+      sharedList.value = (await getRecordings(true)).data;
+    };
+    if (sharedList.value.length === 0) {
+      getShared();
+    }
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
     }
 
-    const loginText = ref('Login');
+    const loginText = ref("Login");
     const checkLogin = () => {
       if (oauthClient.isLoggedIn) {
         loginText.value = "Logout";
@@ -32,8 +42,20 @@ export default defineComponent({
     onMounted(() => {
       checkLogin();
     });
-    const activeTab = ref("recordings");
-    return { oauthClient, loginText, logInOrOut, activeTab };
+    router.afterEach((guard) => {
+      if (guard.path.includes("spectrogram")) {
+        activeTab.value = "spectrogram";
+      }
+    });
+    const activeTab = ref(route.path.includes("spectrogram") ? "spectrogram" : "recordings");
+    const containsSpectro = computed(() => route.path.includes("spectrogram"));
+    watch(containsSpectro, () => {
+      if (route.path.includes("spectrogram")) {
+        activeTab.value = "spectrogram";
+      }
+    });
+
+    return { oauthClient, containsSpectro, loginText, logInOrOut, activeTab, nextShared };
   },
 });
 </script>
@@ -42,9 +64,9 @@ export default defineComponent({
   <v-app id="app">
     <v-app-bar app>
       <v-tabs
-        v-if="oauthClient.isLoggedIn"
+        v-if="oauthClient.isLoggedIn && activeTab"
+        v-model="activeTab"
         fixed-tabs
-        :model-value="activeTab"
       >
         <v-tab
           to="/"
@@ -58,8 +80,36 @@ export default defineComponent({
         >
           Recordings
         </v-tab>
+        <v-tab
+          v-show="containsSpectro"
+          value="spectrogram"
+        >
+          Spectrogram
+        </v-tab>
       </v-tabs>
       <v-spacer />
+      <v-tooltip
+        v-if="containsSpectro && nextShared !== false"
+        bottom
+      >
+        <template #activator="{ props: subProps }">
+          <v-btn
+            v-bind="subProps"
+            variant="outlined"
+            :to="`/recording/${nextShared.id}/spectrogram`"
+          >
+            Next Shared<v-icon>mdi-chevron-right</v-icon>
+          </v-btn>
+        </template>
+        <span v-if="nextShared">
+          <div>
+            <b>Name:</b><span>{{ nextShared.name }}</span>
+          </div>
+          <div>
+            <b>Owner:</b><span>{{ nextShared.owner_username }}</span>
+          </div>
+        </span>
+      </v-tooltip>
       <v-btn @click="logInOrOut">
         {{ loginText }}
       </v-btn>
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index 88224ce..a814662 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -3,10 +3,12 @@ import { defineComponent, PropType } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
 import useState from "../use/useState";
 import { watch, ref } from "vue";
+import RecordingList from "./RecordingList.vue";
 
 export default defineComponent({
   name: "AnnotationList",
   components: {
+    RecordingList,
   },
   props: {
     spectroInfo: {
@@ -36,9 +38,13 @@ export default defineComponent({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tabSwitch = (event: any) => {
     // On tab switches we want to deselect the curret anntation
-    tab.value = event as 'sequence' | 'pulse';
-    selectedType.value = event as 'sequence' | 'pulse';
-    selectedId.value = null;
+    if (['sequence', 'pulse'].includes(event)) {
+      tab.value = event as 'sequence' | 'pulse';
+      selectedType.value = event as 'sequence' | 'pulse';
+      selectedId.value = null;
+    } else {
+      tab.value = 'recordings';
+    }
   };
 
     return {
@@ -60,20 +66,38 @@ export default defineComponent({
 <template>
   <v-card class="pa-0 ma-0">
     <v-card-title>
-      <v-tabs
-        v-model="tab"
-        @update:model-value="tabSwitch($event)"
-      >
-        <v-tab value="pulse">
-          Pulse
-        </v-tab>
-        <v-tab value="sequence">
-          Sequence
-        </v-tab>
-      </v-tabs>
+      <v-row dense>
+        <v-tabs
+          v-model="tab"
+          class="ma-auto"
+          @update:model-value="tabSwitch($event)"
+        >
+          <v-tab
+            value="recordings"
+            size="x-small"
+          >
+            Recordings
+          </v-tab>
+          <v-tab
+            value="pulse"
+            size="x-small"
+          >
+            Pulse
+          </v-tab>
+          <v-tab
+            value="sequence"
+            size="x-small"
+          >
+            Sequence
+          </v-tab>
+        </v-tabs>
+      </v-row>
     </v-card-title>
     <v-card-text class="">
       <v-window v-model="tab">
+        <v-window-item value="recordings">
+          <recording-list />
+        </v-window-item>
         <v-window-item value="pulse">
           <v-row class="pa-2">
             <v-col>
diff --git a/client/src/components/RecordingList.vue b/client/src/components/RecordingList.vue
new file mode 100644
index 0000000..b8d5433
--- /dev/null
+++ b/client/src/components/RecordingList.vue
@@ -0,0 +1,171 @@
+<script lang="ts">
+import { defineComponent, ref, Ref, onMounted, computed } from 'vue';
+import { getRecordings } from '../api/api';
+import useState from '../use/useState';
+import  { EditingRecording } from './UploadRecording.vue';
+
+export default defineComponent({
+    components: {
+    },
+  setup() {
+
+    const { sharedList, recordingList } = useState();
+    const editingRecording: Ref<EditingRecording | null> = ref(null);
+
+    const fetchRecordings = async () => {
+        const recordings = await getRecordings();
+        recordingList.value = recordings.data;
+        const shared = await getRecordings(true);
+        sharedList.value = shared.data;
+
+    };
+    onMounted(() => fetchRecordings());
+
+    const openPanel = ref(1);
+    const filtered = ref(true);
+    const modifiedList = computed(() => {
+        if (filtered.value) {
+            return sharedList.value.filter((item) => !item.userMadeAnnotations);
+        }
+        return sharedList.value;
+    });
+
+    return {
+        recordingList,
+        sharedList,
+        modifiedList,
+        filtered,
+        editingRecording,
+        openPanel,
+     };
+  },
+});
+</script>
+
+<template>
+  <v-expansion-panels v-model="openPanel">
+    <v-expansion-panel>
+      <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <div>
+          <v-row
+            dense
+            class="text-center"
+          >
+            <v-col class="text-left">
+              <b>Name</b>
+            </v-col>
+            <v-col><b>Public</b></v-col>
+            <v-col><b>Annotations</b></v-col>
+          </v-row>
+        </div>
+        <div
+          v-for="item in recordingList"
+          :key="`public_${item.id}`"
+        >
+          <v-row
+            dense
+            class="text-center"
+          >
+            <v-col class="text-left">
+              <router-link
+                :to="`/recording/${item.id.toString()}/spectrogram`"
+              >
+                {{ item.name }}
+              </router-link>
+            </v-col>
+            <v-col>
+              <v-icon
+                v-if="item.public"
+                color="success"
+              >
+                mdi-check
+              </v-icon>
+              <v-icon
+                v-else
+                color="error"
+              >
+                mdi-close
+              </v-icon>
+            </v-col>
+            <v-col>
+              <div>
+                {{ item.userAnnotations }}
+              </div>
+            </v-col>
+          </v-row>
+        </div>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-title>Public</v-expansion-panel-title>
+      <v-expansion-panel-text class="ma-0 pa-0">
+        <v-switch
+          v-model="filtered"
+          label="Filter Annotated"
+          dense
+        />
+        <div>
+          <v-row
+            dense
+            class="text-center"
+          >
+            <v-col class="text-left">
+              <b>Name</b>
+            </v-col>
+            <v-col><b>Owner</b></v-col>
+            <v-col><b>Annotated</b></v-col>
+          </v-row>
+        </div>
+        <div
+          v-for="item in modifiedList"
+          :key="`public_${item.id}`"
+        >
+          <v-row
+            dense
+            class="text-center"
+          >
+            <v-col class="text-left">
+              <router-link
+                :to="`/recording/${item.id.toString()}/spectrogram`"
+              >
+                {{ item.name }}
+              </router-link>
+            </v-col>
+            <v-col>
+              <div style="font-size:0.75em">
+                {{ item.owner_username }}
+              </div>
+            </v-col>
+            <v-col>
+              <div>
+                <v-icon
+                  v-if="item.userMadeAnnotations"
+                  color="success"
+                >
+                  mdi-check
+                </v-icon>
+                <v-icon
+                  v-else
+                  color="error"
+                >
+                  mdi-close
+                </v-icon>
+              </div>
+            </v-col>
+          </v-row>
+        </div>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<style scoped>
+.v-expansion-panel-text>>> .v-expansion-panel-text__wrap {
+  padding: 0 !important;
+}
+
+.v-expansion-panel-text__wrapper {
+    padding: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 4c0ded3..c9db949 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -1,7 +1,7 @@
-import { ref, Ref } from "vue";
+import { ref, Ref, watch } from "vue";
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
-import { OtherUserAnnotations, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import { OtherUserAnnotations, Recording, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
 
 const annotationState: Ref<AnnotationState> = ref("");
 const creationType: Ref<'pulse' | 'sequence'> = ref("pulse");
@@ -15,6 +15,9 @@ const selectedType: Ref<'pulse' | 'sequence'> = ref('pulse');
 const annotations : Ref<SpectrogramAnnotation[]> = ref([]);
 const temporalAnnotations: Ref<SpectrogramTemporalAnnotation[]> = ref([]);
 const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
+const sharedList: Ref<Recording[]> = ref([]);
+const recordingList: Ref<Recording[]> = ref([]);
+const nextShared: Ref<Recording | false> = ref(false);
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -50,6 +53,15 @@ export default function useState() {
       selectedType.value = annotationType;
     }
   }
+  watch(sharedList, () => {
+    const filtered = sharedList.value.filter((item) => !item.userMadeAnnotations);
+    if (filtered.length > 0) {
+     nextShared.value = filtered[0];
+    } else {
+      nextShared.value = false;
+    }
+  });
+  
     return {
     annotationState,
     creationType,
@@ -68,5 +80,8 @@ export default function useState() {
     otherUserAnnotations,
     selectedId,
     selectedType,
+    sharedList,
+    recordingList,
+    nextShared,
   };
 }
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 5df166c..8a8a344 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -6,6 +6,7 @@ import {
 } from "vuetify/labs/VDataTable";
 import UploadRecording, { EditingRecording } from '../components/UploadRecording.vue';
 import MapLocation from '../components/MapLocation.vue';
+import useState from '../use/useState';
 
 export default defineComponent({
     components: {
@@ -15,8 +16,7 @@ export default defineComponent({
     },
   setup() {
     const itemsPerPage = ref(-1);
-    const recordingList: Ref<Recording[]> = ref([]);
-    const sharedList: Ref<Recording[]> = ref([]);
+    const { sharedList, recordingList } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
 
@@ -227,7 +227,7 @@ export default defineComponent({
             <template #activator="{ props }">
               <v-icon v-bind="props">
                 mdi-map
-              </v-icon>
+              </v-icon>sharedList
             </template>
             <v-card>
               <map-location
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 42b96af..1f02eb3 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -122,6 +122,9 @@ export default defineComponent({
     watch(gridEnabled, () => {
       toggleLayerVisibility("grid");
     });
+    watch(() => props.id, () => {
+      loadData();
+    });
     onMounted(() => loadData());
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const parentGeoViewerRef: Ref<any> = ref(null);
@@ -353,7 +356,7 @@ export default defineComponent({
         @selected="setSelection($event)"
       />
     </v-col>
-    <v-col style="max-width: 300px">
+    <v-col style="max-width: 400px">
       <annotation-list
         :annotations="annotations"
         :temporal-annotations="temporalAnnotations"