diff --git a/frontend/src/assets/svg/raw/chevron-left.svg b/frontend/src/assets/svg/raw/chevron-back.svg
similarity index 68%
rename from frontend/src/assets/svg/raw/chevron-left.svg
rename to frontend/src/assets/svg/raw/chevron-back.svg
index 7d291824150..2d9024ab5f6 100644
--- a/frontend/src/assets/svg/raw/chevron-left.svg
+++ b/frontend/src/assets/svg/raw/chevron-back.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g id="icon">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M13.445 18.0045L7.98638 12L13.445 5.99553L14.5549 7.00454L10.0136 12L14.5549 16.9955L13.445 18.0045Z" fill="currentColor"/>
   </g>
diff --git a/frontend/src/assets/svg/raw/chevron-forward.svg b/frontend/src/assets/svg/raw/chevron-forward.svg
new file mode 100644
index 00000000000..73864aba774
--- /dev/null
+++ b/frontend/src/assets/svg/raw/chevron-forward.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5549 5.99554L16.0135 12L10.5549 18.0045L9.44495 16.9955L13.9863 12L9.44495 7.00456L10.5549 5.99554Z" fill="currentColor"/>
+</svg>
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
index d1b2036d3d1..d4acb9bf299 100644
--- a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -16,6 +16,23 @@
       </div>
     </div>
     <div
+      v-if="additionalSearchViews"
+      class="mx-auto grid grid-cols-1 grid-rows-[auto,1fr] gap-y-6 p-6 pb-0 sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6 lg:mb-6 lg:max-w-5xl"
+    >
+      <div
+        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2 sm:mt-1"
+      >
+        <slot name="audio-control" layout="full" size="medium" />
+        <VGetMediaButton
+          :media="audio"
+          media-type="audio"
+          class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
+        />
+      </div>
+      <VMediaInfo :media="audio" class="min-w-0" />
+    </div>
+    <div
+      v-else
       class="mx-auto grid grid-cols-1 grid-rows-[auto,auto] gap-6 p-6 pb-0 lg:mb-6 lg:max-w-5xl lg:flex-nowrap"
     >
       <div class="row-start-1 flex justify-between gap-x-6 sm:col-start-2">
@@ -56,14 +73,18 @@ import { computed, defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 import { timeFmt } from "~/utils/time-fmt"
-import { AudioSize, AudioStatus, audioFeatures } from "~/constants/audio"
+import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useProviderStore } from "~/stores/provider"
 
 import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
