diff --git a/frontend/src/components/VAudioDetails/VRelatedAudio.vue b/frontend/src/components/VAudioDetails/VRelatedAudio.vue
deleted file mode 100644
index 2c22ce6afa0..00000000000
--- a/frontend/src/components/VAudioDetails/VRelatedAudio.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <section v-if="showRelated">
-    <h2 class="heading-6 lg:heading-6 mb-6">
-      {{ $t("audioDetails.relatedAudios") }}
-    </h2>
-    <VAudioCollection
-      :results="media"
-      :fetch-state="fetchState"
-      kind="related"
-      :collection-label="$t('audioDetails.relatedAudios').toString()"
-      class="mb-12"
-    />
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue"
-import { useRoute } from "@nuxtjs/composition-api"
-
-import { useRelatedMediaStore } from "~/stores/media/related-media"
-
-import { defineEvent } from "~/types/emits"
-import type { AudioDetail } from "~/types/media"
-import type { AudioInteractionData } from "~/types/analytics"
-
-import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
-
-export default defineComponent({
-  name: "VRelatedAudio",
-  components: { VAudioCollection },
-  emits: {
-    interacted: defineEvent<[Omit<AudioInteractionData, "component">]>(),
-  },
-  setup() {
-    const relatedMediaStore = useRelatedMediaStore()
-
-    const route = useRoute()
-
-    const media = computed(
-      () => (relatedMediaStore.media ?? []) as AudioDetail[]
-    )
-    watch(
-      route,
-      async (newRoute) => {
-        if (newRoute.params.id !== relatedMediaStore.mainMediaId) {
-          await relatedMediaStore.fetchMedia("audio", newRoute.params.id)
-        }
-      },
-      { immediate: true }
-    )
-
-    const showRelated = computed(
-      () => media.value.length > 0 || relatedMediaStore.fetchState.isFetching
-    )
-
-    const fetchState = computed(() => relatedMediaStore.fetchState)
-
-    return {
-      media,
-      showRelated,
-      fetchState,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
index 3bca3fa7923..6b70974b2cf 100644
--- a/frontend/src/components/VCollectionPage.vue
+++ b/frontend/src/components/VCollectionPage.vue
@@ -7,7 +7,7 @@
       :media-type="mediaType"
       :class="mediaType === 'image' ? 'mb-4' : 'mb-2'"
     />
-    <VAudioCollection
+    <VAudioList
       v-if="results.type === 'audio'"
       :collection-label="collectionLabel"
       :fetch-state="fetchState"
@@ -35,12 +35,12 @@ import { Results } from "~/types/result"
 import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
-import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
+import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
 import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
 
 export default defineComponent({
   name: "VCollectionPage",
-  components: { VAudioCollection, VImageGrid, VCollectionHeader },
+  components: { VAudioList, VImageGrid, VCollectionHeader },
   props: {
     mediaType: {
       type: String as PropType<SupportedMediaType>,
diff --git a/frontend/src/components/VImageDetails/VRelatedImages.vue b/frontend/src/components/VImageDetails/VRelatedImages.vue
deleted file mode 100644
index 954b620e0bb..00000000000
--- a/frontend/src/components/VImageDetails/VRelatedImages.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <aside v-if="showRelated">
-    <h2 class="heading-6 md:heading-5 mb-6">
-      {{ $t("imageDetails.relatedImages") }}
-    </h2>
-    <VImageGrid
-      kind="related"
-      :results="media"
-      :fetch-state="fetchState"
-      :image-grid-label="$t('imageDetails.relatedImages').toString()"
-    />
-  </aside>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue"
-import { useRoute } from "@nuxtjs/composition-api"
-
-import type { ImageDetail } from "~/types/media"
-import { useRelatedMediaStore } from "~/stores/media/related-media"
-
-import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
-
-export default defineComponent({
-  name: "VRelatedImages",
-  components: { VImageGrid },
-  setup() {
-    const relatedMediaStore = useRelatedMediaStore()
-
-    const route = useRoute()
-
-    watch(
-      route,
-      async (newRoute) => {
-        if (newRoute.params.id !== relatedMediaStore.mainMediaId) {
-          await relatedMediaStore.fetchMedia("image", newRoute.params.id)
-        }
-      },
-      { immediate: true }
-    )
-
-    const showRelated = computed(
-      () => media.value.length > 0 || relatedMediaStore.fetchState.isFetching
-    )
-
-    const media = computed(
-      () => (relatedMediaStore.media ?? []) as ImageDetail[]
-    )
-
-    const fetchState = computed(() => relatedMediaStore.fetchState)
-
-    return {
-      showRelated,
-
-      media,
-
-      fetchState,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VMediaInfo/VRelatedMedia.vue b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
new file mode 100644
index 00000000000..77cbca6d7c6
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
@@ -0,0 +1,105 @@
+<template>
+  <VMediaCollection
+    v-if="showRelated"
+    :results="results"
+    :is-fetching="isFetching"
+    :collection-label="collectionLabel"
+    kind="related"
+    :related-to="relatedTo"
+    :search-term="searchTerm"
+    :aria-label="collectionLabel"
+  >
+    <template #header>
+      <h2
+        id="related-heading"
+        class="heading-6 mb-6"
+        :class="results.type === 'image' ? 'md:heading-5' : 'lg:heading-6'"
+      >
+        {{ collectionLabel }}
+      </h2>
+    </template>
+  </VMediaCollection>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, watch } from "vue"
+import { useRoute } from "@nuxtjs/composition-api"
+
+import { useRelatedMediaStore } from "~/stores/media/related-media"
+import { useI18n } from "~/composables/use-i18n"
+
+import type { SupportedMediaType } from "~/constants/media"
+import type { AudioResults, ImageResults } from "~/types/result"
+
+import VMediaCollection from "~/components/VSearchResultsGrid/VMediaCollection.vue"
+
+export default defineComponent({
+  name: "VRelatedMedia",
+  components: { VMediaCollection },
+  props: {
+    mediaType: {
+      type: String as PropType<SupportedMediaType>,
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const relatedMediaStore = useRelatedMediaStore()
+
+    const route = useRoute()
+
+    const results = computed(() => {
+      const media = relatedMediaStore.media ?? []
+      return { type: props.mediaType, items: media } as
+        | ImageResults
+        | AudioResults
+    })
+    watch(
+      route,
+      async (newRoute) => {
+        if (newRoute.params.id !== relatedMediaStore.mainMediaId) {
+          await relatedMediaStore.fetchMedia(
+            props.mediaType,
+            newRoute.params.id
+          )
+        }
+      },
+      { immediate: true }
+    )
+
+    const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
+    const showRelated = computed(
+      () => results.value.items.length > 0 || isFetching.value
+    )
+
+    const searchTerm = computed(() => {
+      const q = Array.isArray(route.value.query.q)
+        ? route.value.query.q[0]
+        : route.value.query.q
+      return q ?? ""
+    })
+
+    const i18n = useI18n()
+
+    const collectionLabel = computed(() => {
+      const key =
+        props.mediaType === "audio"
+          ? "audioDetails.relatedAudios"
+          : "imageDetails.relatedImages"
+      return i18n.t(key).toString()
+    })
+
+    return {
+      results,
+      showRelated,
+      isFetching,
+
+      searchTerm,
+      collectionLabel,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index 2c657caf92b..23f0caf8e86 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -51,7 +51,7 @@
           :search-term="searchTerm"
           layout="box"
           :size="isSm ? 'l' : 's'"
-          :is-related="false"
+          kind="search"
         />
       </template>
     </ol>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
index db3f04ab70a..5bc9492ae5b 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
@@ -1,44 +1,36 @@
 <template>
-  <section>
-    <VGridSkeleton
-      v-if="results && results.length === 0 && !fetchState.isFinished"
-      is-for-tab="audio"
-    />
-    <VSnackbar size="large" :is-visible="isSnackbarVisible">
-      <i18n path="audioResults.snackbar.text" tag="p">
-        <template
-          v-for="keyboardKey in ['spacebar', 'left', 'right']"
-          #[keyboardKey]
-        >
-          <kbd :key="keyboardKey" class="font-sans">{{
-            $t(`audioResults.snackbar.${keyboardKey}`)
-          }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <VAudioList
-      :collection-label="collectionLabel"
-      :kind="kind"
-      :results="results"
-    />
-    <footer v-if="kind !== 'related'" class="mt-4">
-      <VLoadMore />
-    </footer>
-  </section>
+  <div>
+    <VAudioInstructions kind="audio" />
+    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
+    <ol
+      :aria-label="collectionLabel"
+      class="-mx-2 flex flex-col md:-mx-4"
+      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
+    >
+      <VAudioResult
+        v-for="audio in results"
+        :key="audio.id"
+        :search-term="searchTerm"
+        :related-to="relatedTo"
+        :audio="audio"
+        layout="row"
+        :size="audioTrackSize"
+        :kind="kind"
+      />
+    </ol>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
 import type { ResultKind } from "~/types/result"
-import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
 
-import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
-import VLoadMore from "~/components/VLoadMore.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VSnackbar from "~/components/VSnackbar.vue"
+import { useUiStore } from "~/stores/ui"
+
+import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
+import VAudioInstructions from "~/components/VSearchResultsGrid/VAudioInstructions.vue"
 
 /**
  * This component shows a loading skeleton if the results are not yet loaded,
@@ -47,15 +39,13 @@ import VSnackbar from "~/components/VSnackbar.vue"
 export default defineComponent({
   name: "VAudioCollection",
   components: {
-    VSnackbar,
-    VAudioList,
-    VGridSkeleton,
-    VLoadMore,
+    VAudioInstructions,
+    VAudioResult,
   },
   props: {
     results: {
       type: Array as PropType<AudioDetail[]>,
-      default: () => [],
+      required: true,
     },
     /**
      * If used for Related audio, do not show the Load more button.
@@ -64,10 +54,6 @@ export default defineComponent({
       type: String as PropType<ResultKind>,
       required: true,
     },
-    fetchState: {
-      type: Object as PropType<FetchState>,
-      required: true,
-    },
     /**
      * The label used for the list of audio for accessibility.
      */
@@ -75,12 +61,34 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
   },
-  setup() {
-    const { isVisible: isSnackbarVisible } = useAudioSnackbar()
+  setup(props) {
+    const uiStore = useUiStore()
+
+    // Determine the size of the audio track based on the kind
+    // of collection and the current breakpoint.
+    const audioTrackSize = computed(() => {
+      if (props.kind === "related") {
+        return uiStore.isBreakpoint("sm") ? "m" : "s"
+      } else {
+        return !uiStore.isBreakpoint("sm")
+          ? "s"
+          : uiStore.isBreakpoint("xl")
+          ? "l"
+          : "m"
+      }
+    })
 
     return {
-      isSnackbarVisible,
+      audioTrackSize,
     }
   },
 })
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
new file mode 100644
index 00000000000..881f6e0431a
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
@@ -0,0 +1,48 @@
+<template>
+  <VSnackbar size="large" :is-visible="isSnackbarVisible">
+    <i18n :path="`${i18nPrefix}.text`" tag="p">
+      <template v-for="keyboardKey in keyboardKeys" #[keyboardKey]>
+        <kbd :key="keyboardKey" class="font-sans">{{
+          $t(`${i18nPrefix}.${keyboardKey}`)
+        }}</kbd>
+      </template>
+    </i18n>
+  </VSnackbar>
+</template>
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue"
+
+import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
+
+import VSnackbar from "~/components/VSnackbar.vue"
+
+export default defineComponent({
+  name: "VAudioInstructions",
+  components: { VSnackbar },
+  props: {
+    kind: {
+      type: String as PropType<"all" | "audio">,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { isVisible: isSnackbarVisible } = useAudioSnackbar()
+
+    const keyboardKeys = computed(() =>
+      props.kind === "all" ? ["spacebar"] : ["spacebar", "left", "right"]
+    )
+
+    const i18nPrefix = computed(() => {
+      return props.kind === "all"
+        ? "allResults.snackbar"
+        : "audioResults.snackbar"
+    })
+
+    return {
+      keyboardKeys,
+      isSnackbarVisible,
+      i18nPrefix,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
index fe7618e32f1..fb116ecb4b7 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioList.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
@@ -1,47 +1,88 @@
 <template>
-  <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-  <ol
-    :aria-label="collectionLabel"
-    class="-mx-2 flex flex-col md:-mx-4"
-    :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
-  >
-    <VAudioResult
-      v-for="audio in results"
-      :key="audio.id"
-      :search-term="searchTerm"
-      :audio="audio"
-      layout="row"
-      :size="audioTrackSize"
-      :kind="kind"
+  <section>
+    <VGridSkeleton
+      v-if="results && results.length === 0 && !fetchState.isFinished"
+      is-for-tab="audio"
     />
-  </ol>
+    <VSnackbar size="large" :is-visible="isSnackbarVisible">
+      <i18n path="audioResults.snackbar.text" tag="p">
+        <template
+          v-for="keyboardKey in ['spacebar', 'left', 'right']"
+          #[keyboardKey]
+        >
+          <kbd :key="keyboardKey" class="font-sans">{{
+            $t(`audioResults.snackbar.${keyboardKey}`)
+          }}</kbd>
+        </template>
+      </i18n>
+    </VSnackbar>
+    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
+    <ol
+      :aria-label="collectionLabel"
+      class="-mx-2 flex flex-col md:-mx-4"
+      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
+    >
+      <VAudioResult
+        v-for="audio in results"
+        :key="audio.id"
+        :search-term="searchTerm"
+        :audio="audio"
+        layout="row"
+        :size="audioTrackSize"
+        :kind="kind"
+      />
+    </ol>
+    <footer v-if="kind !== 'related'" class="mt-4">
+      <VLoadMore />
+    </footer>
+  </section>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
+import type { FetchState } from "~/types/fetch-state"
 import type { ResultKind } from "~/types/result"
+import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
+
 import { useSearchStore } from "~/stores/search"
+
 import { useUiStore } from "~/stores/ui"
 
+import VLoadMore from "~/components/VLoadMore.vue"
+import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
+import VSnackbar from "~/components/VSnackbar.vue"
 import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
 
 /**
- * The list of audio for the search results and the related audio.
+ * This component shows a loading skeleton if the results are not yet loaded,
+ * and then shows the list of audio, with the Load more button if needed.
  */
 export default defineComponent({
   name: "VAudioList",
-  components: { VAudioResult },
+  components: {
+    VAudioResult,
+    VSnackbar,
+    VGridSkeleton,
+    VLoadMore,
+  },
   props: {
     results: {
       type: Array as PropType<AudioDetail[]>,
       default: () => [],
     },
+    /**
+     * If used for Related audio, do not show the Load more button.
+     */
     kind: {
       type: String as PropType<ResultKind>,
       required: true,
     },
+    fetchState: {
+      type: Object as PropType<FetchState>,
+      required: true,
+    },
     /**
      * The label used for the list of audio for accessibility.
      */
@@ -51,6 +92,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { isVisible: isSnackbarVisible } = useAudioSnackbar()
+
     const uiStore = useUiStore()
 
     const audioTrackSize = computed(() => {
@@ -71,6 +114,7 @@ export default defineComponent({
     return {
       audioTrackSize,
       searchTerm,
+      isSnackbarVisible,
     }
   },
 })
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
index 30924848ae5..2bb52e4907b 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
@@ -51,7 +51,11 @@ export default defineComponent({
     },
     kind: {
       type: String as PropType<ResultKind>,
-      default: "search",
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string | null>,
+      default: null,
     },
   },
   setup(props) {
@@ -76,7 +80,7 @@ export default defineComponent({
         mediaType: AUDIO,
         query: props.searchTerm,
         provider: audio.provider,
-        relatedTo: null,
+        relatedTo: props.relatedTo,
         sensitivities: audio.sensitivity?.join(",") ?? "",
         isBlurred: shouldBlur.value,
       })
diff --git a/frontend/src/components/VSearchResultsGrid/VImageCollection.vue b/frontend/src/components/VSearchResultsGrid/VImageCollection.vue
new file mode 100644
index 00000000000..86d814080fc
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VImageCollection.vue
@@ -0,0 +1,68 @@
+<template>
+  <ol class="image-grid flex flex-wrap gap-4" :aria-label="collectionLabel">
+    <VImageCell
+      v-for="image in results"
+      :key="image.id"
+      :image="image"
+      :search-term="searchTerm"
+      aspect-ratio="intrinsic"
+      :kind="kind"
+      :related-to="relatedTo"
+    />
+  </ol>
+</template>
+
+<script lang="ts">
+/**
+ * This component receives an array of images as a prop, and
+ * is responsible for displaying them as a grid.
+ */
+import { defineComponent, type PropType } from "vue"
+
+import type { ResultKind } from "~/types/result"
+import type { ImageDetail } from "~/types/media"
+
+import VImageCell from "~/components/VImageCell/VImageCell.vue"
+
+export default defineComponent({
+  name: "VImageCollection",
+  components: { VImageCell },
+  props: {
+    results: {
+      type: Array as PropType<ImageDetail[]>,
+      required: true,
+    },
+    kind: {
+      type: String as PropType<ResultKind>,
+      default: "search",
+    },
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+  },
+})
+</script>
+
+<style scoped>
+@screen md {
+  .image-grid:after {
+    /**
+   * This keeps the last item in the results from expanding to fill
+   * all available space, which can result in a final row with a
+   * single, 100% wide image.
+   */
+
+    content: "";
+    flex-grow: 999999999;
+  }
+}
+</style>
diff --git a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
new file mode 100644
index 00000000000..062e1639a03
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
@@ -0,0 +1,105 @@
+<template>
+  <section>
+    <slot name="header" />
+
+    <VGridSkeleton v-if="showSkeleton" :is-for-tab="results.type" />
+
+    <Component
+      :is="component"
+      v-if="!showSkeleton"
+      :results="results.items"
+      :kind="kind"
+      :search-term="searchTerm"
+      :related-to="relatedTo"
+      :collection-label="collectionLabel"
+      :class="{ 'pt-2 sm:pt-0': results.type === 'image' }"
+    />
+
+    <slot name="footer" v-bind="{ isFetching }" />
+
+    <VScrollButton
+      v-show="showScrollButton"
+      :is-filter-sidebar-visible="isSidebarVisible"
+      data-testid="scroll-button"
+    />
+  </section>
+</template>
+<script lang="ts">
+import { computed, defineComponent, inject, type PropType, ref } from "vue"
+
+import { IsSidebarVisibleKey, ShowScrollButtonKey } from "~/types/provides"
+import type { Results } from "~/types/result"
+
+import { defineEvent } from "~/types/emits"
+
+import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
+import VAllResultsGrid from "~/components/VSearchResultsGrid/VAllResultsGrid.vue"
+import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
+import VImageCollection from "~/components/VSearchResultsGrid/VImageCollection.vue"
+import VScrollButton from "~/components/VScrollButton.vue"
+
+export default defineComponent({
+  name: "VMediaCollection",
+  components: {
+    VScrollButton,
+    VAllResultsGrid,
+    VAudioCollection,
+    VImageCollection,
+    VGridSkeleton,
+  },
+  props: {
+    results: {
+      type: Object as PropType<Results>,
+      required: true,
+    },
+    searchTerm: {
+      type: String as PropType<string>,
+      required: true,
+    },
+    kind: {
+      type: String as PropType<"search" | "collection" | "related">,
+      required: true,
+    },
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: {
+    "load-more": defineEvent(),
+  },
+  setup(props) {
+    const showScrollButton = inject(ShowScrollButtonKey, ref(false))
+    const isSidebarVisible = inject(IsSidebarVisibleKey, ref(false))
+
+    const showSkeleton = computed(() => {
+      return props.isFetching && props.results.items.length === 0
+    })
+
+    const component = computed(() => {
+      if (props.results.type === "image") {
+        return "VImageCollection"
+      } else if (props.results.type === "audio") {
+        return "VAudioCollection"
+      } else {
+        return "VAllResultsGrid"
+      }
+    })
+
+    return {
+      showSkeleton,
+      showScrollButton,
+      isSidebarVisible,
+      component,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/pages/audio/_id/index.vue b/frontend/src/pages/audio/_id/index.vue
index e117a3f8a85..7722adb40be 100644
--- a/frontend/src/pages/audio/_id/index.vue
+++ b/frontend/src/pages/audio/_id/index.vue
@@ -28,8 +28,11 @@
               </div>
             </template>
           </VMediaDetails>
-          <VRelatedAudio
-            @interacted="sendAudioEvent($event, 'VRelatedAudio')"
+          <VRelatedMedia
+            v-if="audio"
+            media-type="audio"
+            :related-to="audio.id"
+            class="mb-12"
           />
         </div>
       </template>
@@ -60,7 +63,7 @@ import { useSingleResultPageMeta } from "~/composables/use-single-result-page-me
 
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
-import VRelatedAudio from "~/components/VAudioDetails/VRelatedAudio.vue"
+import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
 import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue"
 import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue"
 import VSingleResultControls from "~/components/VSingleResultControls.vue"
@@ -77,7 +80,7 @@ export default defineComponent({
     VMediaDetails,
     VAudioTrack,
     VMediaReuse,
-    VRelatedAudio,
+    VRelatedMedia,
   },
   layout: "content-layout",
   middleware: singleResultMiddleware,
@@ -89,7 +92,12 @@ export default defineComponent({
 
     const route = useRoute()
 
-    const audio = ref<AudioDetail | null>(singleResultStore.audio)
+    const audio = ref<AudioDetail | null>(
+      singleResultStore.audio?.id &&
+        singleResultStore.audio.id === route.value.params.id
+        ? singleResultStore.audio
+        : null
+    )
     const fetchingError = computed(
       () => singleResultStore.fetchState.fetchingError
     )
diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue
index 4b1d54872ed..540d1b11aad 100644
--- a/frontend/src/pages/image/_id/index.vue
+++ b/frontend/src/pages/image/_id/index.vue
@@ -97,12 +97,13 @@
           :image-height="imageHeight"
           :image-type="imageType"
         />
-        <VRelatedImages />
+
+        <VRelatedMedia v-if="image" media-type="image" :related-to="image.id" />
       </template>
     </template>
     <VBone
       v-else-if="showLoadingState"
-      class="col-span-full row-span-full h-[500px] w-[500px] self-center"
+      class="col-span-full row-span-full mx-auto h-[500px] w-[500px]"
     />
   </main>
 </template>
@@ -119,7 +120,7 @@ import {
   useRoute,
 } from "@nuxtjs/composition-api"
 
-import { IMAGE, isAdditionalSearchType } from "~/constants/media"
+import { IMAGE } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
 import type { ImageDetail } from "~/types/media"
 import { useAnalytics } from "~/composables/use-analytics"
@@ -134,14 +135,13 @@ import { singleResultMiddleware } from "~/middleware/single-result"
 import VBone from "~/components/VSkeleton/VBone.vue"
 import VLink from "~/components/VLink.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
-import VRelatedImages from "~/components/VImageDetails/VRelatedImages.vue"
+import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
 import VSketchFabViewer from "~/components/VSketchFabViewer.vue"
 import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue"
 import VSingleResultControls from "~/components/VSingleResultControls.vue"
 import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
-
 import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
 
 import errorImage from "~/assets/image_not_available_placeholder.png"
@@ -158,7 +158,7 @@ export default defineComponent({
     VBone,
     VLink,
     VMediaReuse,
-    VRelatedImages,
+    VRelatedMedia,
     VSketchFabViewer,
   },
   layout: "content-layout",
@@ -168,7 +168,12 @@ export default defineComponent({
 
     const route = useRoute()
 
-    const image = ref<ImageDetail | null>(singleResultStore.image)
+    const image = ref<ImageDetail | null>(
+      singleResultStore.image?.id &&
+        singleResultStore.image.id === route.value.params.id
+        ? singleResultStore.image
+        : null
+    )
     const fetchingError = computed(
       () => singleResultStore.fetchState.fetchingError
     )
@@ -341,7 +346,6 @@ export default defineComponent({
   },
   // Necessary for useMeta
   head: {},
-  methods: { isAdditionalSearchType },
   // Fetching on the server is disabled because it is
   // handled by the `singleResultMiddleware`.
   fetchOnServer: false,
@@ -349,8 +353,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-section,
-aside {
+section {
   @apply mb-10 w-full px-6 md:mb-16 md:max-w-screen-lg md:px-12 lg:mx-auto lg:px-16;
 }
 </style>
diff --git a/frontend/src/pages/search/audio.vue b/frontend/src/pages/search/audio.vue
index c76494639c1..e35bc8defbb 100644
--- a/frontend/src/pages/search/audio.vue
+++ b/frontend/src/pages/search/audio.vue
@@ -1,5 +1,5 @@
 <template>
-  <VAudioCollection
+  <VAudioList
     :results="results"
     kind="search"
     :fetch-state="fetchState"
@@ -15,12 +15,12 @@ import { useI18n } from "~/composables/use-i18n"
 import type { AudioDetail } from "~/types/media"
 import type { FetchState } from "~/types/fetch-state"
 
-import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
+import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
 
 export default defineComponent({
   name: "AudioSearch",
   components: {
-    VAudioCollection,
+    VAudioList,
   },
   props: {
     results: {
diff --git a/frontend/src/types/result.ts b/frontend/src/types/result.ts
index 994521957a6..a209feabc21 100644
--- a/frontend/src/types/result.ts
+++ b/frontend/src/types/result.ts
@@ -1,13 +1,17 @@
-import { AUDIO, IMAGE } from "~/constants/media"
+import { ALL_MEDIA, AUDIO, IMAGE } from "~/constants/media"
 import { AudioDetail, ImageDetail } from "~/types/media"
 
 export type ResultKind = "search" | "related" | "collection"
-export type Results =
-  | {
-      type: typeof AUDIO
-      items: AudioDetail[]
-    }
-  | {
-      type: typeof IMAGE
-      items: ImageDetail[]
-    }
+export type ImageResults = {
+  type: typeof IMAGE
+  items: ImageDetail[]
+}
+export type AudioResults = {
+  type: typeof AUDIO
+  items: AudioDetail[]
+}
+export type AllMediaResults = {
+  type: typeof ALL_MEDIA
+  items: (AudioDetail | ImageDetail)[]
+}
+export type Results = AudioResults | ImageResults | AllMediaResults
diff --git a/frontend/test/playwright/e2e/audio-detail.spec.ts b/frontend/test/playwright/e2e/audio-detail.spec.ts
index 5ce02893ece..399229ebd2e 100644
--- a/frontend/test/playwright/e2e/audio-detail.spec.ts
+++ b/frontend/test/playwright/e2e/audio-detail.spec.ts
@@ -5,6 +5,7 @@ import {
   expectEventPayloadToMatch,
 } from "~~/test/playwright/utils/analytics"
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
+import { t } from "~~/test/playwright/utils/i18n"
 import { getH1 } from "~~/test/playwright/utils/components"
 
 const audioObject = {
@@ -101,3 +102,38 @@ test("shows the 404 error page when no id", async ({ page }) => {
   await page.goto("audio/")
   await expect(errorPageHeading(page)).toBeVisible()
 })
+
+test("sends SELECT_SEARCH_RESULT event on related audio click", async ({
+  context,
+  page,
+}) => {
+  const analyticsEvents = collectAnalyticsEvents(context)
+
+  await goToCustomAudioPage(page)
+
+  // Clicking on the link seeks the audio, that's why we click on the heading
+  const firstRelatedAudio = page
+    .getByRole("region", { name: t("audioDetails.relatedAudios") })
+    .locator("a")
+    .first()
+    .getByRole("heading", { level: 2 })
+
+  await firstRelatedAudio.click()
+
+  await page.waitForURL(/audio\/0b94484c-d7d1-43f2-8710-69399b6a0310/)
+
+  const selectSearchResultEvent = analyticsEvents.find(
+    (event) => event.n === "SELECT_SEARCH_RESULT"
+  )
+
+  expectEventPayloadToMatch(selectSearchResultEvent, {
+    id: "0b94484c-d7d1-43f2-8710-69399b6a0310",
+    relatedTo: audioObject.id,
+    kind: "related",
+    mediaType: "audio",
+    provider: "wikimedia_audio",
+    query: "",
+    sensitivities: "",
+    isBlurred: false,
+  })
+})
diff --git a/frontend/test/playwright/e2e/image-detail.spec.ts b/frontend/test/playwright/e2e/image-detail.spec.ts
index 13b26dc4d75..73ff8922b41 100644
--- a/frontend/test/playwright/e2e/image-detail.spec.ts
+++ b/frontend/test/playwright/e2e/image-detail.spec.ts
@@ -5,6 +5,7 @@ import {
   preparePageForTests,
   scrollDownAndUp,
 } from "~~/test/playwright/utils/navigation"
+import { t } from "~~/test/playwright/utils/i18n"
 import {
   collectAnalyticsEvents,
   expectEventPayloadToMatch,
@@ -106,3 +107,34 @@ test("sends RIGHT_CLICK_IMAGE event on right-click", async ({
     id: imageObject.id,
   })
 })
+
+test("sends SELECT_SEARCH_RESULT event on related image click", async ({
+  context,
+  page,
+}) => {
+  const analyticsEvents = collectAnalyticsEvents(context)
+
+  await goToCustomImagePage(page)
+
+  await page
+    .getByRole("region", { name: t("imageDetails.relatedImages") })
+    .locator("img")
+    .first()
+    .click()
+  await page.waitForURL(/image\/1c57f839-6be5-449a-b41a-b1c7de819182/)
+
+  const selectSearchResultEvent = analyticsEvents.find(
+    (event) => event.n === "SELECT_SEARCH_RESULT"
+  )
+
+  expectEventPayloadToMatch(selectSearchResultEvent, {
+    id: "1c57f839-6be5-449a-b41a-b1c7de819182",
+    relatedTo: imageObject.id,
+    kind: "related",
+    mediaType: "image",
+    provider: "flickr",
+    query: "",
+    sensitivities: "",
+    isBlurred: false,
+  })
+})
diff --git a/frontend/test/tapes/related/audio/1cb1af19-7232-40c2-b9ea-8d6c47e677f9_keep-alive.json5 b/frontend/test/tapes/related/audio/1cb1af19-7232-40c2-b9ea-8d6c47e677f9_keep-alive.json5
new file mode 100644
index 00000000000..8b3b97512f1
--- /dev/null
+++ b/frontend/test/tapes/related/audio/1cb1af19-7232-40c2-b9ea-8d6c47e677f9_keep-alive.json5
@@ -0,0 +1,428 @@
+{
+    meta: {
+        createdAt: '2024-03-01T17:57:55.217Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+        resUncompressed: true,
+    },
+    req: {
+        headers: {
+            connection: 'keep-alive',
+        },
+        url: '/v1/audio/1cb1af19-7232-40c2-b9ea-8d6c47e677f9/related/?peaks=true',
+        method: 'GET',
+        body: '',
+    },
+    res: {
+        status: 200,
+        headers: {
+            date: [
+                'Fri, 01 Mar 2024 17:57:56 GMT',
+            ],
+            'content-type': [
+                'application/json',
+            ],
+            'transfer-encoding': [
+                'chunked',
+            ],
+            connection: [
+                'keep-alive',
+            ],
+            vary: [
+                'Accept-Encoding, Accept, Authorization, origin',
+            ],
+            allow: [
+                'GET, HEAD, OPTIONS',
+            ],
+            'x-ratelimit-limit-anon_burst': [
+                '20/min',
+            ],
+            'x-ratelimit-available-anon_burst': [
+                '19',
+            ],
+            'x-ratelimit-limit-anon_sustained': [
+                '200/day',
+            ],
+            'x-ratelimit-available-anon_sustained': [
+                '199',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'x-request-id': [
+                'd1652212f7124e64b6267a22d509c087',
+            ],
+            'cache-control': [
+                'max-age=14400',
+            ],
+            'cf-cache-status': [
+                'MISS',
+            ],
+            'last-modified': [
+                'Fri, 01 Mar 2024 17:57:56 GMT',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '85db083f2a349295-FRA',
+            ],
+            'content-encoding': [
+                'br',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400',
+            ],
+        },
+        body: {
+            result_count: 10,
+            page_count: 1,
+            page_size: 10,
+            page: 1,
+            results: [
+                {
+                    id: '0b94484c-d7d1-43f2-8710-69399b6a0310',
+                    title: 'En-us-honey plant',
+                    indexed_on: '2023-04-23T10:50:59.108716Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=71324819',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/c/cc/En-us-honey_plant.flac',
+                    creator: 'Baymiwuk',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Baymiwuk',
+                    license: 'by-sa',
+                    license_version: '4.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 109019,
+                    filetype: 'flac',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-honey plant" by Baymiwuk is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 2925,
+                    bit_rate: 298098,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/0b94484c-d7d1-43f2-8710-69399b6a0310/',
+                    related_url: 'http://localhost:49153/v1/audio/0b94484c-d7d1-43f2-8710-69399b6a0310/related/',
+                    waveform: 'http://localhost:49153/v1/audio/0b94484c-d7d1-43f2-8710-69399b6a0310/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '2bf0802e-5b4c-4ca2-91db-fce302edee7d',
+                    title: 'En-us-hangover',
+                    indexed_on: '2023-04-02T11:28:46.091884Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=1785152',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/En-us-hangover.ogg',
+                    creator: 'Dvortygirl',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Dvortygirl',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 13547,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-hangover" by Dvortygirl is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1100,
+                    bit_rate: 80000,
+                    sample_rate: 44000,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/2bf0802e-5b4c-4ca2-91db-fce302edee7d/',
+                    related_url: 'http://localhost:49153/v1/audio/2bf0802e-5b4c-4ca2-91db-fce302edee7d/related/',
+                    waveform: 'http://localhost:49153/v1/audio/2bf0802e-5b4c-4ca2-91db-fce302edee7d/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '1a83bd4c-621e-4bf1-aebf-f9ee61bed581',
+                    title: 'En-us-lemongrass',
+                    indexed_on: '2023-04-02T11:28:46.091884Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=1785176',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/e/e7/En-us-lemongrass.ogg',
+                    creator: 'Dvortygirl',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Dvortygirl',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 16104,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-lemongrass" by Dvortygirl is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1350,
+                    bit_rate: 80000,
+                    sample_rate: 44000,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/1a83bd4c-621e-4bf1-aebf-f9ee61bed581/',
+                    related_url: 'http://localhost:49153/v1/audio/1a83bd4c-621e-4bf1-aebf-f9ee61bed581/related/',
+                    waveform: 'http://localhost:49153/v1/audio/1a83bd4c-621e-4bf1-aebf-f9ee61bed581/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: 'b173728b-ce64-42da-9aa3-c33ac28b00fe',
+                    title: 'En-us-incur',
+                    indexed_on: '2023-02-26T18:38:57.050261Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=4478589',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/1/15/En-us-incur.ogg',
+                    creator: 'EncycloPetey',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:EncycloPetey',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 15919,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-incur" by EncycloPetey is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1393,
+                    bit_rate: 96000,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/b173728b-ce64-42da-9aa3-c33ac28b00fe/',
+                    related_url: 'http://localhost:49153/v1/audio/b173728b-ce64-42da-9aa3-c33ac28b00fe/related/',
+                    waveform: 'http://localhost:49153/v1/audio/b173728b-ce64-42da-9aa3-c33ac28b00fe/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '32c8237b-be69-4400-bbe1-48a76a36c09c',
+                    title: 'En-us-phagocytosis',
+                    indexed_on: '2023-07-13T00:09:33.097368Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=134331612',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/3/36/En-us-phagocytosis.ogg',
+                    creator: 'K schadd',
+                    creator_url: 'https://commons.wikimedia.org/w/index.php?title=User:K_schadd&action=edit&redlink=1',
+                    license: 'by-sa',
+                    license_version: '4.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 48512,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-phagocytosis" by K schadd is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1555,
+                    bit_rate: 256000,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/32c8237b-be69-4400-bbe1-48a76a36c09c/',
+                    related_url: 'http://localhost:49153/v1/audio/32c8237b-be69-4400-bbe1-48a76a36c09c/related/',
+                    waveform: 'http://localhost:49153/v1/audio/32c8237b-be69-4400-bbe1-48a76a36c09c/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '9f0a8b59-b3f4-4246-a104-eb2f0149297b',
+                    title: 'En-US Pulliam',
+                    indexed_on: '2023-10-08T00:16:08.443366Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=138588941',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/6/63/En-US_Pulliam.ogg',
+                    creator: 'JutishMale',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:JutishMale',
+                    license: 'by-sa',
+                    license_version: '4.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: null,
+                    genres: null,
+                    filesize: 17780,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-US Pulliam" by JutishMale is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1739,
+                    bit_rate: 80000,
+                    sample_rate: 48000,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/9f0a8b59-b3f4-4246-a104-eb2f0149297b/',
+                    related_url: 'http://localhost:49153/v1/audio/9f0a8b59-b3f4-4246-a104-eb2f0149297b/related/',
+                    waveform: 'http://localhost:49153/v1/audio/9f0a8b59-b3f4-4246-a104-eb2f0149297b/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '9655c45e-1fde-45e4-a901-451bce9793e1',
+                    title: 'En-us-faith',
+                    indexed_on: '2023-11-12T22:12:01.665345Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=399134',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/3/3d/En-us-faith.ogg',
+                    creator: 'Dvortygirl',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Dvortygirl',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 13295,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-faith" by Dvortygirl is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 859,
+                    bit_rate: 96001,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/9655c45e-1fde-45e4-a901-451bce9793e1/',
+                    related_url: 'http://localhost:49153/v1/audio/9655c45e-1fde-45e4-a901-451bce9793e1/related/',
+                    waveform: 'http://localhost:49153/v1/audio/9655c45e-1fde-45e4-a901-451bce9793e1/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: 'e0455496-7d3f-4df8-a383-39bf3dba6b6e',
+                    title: 'En-us-backlash',
+                    indexed_on: '2023-01-01T17:19:01.506240Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=194518',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/8/88/En-us-backlash.ogg',
+                    creator: 'Dvortygirl',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Dvortygirl',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 12029,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-backlash" by Dvortygirl is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 661,
+                    bit_rate: 96001,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/e0455496-7d3f-4df8-a383-39bf3dba6b6e/',
+                    related_url: 'http://localhost:49153/v1/audio/e0455496-7d3f-4df8-a383-39bf3dba6b6e/related/',
+                    waveform: 'http://localhost:49153/v1/audio/e0455496-7d3f-4df8-a383-39bf3dba6b6e/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: 'a2b0f9a4-09a6-4036-9748-abf656375121',
+                    title: 'En-us-asked',
+                    indexed_on: '2023-04-16T12:13:03.247420Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=1225610',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/8/87/En-us-asked.ogg',
+                    creator: 'Dvortygirl',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:Dvortygirl',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 12351,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-asked" by Dvortygirl is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 754,
+                    bit_rate: 96001,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/a2b0f9a4-09a6-4036-9748-abf656375121/',
+                    related_url: 'http://localhost:49153/v1/audio/a2b0f9a4-09a6-4036-9748-abf656375121/related/',
+                    waveform: 'http://localhost:49153/v1/audio/a2b0f9a4-09a6-4036-9748-abf656375121/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+                {
+                    id: '18afe312-fefc-4c8a-92b5-64973e91cf52',
+                    title: 'En-us-Iran',
+                    indexed_on: '2023-07-02T13:36:45.166361Z',
+                    foreign_landing_url: 'https://commons.wikimedia.org/w/index.php?curid=12140601',
+                    url: 'https://upload.wikimedia.org/wikipedia/commons/e/e3/En-us-Iran.ogg',
+                    creator: 'EncycloPetey',
+                    creator_url: 'https://commons.wikimedia.org/wiki/User:EncycloPetey',
+                    license: 'by-sa',
+                    license_version: '3.0',
+                    license_url: 'https://creativecommons.org/licenses/by-sa/3.0/',
+                    provider: 'wikimedia_audio',
+                    source: 'wikimedia_audio',
+                    category: 'pronunciation',
+                    genres: null,
+                    filesize: 15149,
+                    filetype: 'ogg',
+                    tags: [],
+                    alt_files: null,
+                    attribution: '"En-us-Iran" by EncycloPetey is licensed under CC BY-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/3.0/.',
+                    fields_matched: [],
+                    mature: false,
+                    audio_set: null,
+                    duration: 1346,
+                    bit_rate: 96000,
+                    sample_rate: 44100,
+                    thumbnail: null,
+                    detail_url: 'http://localhost:49153/v1/audio/18afe312-fefc-4c8a-92b5-64973e91cf52/',
+                    related_url: 'http://localhost:49153/v1/audio/18afe312-fefc-4c8a-92b5-64973e91cf52/related/',
+                    waveform: 'http://localhost:49153/v1/audio/18afe312-fefc-4c8a-92b5-64973e91cf52/waveform/',
+                    peaks: [],
+                    unstable__sensitivity: [],
+                },
+            ],
+        },
+    },
+}
\ No newline at end of file