+import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
 
 export default defineComponent({
   name: "VFullLayout",
-  components: { VGetMediaButton, VLink },
+  components: { VMediaInfo, VGetMediaButton, VLink },
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
@@ -83,11 +104,27 @@ export default defineComponent({
   setup(props) {
     const isSmall = computed(() => props.size === "s")
 
+    const featureFlagStore = useFeatureFlagStore()
+    const additionalSearchViews = computed(() =>
+      featureFlagStore.isOn("additional_search_views")
+    )
+
+    const providerStore = useProviderStore()
+    const sourceName = computed(() => {
+      return providerStore.getProviderName(
+        props.audio.source ?? props.audio.provider,
+        "audio"
+      )
+    })
+
     return {
       timeFmt,
 
       isSmall,
       audioFeatures,
+      sourceName,
+
+      additionalSearchViews,
     }
   },
 })
diff --git a/frontend/src/components/VBackToSearchResultsLink.vue b/frontend/src/components/VBackToSearchResultsLink.vue
index 691d7d805a7..45286809c80 100644
--- a/frontend/src/components/VBackToSearchResultsLink.vue
+++ b/frontend/src/components/VBackToSearchResultsLink.vue
@@ -10,7 +10,7 @@
     v-bind="$attrs"
     @mousedown="handleClick"
   >
-    <VIcon name="chevron-left" :rtl-flip="true" />
+    <VIcon name="chevron-back" :rtl-flip="true" />
     {{ $t("singleResult.back") }}
   </VButton>
 </template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index bcdcfa2e489..06bade0a8c4 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -29,7 +29,7 @@
             />
             <VSearchBarButton
               v-show="searchBarIsActive"
-              icon="chevron-left"
+              icon="chevron-back"
               :label="$t('header.backButton')"
               :rtl-flip="true"
               variant="filled-gray"
diff --git a/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx b/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx
index 10598f46c6e..809681a7de4 100644
--- a/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx
+++ b/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx
@@ -17,7 +17,7 @@ import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButto
         type: "select",
         default: "close-small",
       },
-      options: ["close-small", "chevron-left", "source"],
+      options: ["close-small", "chevron-back", "source"],
     },
     rtlFlip: {
       control: {
@@ -100,7 +100,7 @@ corner.
 export const activeButtonsTemplate = (args) => ({
   template: `<div class="wrapper rounded-sm bg-white flex justify-between ring ring-pink">
   <VSearchBarButton
-    icon="chevron-left"
+    icon="chevron-back"
     :label="$t('header.back-button')"
     variant="filled-gray"
     :rtl-flip="true"
diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
new file mode 100644
index 00000000000..30de95ec581
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -0,0 +1,314 @@
+<template>
+  <div
+    ref="containerRef"
+    class="relative -my-1.5px flex max-w-full sm:-ms-1"
+    :class="{ 'pointer-events-none': !isInteractive }"
+  >
+    <div
+      class="max-w-full"
+      :class="{
+        'faded-overflow-s': showScrollButton.start,
+        'faded-overflow-e': showScrollButton.end,
+      }"
+    >
+      <div
+        ref="buttonsRef"
+        class="buttons flex justify-start gap-x-3 overflow-x-scroll p-1.5px sm:gap-x-1"
+        :class="{
+          'ms-11': showScrollButton.start,
+          'me-11': showScrollButton.end,
+        }"
+      >
+        <VSourceCreatorButton
+          v-if="showCreator && creatorHref && creator"
+          :href="creatorHref"
+          icon-name="person"
+          :title="creator"
+        />
+        <VSourceCreatorButton
+          :href="sourceHref"
+          icon-name="institution"
+          :title="sourceName"
+        />
+      </div>
+    </div>
+    <VScroller
+      v-show="showScrollButton.start"
+      class="start-0"
+      direction="back"
+      @click="scroll('start')"
+    />
+    <VScroller
+      v-show="showScrollButton.end"
+      class="end-0"
+      direction="forward"
+      @click="scroll('end')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+} from "vue"
+import { useElementSize, useScroll, watchDebounced } from "@vueuse/core"
+
+import { useI18n } from "~/composables/use-i18n"
+import type { SupportedMediaType } from "~/constants/media"
+
+import VSourceCreatorButton from "~/components/VMediaInfo/VByLine/VSourceCreatorButton.vue"
+import VScroller from "~/components/VMediaInfo/VByLine/VScroller.vue"
+
+/**
+ * A link to a collection page, either a source or a creator.
+ */
+export default defineComponent({
+  name: "VByLine",
+  components: {
+    VScroller,
+    VSourceCreatorButton,
+  },
+  props: {
+    creator: {
+      type: String,
+    },
+    sourceName: {
+      type: String,
+      required: true,
+    },
+    sourceSlug: {
+      type: String,
+      required: true,
+    },
+    mediaType: {
+      type: String as PropType<SupportedMediaType>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const buttonsRef = ref<HTMLElement | null>(null)
+
+    const showCreator = computed(() => {
+      return props.creator && props.creator.toLowerCase() !== "unidentified"
+    })
+
+    const i18n = useI18n()
+    const dir = computed(() => i18n.localeProperties.dir ?? "ltr")
+
+    const scrollStep = 150 // px to scroll on each click
+    const scrollMargin = 44 // px, button + margin
+    const shouldScroll = ref(false)
+
+    const { x } = useScroll(buttonsRef)
+    const { width: containerWidth } = useElementSize(containerRef)
+
+    const showScrollButton = reactive({
+      start: false,
+      end: false,
+    })
+    const setScrollable = () => {
+      shouldScroll.value = true
+      showScrollButton.start = false
+      showScrollButton.end = true
+    }
+
+    const hideScrollButton = (side: "start" | "end") => {
+      showScrollButton[side] = false
+      isInteractive.value = false
+      setTimeout(() => {
+        isInteractive.value = true
+      }, 500)
+    }
+    const isInteractive = ref(true)
+
+    watchDebounced(
+      containerWidth,
+      (cWidth) => {
+        const buttonsScrollWidth = buttonsRef.value?.scrollWidth ?? 0
+        const hasOverflow = buttonsScrollWidth >= cWidth
+        if (hasOverflow && !shouldScroll.value) {
+          setScrollable()
+        } else if (!hasOverflow && shouldScroll.value) {
+          shouldScroll.value = false
+          showScrollButton.start = false
+          showScrollButton.end = false
+        }
+      },
+      { debounce: 500 }
+    )
+
+    onMounted(() => {
+      if (!buttonsRef.value || !containerRef.value) return
+      if (buttonsRef.value?.scrollWidth > containerRef.value.scrollWidth) {
+        setScrollable()
+      }
+    })
+
+    const getScrollEnd = (el: HTMLElement, dir: "ltr" | "rtl" | "auto") => {
+      return (
+        el.scrollWidth -
+        el.clientWidth -
+        (dir === "rtl" ? -el.scrollLeft : el.scrollLeft)
+      )
+    }
+    const getScrollStart = (el: HTMLElement) => {
+      return Math.abs(el.scrollLeft)
+    }
+
+    const getDistToSide = (
+      to: "start" | "end",
+      dir: "ltr" | "rtl" | "auto",
+      el: HTMLElement
+    ) => {
+      return to === "start" ? getScrollStart(el) : getScrollEnd(el, dir)
+    }
+
+    const scroll = (to: "start" | "end") => {
+      if (!buttonsRef.value) return
+      const buttons = buttonsRef.value
+
+      showScrollButton[to === "start" ? "end" : "start"] = true
+
+      let distToSide = getDistToSide(to, dir.value, buttons)
+      let adjustedScrollStep = scrollStep
+
+      // If the scroll step is larger than the distance to the side, scroll
+      // to the side and hide the scroll button.
+      // If the distance to the side is less than twice the scroll step, scroll
+      // half the distance to the side to prevent a very small scroll at the end.
+      const isLastScroll = distToSide - scrollMargin <= scrollStep
+      if (isLastScroll) {
+        hideScrollButton(to)
+        adjustedScrollStep = to === "start" ? distToSide : buttons.scrollWidth
+      } else if (distToSide < scrollStep * 2) {
+        adjustedScrollStep = distToSide / 2
+      }
+      if (dir.value === "rtl") {
+        adjustedScrollStep = -adjustedScrollStep
+      }
+
+      let left = to === "start" ? -adjustedScrollStep : adjustedScrollStep
+      buttons.scrollBy({ left, behavior: "smooth" })
+    }
+
+    watchDebounced(
+      x,
+      (xValue) => {
+        if (!buttonsRef.value) return
+        // This is necessary for handling both RTL and LTR.
+        const distFromStart = Math.abs(xValue)
+        const distFromEnd =
+          buttonsRef.value.scrollWidth -
+          distFromStart -
+          buttonsRef.value.clientWidth
+        showScrollButton.start = distFromStart >= scrollMargin
+        showScrollButton.end = distFromEnd >= scrollMargin
+      },
+      { debounce: 100 }
+    )
+
+    // TODO: implement this function in the search store.
+    const getCollectionPath = ({
+      type,
+      source,
+      creator,
+    }: {
+      type: SupportedMediaType
+      source: string
+      creator?: string
+    }) => {
+      let path = `/${type}/source/${source}/`
+      if (creator) path += `creator/${encodeURIComponent(creator)}/`
+      return path
+    }
+    const creatorHref = computed(() => {
+      return showCreator.value
+        ? getCollectionPath({
+            type: props.mediaType,
+            source: props.sourceSlug,
+            creator: props.creator,
+          })
+        : undefined
+    })
+    const sourceHref = computed(() => {
+      return getCollectionPath({
+        type: props.mediaType,
+        source: props.sourceSlug,
+      })
+    })
+
+    return {
+      containerRef,
+      buttonsRef,
+
+      showCreator,
+      shouldScroll,
+      showScrollButton,
+
+      creatorHref,
+      sourceHref,
+
+      scroll,
+      isInteractive,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.buttons::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+.buttons {
+  scrollbar-width: none;
+}
+
+.faded-overflow-e:dir(ltr),
+.faded-overflow-s:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    transparent 44px,
+    #000 98px,
+    #000 100%
+  );
+}
+.faded-overflow-e:dir(rtl),
+.faded-overflow-s:dir(ltr) {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    transparent 44px,
+    #000 98px,
+    #000 100%
+  );
+}
+
+.faded-overflow-e.faded-overflow-s {
+  mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      transparent 44px,
+      #000 98px,
+      #000 50%,
+      transparent 50%,
+      transparent 100%
+    ),
+    linear-gradient(
+      to left,
+      transparent 0,
+      transparent 44px,
+      #000 98px,
+      #000 50%,
+      transparent 50%,
+      transparent 100%
+    );
+}
+</style>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
new file mode 100644
index 00000000000..02d5c6b34ba
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="absolute z-10 h-8 w-8 flex-none">
+    <VIconButton
+      :icon-props="{ name: iconName, rtlFlip: true }"
+      :label="label"
+      variant="transparent-gray"
+      size="small"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import { defineEvent } from "~/types/emits"
+import { useI18n } from "~/composables/use-i18n"
+
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+export default defineComponent({
+  name: "VScroller",
+  components: { VIconButton },
+  props: {
+    direction: {
+      type: String as PropType<"forward" | "back">,
+      required: true,
+    },
+  },
+  emits: {
+    click: defineEvent(),
+  },
+  setup(props) {
+    const i18n = useI18n()
+    const iconName = computed(() =>
+      props.direction === "forward" ? "chevron-forward" : "chevron-back"
+    )
+    const label = computed(() =>
+      i18n.t(
+        props.direction === "forward"
+          ? "mediaDetails.scroll.forward"
+          : "mediaDetails.scroll.back"
+      )
+    )
+
+    return {
+      iconName,
+      label,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
new file mode 100644
index 00000000000..723cde5f08f
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <VButton
+    as="VLink"
+    size="small"
+    has-icon-start
+    class="label-bold !bg-dark-charcoal-10 hover:!bg-dark-charcoal hover:text-white sm:!bg-tx"
+    variant="transparent-gray"
+    :href="href"
+  >
+    <VIcon :name="iconName" />
+    <span class="w-max">{{ title }}</span>
+  </VButton>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+
+export default defineComponent({
+  name: "VSourceCreatorButton",
+  components: { VButton, VIcon },
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+    iconName: {
+      type: String as PropType<"person" | "institution">,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+})
+</script>
diff --git a/frontend/src/components/VMediaInfo/VByLine/meta/VByLine.stories.mdx b/frontend/src/components/VMediaInfo/VByLine/meta/VByLine.stories.mdx
new file mode 100644
index 00000000000..58ffa5f7613
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VByLine/meta/VByLine.stories.mdx
@@ -0,0 +1,78 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
+import { supportedMediaTypes } from "~/constants/media"
+import { useProviderStore } from "~/stores/provider"
+
+import VByLine from "~/components/VMediaInfo/VByLine/VByLine.vue"
+
+export const Template = (args) => ({
+  template: `<div class="wrapper w-full inline-flex p-4"><VByLine v-bind="args" /></div>`,
+  components: { VByLine },
+  setup() {
+    const providerStore = useProviderStore()
+    providerStore.getProviders().then(/** */)
+    return { args }
+  },
+})
+
+<Meta
+  title="Components/VByLine"
+  component={VByLine}
+  argTypes={{
+    mediaType: {
+      control: "select",
+      options: supportedMediaTypes,
+    },
+    creator: {
+      control: "text",
+    },
+    sourceName: {
+      control: "text",
+    },
+    sourceSlug: {
+      control: "text",
+    },
+  }}
+/>
+
+# VByLine
+
+<Description of={VByLine} />
+
+<ArgsTable of={VByLine} />
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      mediaType: "image",
+      creator: "kellascat",
+      sourceSlug: "met",
+      sourceName: "Metropolitan Museum",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Long titles use scrolling
+
+<Canvas>
+  <Story
+    name="long"
+    args={{
+      mediaType: "image",
+      creator: "Roland Folger Coffin, American, 1826–1888",
+      sourceSlug: "smithsonian_cooper_hewitt_museum",
+      sourceName:
+        "Smithsonian Institution: Cooper Hewitt, Smithsonian Design Museum",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/frontend/src/components/VMediaInfo/VMediaInfo.vue b/frontend/src/components/VMediaInfo/VMediaInfo.vue
new file mode 100644
index 00000000000..3d7eec74a02
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VMediaInfo.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="w-full lg:w-auto">
+    <h1 class="heading-6 mb-3 sm:mb-1">{{ media.title }}</h1>
+    <VByLine
+      :media-type="media.frontendMediaType"
+      :source-slug="source"
+      :source-name="sourceName"
+      :creator="media.creator"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from "vue"
+
+import { Media } from "~/types/media"
+import { useProviderStore } from "~/stores/provider"
+
+import VByLine from "~/components/VMediaInfo/VByLine/VByLine.vue"
+
+import type { PropType } from "vue"
+
+export default defineComponent({
+  name: "VMediaInfo",
+  components: { VByLine },
+  props: {
+    media: {
+      type: Object as PropType<Media>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const source = computed(() => {
+      return props.media.source ?? props.media.provider
+    })
+
+    const providerStore = useProviderStore()
+    const sourceName = computed(() => {
+      return providerStore.getProviderName(
+        source.value,
+        props.media.frontendMediaType
+      )
+    })
+    return { source, sourceName }
+  },
+})
+</script>
diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index 1472951d1b1..def4e95e3c5 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,9 +1,9 @@
 <template>
-  <ul v-if="tags.length && additionalSearchViews" class="flex flex-wrap gap-2">
+  <ul v-if="tags.length && additionalSearchViews" class="flex flex-wrap gap-3">
     <VTag
       v-for="(tag, index) in tags"
       :key="index"
-      href="/"
+      :href="localizedTagPath(tag)"
       :title="tag.name"
     />
   </ul>
@@ -15,12 +15,12 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
+import { useContext } from "@nuxtjs/composition-api"
 
 import type { Tag } from "~/types/media"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import VMediaTag from "~/components/VMediaTag/VMediaTag.vue"
-
 import VTag from "~/components/VTag/VTag.vue"
 
 export default defineComponent({
@@ -33,13 +33,18 @@ export default defineComponent({
     },
   },
   setup() {
+    const { app } = useContext()
     const featureFlagStore = useFeatureFlagStore()
 
     const additionalSearchViews = computed(() =>
       featureFlagStore.isOn("additional_search_views")
     )
 
-    return { additionalSearchViews }
+    const localizedTagPath = (tag: Tag) => {
+      return app.localePath({ path: `tag/${tag.name}` })
+    }
+
+    return { additionalSearchViews, localizedTagPath }
   },
 })
 </script>
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index c1c2ef6e18c..deaf2a6b816 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -503,6 +503,10 @@
       unknown: "Unknown",
       category: "Category",
     },
+    scroll: {
+      forward: "Scroll forward",
+      back: "Scroll backward",
+    },
     reuse: {
       title: "How to use",
       description: "Visit the {media}'s website to download and use it. Make sure to credit the creator by showing the attribution information where you are sharing your work.",
diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue
index a37ee200824..06efb567355 100644
--- a/frontend/src/pages/image/_id/index.vue
+++ b/frontend/src/pages/image/_id/index.vue
@@ -42,6 +42,18 @@
         </figure>
 
         <section
+          v-if="isAdditionalSearchView"
+          class="grid grid-cols-1 grid-rows-[auto,1fr] sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6"
+        >
+          <VMediaInfo :media="image" class="min-w-0 sm:col-start-1" />
+          <VGetMediaButton
+            :media="image"
+            media-type="image"
+            class="row-start-1 mb-4 !w-full flex-initial sm:col-start-2 sm:mb-0 sm:mt-1 sm:!w-auto"
+          />
+        </section>
+        <section
+          v-else
           id="title-button"
           class="flex flex-row flex-wrap justify-between gap-x-6 md:mt-6 md:flex-row-reverse"
         >
@@ -103,7 +115,7 @@ import {
   useRoute,
 } from "@nuxtjs/composition-api"
 
-import { IMAGE } from "~/constants/media"
+import { IMAGE, isAdditionalSearchType } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
 import type { ImageDetail } from "~/types/media"
 import { useAnalytics } from "~/composables/use-analytics"
@@ -111,6 +123,7 @@ import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 import { useSingleResultPageMeta } from "~/composables/use-single-result-page-meta"
 
 import { isRetriable } from "~/utils/errors"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useSingleResultStore } from "~/stores/media/single-result"
 import { singleResultMiddleware } from "~/middleware/single-result"
 
@@ -123,12 +136,17 @@ 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"
 
 export default defineComponent({
   name: "VImageDetailsPage",
   components: {
+    VErrorSection,
+    VMediaInfo,
     VGetMediaButton,
     VMediaDetails,
     VSingleResultControls,
@@ -141,9 +159,6 @@ export default defineComponent({
   },
   layout: "content-layout",
   middleware: singleResultMiddleware,
-  // Fetching on the server is disabled because it is
-  // handled by the `singleResultMiddleware`.
-  fetchOnServer: false,
   setup() {
     const singleResultStore = useSingleResultStore()
 
@@ -279,7 +294,14 @@ export default defineComponent({
       title: pageTitle.value,
     }))
 
+    const featureFlagStore = useFeatureFlagStore()
+    const isAdditionalSearchView = computed(() => {
+      return featureFlagStore.isOn("additional_search_views")
+    })
+
     return {
+      isAdditionalSearchView,
+
       image,
       fetchingError,
       imageWidth,
@@ -306,6 +328,10 @@ export default defineComponent({
   },
   // Necessary for useMeta
   head: {},
+  methods: { isAdditionalSearchType },
+  // Fetching on the server is disabled because it is
+  // handled by the `singleResultMiddleware`.
+  fetchOnServer: false,
 })
 </script>
 
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index feea364b04e..ee79136a8ad 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -99,6 +99,7 @@ export default {
       8: "2.00rem",
       9: "2.25rem",
       10: "2.50rem",
+      11: "2.75rem",
       12: "3.00rem",
       14: "3.50rem",
       15: "3.75rem",
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png
index 139bb60a071..1f6673cdc1b 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png
index 3269d167ca6..d8b6ddd2555 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png
index df9c3947425..af49ddafd8a 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png
index 5d73531919d..1ab870cf0da 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png
index 3a9be4b23e8..b9a1e7f7d13 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png
index fa59cb39c53..1f07f48d956 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png
index 04f9423c637..008b87f7062 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png
index 07b821614b6..4088e827410 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png
index a54fa6fb8ab..232e6742d02 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png
index 8eca5079c9f..a4e22845c78 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png
index 7689f69bedd..24162e557dc 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png
index 635ad2cfa70..cafa5714373 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png
index f972137c6df..a9c504dd5df 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png
index 99fb443f0ae..34600d12fa0 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png
index 427fbf93ae8..f04798ab232 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png
index b0814bc2ed2..aeb9936aab0 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png
index 85f88537772..0e57309385a 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png
index e6476946617..cb5a2aee099 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png
index 3ac0480fde5..7eb0f6fbe3d 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png
index f19bf1598d4..a6580862a5c 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png
index 3586ff43fd9..95d75aed8d2 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png
index ebbe90f2545..31fe5544c8c 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png
index cb49a01f594..644cb8e3710 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png differ