diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
index 4e220245b9a..e74d01b6f17 100644
--- a/frontend/src/components/VAudioTrack/VAudioControl.vue
+++ b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -3,7 +3,7 @@
     :tabindex="isTabbable ? 0 : -1"
     class="audio-control"
     :size="buttonSize"
-    variant="filled-dark"
+    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
     :label="$t(label)"
     :connections="connections"
@@ -61,7 +61,7 @@ const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
   } as const
 
 /**
- * The mapping of play-pause control sizes to the VIconButton sizes
+ * The mapping of audio control sizes to the VIconButton sizes
  * and the sizes of the contained icon.
  */
 const sizes = {
@@ -111,7 +111,7 @@ export default defineComponent({
         (audioLayouts as readonly string[]).includes(val),
     },
     /**
-     * Whether the play-pause button can be focused by using the `Tab` key
+     * Whether the audio control button can be focused by using the `Tab` key
      */
     isTabbable: {
       type: Boolean,
@@ -142,7 +142,7 @@ export default defineComponent({
         : [...layoutConnectionsMap[props.layout]]
     })
 
-    /** Convert the `play-pause` sizes to `VIconButton` sizes */
+    /** Convert the `audio-control` sizes to `VIconButton` sizes */
     const buttonSize = computed(() => sizes[props.size].button)
 
     const iSize = computed(() => sizes[props.size].icon)
diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index 87b527f5366..14663256080 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -36,20 +36,11 @@
         />
       </template>
 
-      <template #play-pause="playPauseProps">
+      <template #audio-control="audioControlProps">
         <VAudioControl
-          v-if="layout === 'full' && additionalSearchViews"
-          ref="playPauseRef"
-          size="medium"
+          ref="audioControlRef"
           :status="status"
-          v-bind="playPauseProps"
-          @toggle="handleToggle"
-        />
-        <VPlayPause
-          v-else
-          ref="playPauseRef"
-          :status="status"
-          v-bind="playPauseProps"
+          v-bind="audioControlProps"
           @toggle="handleToggle"
         />
       </template>
@@ -80,7 +71,6 @@ import {
 
 import { useActiveMediaStore } from "~/stores/active-media"
 import { useMediaStore } from "~/stores/media"
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { AUDIO } from "~/constants/media"
 import {
@@ -99,7 +89,6 @@ import { defineEvent } from "~/types/emits"
 import type { AudioTrackClickEvent } from "~/types/events"
 
 import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VFullLayout from "~/components/VAudioTrack/layouts/VFullLayout.vue"
 import VRowLayout from "~/components/VAudioTrack/layouts/VRowLayout.vue"
@@ -116,7 +105,6 @@ export default defineComponent({
   name: "VAudioTrack",
   components: {
     VAudioControl,
-    VPlayPause,
     VWaveform,
     VLink,
     VWarningSuppressor,
@@ -141,7 +129,7 @@ export default defineComponent({
      */
     layout: {
       type: String as PropType<AudioLayout>,
-      default: "full",
+      required: true,
     },
     /**
      * the size of the component; Both 'box' and 'row' layouts offer multiple
@@ -412,7 +400,7 @@ export default defineComponent({
         : ""
     )
 
-    /* Interface with VPlayPause */
+    /* Interface with VAudioControl */
 
     /**
      * This function can safely ignore the `loading` status because
@@ -490,7 +478,7 @@ export default defineComponent({
      * so we can capture clicks and skip
      * sending an event to the boxed layout.
      */
-    const playPauseRef = ref<{ $el: HTMLElement } | null>(null)
+    const audioControlRef = ref<{ $el: HTMLElement } | null>(null)
 
     /**
      * A ref used on the waveform, so we can capture mousedown on the
@@ -583,11 +571,6 @@ export default defineComponent({
       }
     }
 
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() =>
-      featureFlagStore.isOn("additional_search_views")
-    )
-
     return {
       status,
       message,
@@ -612,10 +595,8 @@ export default defineComponent({
       isComposite,
       containerAttributes,
 
-      playPauseRef,
+      audioControlRef,
       waveformRef,
-
-      additionalSearchViews,
     }
   },
 })
diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
index e1c5c73f459..fb9321524e0 100644
--- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -196,7 +196,7 @@ export default defineComponent({
       () => activeMediaStore.message ?? undefined
     )
 
-    /* Interface with VPlayPause */
+    /* Interface with VAudioControl */
 
     const sendAudioInteractionEvent = (event: AudioInteraction) => {
       sendCustomEvent("AUDIO_INTERACTION", {
diff --git a/frontend/src/components/VAudioTrack/VPlayPause.vue b/frontend/src/components/VAudioTrack/VPlayPause.vue
deleted file mode 100644
index c64fe641b0f..00000000000
--- a/frontend/src/components/VAudioTrack/VPlayPause.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <VOldIconButton
-    v-bind="$attrs"
-    :tabindex="isTabbable ? 0 : -1"
-    class="play-pause flex-shrink-0 border-dark-charcoal bg-dark-charcoal text-white focus-visible:border-pink focus-visible:shadow-ring focus-visible:outline-none active:shadow-ring disabled:opacity-70"
-    :icon-props="icon === undefined ? undefined : { name: icon }"
-    :label="$t(label)"
-    :button-props="buttonProps"
-    @click.stop.prevent="handleClick"
-    @mousedown="handleMouseDown"
-  >
-    <template #default="{ iconSize }">
-      <svg
-        v-if="isLoading"
-        class="loading p-2"
-        :class="`w-${iconSize} h-${iconSize}`"
-        xmlns="http://www.w3.org/2000/svg"
-        overflow="visible"
-        viewBox="0 0 12 12"
-      >
-        <circle cx="6" cy="6" r="6" vector-effect="non-scaling-stroke" />
-        <path
-          d="m 6 0 a 6 6 0 0 1 6 6"
-          stroke="white"
-          vector-effect="non-scaling-stroke"
-        />
-      </svg>
-    </template>
-  </VOldIconButton>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import { AudioLayout, AudioStatus, statusVerbMap } from "~/constants/audio"
-import { defineEvent } from "~/types/emits"
-import type { ButtonConnections, ButtonVariant } from "~/types/button"
-
-import VOldIconButton from "~/components/VIconButton/VOldIconButton.vue"
-
-const statusIconMap = {
-  playing: "pause",
-  paused: "play",
-  played: "replay",
-  loading: undefined,
-} as const
-
-const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
-  {
-    row: ["end"],
-    global: ["top", "end"],
-    box: [],
-    full: [],
-  } as const
-
-/**
- * Displays the control for switching between the playing and paused states of
- * a media file.
- */
-export default defineComponent({
-  name: "VPlayPause",
-  components: { VOldIconButton },
-  inheritAttrs: false,
-  model: {
-    prop: "status",
-    event: "toggle",
-  },
-  props: {
-    /**
-     * the current play status of the audio
-     */
-    status: {
-      type: String as PropType<AudioStatus>,
-      required: true,
-    },
-    /**
-     * The parent audio layout currently in use
-     */
-    layout: {
-      type: String as PropType<AudioLayout>,
-      default: "full",
-    },
-    /**
-     * whether the play-pause button can be focused by using the `Tab` key
-     */
-    isTabbable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    toggle: defineEvent<["paused" | "playing"]>(),
-  },
-  setup(props, { emit }) {
-    const isPlaying = computed(() => props.status === "playing")
-    const isLoading = computed(() => props.status === "loading")
-    /**
-     * Get the button label based on the current status of the player.
-     */
-    const label = computed(() => `playPause.${statusVerbMap[props.status]}`)
-    /**
-     * Get the button icon based on the current status of the player.
-     */
-    const icon = computed(() => statusIconMap[props.status])
-
-    /**
-     * Sets the button variant to `plain--avoid` to manually handle focus states.
-     * Sets the connections (none-rounded corners) for the button based on the layout.
-     */
-    const buttonProps = computed(() => {
-      const variant = "plain--avoid" as ButtonVariant
-
-      return { variant, connections: [...layoutConnectionsMap[props.layout]] }
-    })
-
-    const handleMouseDown = (event: MouseEvent) => {
-      if (!props.isTabbable) event.preventDefault() // to prevent focus
-    }
-    const handleClick = () => {
-      emit("toggle", isPlaying.value || isLoading.value ? "paused" : "playing")
-    }
-    return {
-      label,
-      icon,
-      buttonProps,
-      isLoading,
-
-      handleClick,
-      handleMouseDown,
-    }
-  },
-})
-</script>
-
-<style scoped>
-@keyframes spinAnimation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loading circle,
-.loading path {
-  fill: transparent;
-  stroke-width: 2px;
-}
-
-.loading circle {
-  stroke: #595258;
-}
-
-.loading path {
-  stroke-linecap: round;
-  transform-origin: 50% 50%;
-  animation: spinAnimation 1.4s linear infinite both;
-}
-</style>
diff --git a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
index d9426617ada..3e7e52193e7 100644
--- a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
@@ -1,38 +1,45 @@
 <template>
-  <div :style="{ width }">
-    <!-- The width is determined by the parent element if the 'size' property is not specified. -->
-    <div
-      class="box-track group relative h-0 w-full rounded-sm bg-yellow pt-full text-dark-blue"
-    >
-      <div class="absolute inset-0 flex flex-col">
-        <div class="info flex flex-grow flex-col justify-between p-4">
-          <h2
-            class="font-heading line-clamp-3 text-base font-semibold leading-snug"
-            :class="{ 'blur-text': shouldBlur }"
-          >
-            {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
-          </h2>
-          <div class="info">
-            <VLicense
-              class="mb-2 hidden md:group-hover:block md:group-focus:block"
-              hide-name
-              :license="audio.license"
-            />
-            <div v-if="audio.category">
-              {{ categoryLabel }}
-            </div>
+  <div
+    class="box-track group relative h-0 w-full rounded-sm bg-yellow pt-full text-dark-blue"
+  >
+    <div class="absolute inset-0 flex flex-col">
+      <div class="info flex flex-grow flex-col justify-between px-4 pt-4">
+        <h2
+          class="label-bold line-clamp-3"
+          :class="{ 'blur-text': shouldBlur }"
+        >
+          {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+        </h2>
+        <div class="info">
+          <VLicense
+            class="hidden group-hover:block group-focus:block"
+            hide-name
+            :license="audio.license"
+          />
+          <div v-if="audio.category && !isSmall" class="label-regular mt-2">
+            {{ categoryLabel }}
           </div>
         </div>
+      </div>
 
-        <div class="player hidden flex-row md:flex">
+      <div class="player flex h-12 flex-row items-end">
+        <div class="flex-none p-2">
           <slot
-            name="play-pause"
+            name="audio-control"
             size="small"
             layout="box"
             :is-tabbable="false"
           />
-          <slot name="controller" :features="[]" :is-tabbable="false" />
         </div>
+        <p v-if="audio.category && isSmall" class="label-regular self-center">
+          {{ categoryLabel }}
+        </p>
+        <slot
+          v-if="!isSmall"
+          name="controller"
+          :features="[]"
+          :is-tabbable="false"
+        />
       </div>
     </div>
   </div>
@@ -59,8 +66,8 @@ export default defineComponent({
       required: true,
     },
     size: {
-      type: String as PropType<AudioSize>,
-      required: false,
+      type: String as PropType<Extract<AudioSize, "s" | "l">>,
+      required: true,
     },
   },
   setup(props) {
@@ -68,15 +75,6 @@ export default defineComponent({
 
     const isSmall = computed(() => props.size === "s")
 
-    const width = computed(() => {
-      const magnitudes = {
-        l: 13.25,
-        m: 12.25,
-        s: 9.75,
-      }
-
-      return props.size ? `${magnitudes[props.size]}rem` : undefined
-    })
     const categoryLabel = computed(() =>
       i18n.t(`filters.audioCategories.${props.audio.category}`).toString()
     )
@@ -86,7 +84,6 @@ export default defineComponent({
       isSmall,
       shouldBlur,
 
-      width,
       categoryLabel,
     }
   },
@@ -95,19 +92,7 @@ export default defineComponent({
 
 <style scoped>
 .box-track .waveform {
-  @apply flex-grow;
+  @apply h-10 flex-grow;
   --waveform-background-color: theme("colors.yellow");
 }
-
-.box-track .play-pause {
-  @apply border-yellow bg-yellow text-dark-charcoal focus:border-pink;
-}
-
-.play-pause:hover {
-  @apply border-dark-charcoal bg-dark-charcoal text-white;
-}
-
-.box-track .waveform {
-  @apply h-10;
-}
 </style>
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
index b2f7b84b3a5..d1b2036d3d1 100644
--- a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -16,11 +16,10 @@
       </div>
     </div>
     <div
-      v-if="additionalSearchViews"
       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">
-        <slot name="play-pause" size="medium" />
+        <slot name="audio-control" layout="full" size="medium" />
         <VGetMediaButton
           :media="audio"
           media-type="audio"
@@ -49,46 +48,6 @@
         </div>
       </div>
     </div>
-    <div
-      v-else
-      class="items-top mx-auto mt-6 flex flex-row flex-wrap gap-6 px-6 lg:max-w-5xl lg:flex-nowrap"
-    >
-      <slot name="play-pause" :size="isSmall ? 'small' : 'large'" />
-
-      <div
-        class="audio-info order-2 flex w-full flex-col justify-center lg:order-1 lg:w-auto"
-      >
-        <h1 class="description-bold lg:heading-5 lg:line-clamp-2">
-          {{ audio.title }}
-        </h1>
-        <div
-          class="subtitle mt-1 flex flex-col gap-2 text-base leading-snug lg:flex-row lg:items-center"
-        >
-          <i18n as="span" path="audioTrack.creator" class="font-semibold">
-            <template #creator>
-              <VLink
-                class="rounded-sm p-px focus:outline-none focus:ring focus:ring-pink"
-                :href="audio.creator_url"
-                :send-external-link-click-event="false"
-              >
-                {{ audio.creator }}
-              </VLink>
-            </template>
-          </i18n>
-          <span
-            class="hidden text-dark-charcoal-70 lg:block"
-            aria-hidden="true"
-            >{{ $t("interpunct") }}</span
-          >
-          <div>{{ timeFmt(audio.duration || 0, true) }}</div>
-        </div>
-      </div>
-      <VGetMediaButton
-        media-type="audio"
-        :media="audio"
-        class="order-1 my-1 ms-auto flex-shrink-0 lg:order-2"
-      />
-    </div>
   </div>
 </template>
 
@@ -98,7 +57,6 @@ 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 { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
@@ -125,18 +83,11 @@ export default defineComponent({
   setup(props) {
     const isSmall = computed(() => props.size === "s")
 
-    const featureFlagStore = useFeatureFlagStore()
-
-    const additionalSearchViews = computed(() => {
-      return featureFlagStore.isOn("additional_search_views")
-    })
-
     return {
       timeFmt,
 
       isSmall,
       audioFeatures,
-      additionalSearchViews,
     }
   },
 })
@@ -148,7 +99,7 @@ export default defineComponent({
   --waveform-background-color: theme("colors.white");
 }
 
-.full-track .play-pause {
+.full-track .audio-control {
   @apply rounded-sm;
 }
 </style>
diff --git a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
index 1f44b517ef9..a2f1873f8d4 100644
--- a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -1,103 +1,96 @@
 <template>
   <!-- `pages/search/audio` has negative margin `-mx-4` to compensate for this padding. -->
   <article
-    class="row-track flex flex-row p-2 hover:bg-dark-charcoal-06 md:p-4"
+    class="row-track grid p-2 hover:bg-dark-charcoal-06 md:p-4"
     :class="[`size-${size}`, { 'items-start': isSmall }]"
   >
     <div
-      class="relative flex-shrink-0 overflow-hidden rounded-sm"
-      :class="isLarge ? 'me-6 w-30' : 'me-4 w-20'"
+      class="thumbnail grid overflow-hidden rounded-sm"
+      :class="{ 'h-20 w-20': isSmall }"
     >
-      <VAudioThumbnail :audio="audio" />
-      <div v-show="isSmall" class="absolute bottom-0 ltr:right-0 rtl:left-0">
-        <slot name="play-pause" size="tiny" layout="row" :is-tabbable="false" />
+      <VAudioThumbnail :audio="audio" class="col-span-full row-span-full" />
+      <div
+        v-show="isSmall"
+        class="z-10 col-span-full row-span-full self-end justify-self-start"
+      >
+        <slot
+          name="audio-control"
+          size="small"
+          layout="row"
+          :is-tabbable="false"
+        />
       </div>
     </div>
 
-    <div
-      class="flex-grow"
-      :class="{
-        'flex flex-row gap-8': isMedium,
-        'flex flex-col justify-between': isLarge,
-      }"
-    >
-      <div class="flex-shrink-0" :class="{ 'w-70': isMedium }">
-        <div
-          class="decoration-inherit font-heading line-clamp-2 block rounded-sm p-px font-semibold text-dark-charcoal hover:text-dark-charcoal focus:outline-none focus:ring focus:ring-pink group-hover:underline md:line-clamp-1"
-          :class="{
-            'text-2xl': isMedium || isLarge,
-            'leading-snug': isSmall,
-            'blur-text': shouldBlur,
-          }"
-        >
-          {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
-        </div>
+    <div role="document" class="flex min-w-0 flex-shrink-0 flex-col gap-1">
+      <h2
+        class="decoration-inherit line-clamp-1 block overflow-hidden text-ellipsis whitespace-nowrap rounded-sm text-dark-charcoal hover:text-dark-charcoal group-hover:underline"
+        :class="[
+          { 'blur-text': shouldBlur },
+          isSmall ? 'label-bold' : 'description-bold',
+        ]"
+      >
+        {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+      </h2>
 
-        <div
-          class="mt-2 flex text-dark-charcoal-70"
-          :class="{
-            'text-sr': isSmall,
-            'leading-snug': isMedium || isLarge,
-            'flex-col gap-2': isSmall || isMedium,
-            'flex-row items-center': isLarge,
-          }"
+      <div
+        class="flex text-dark-charcoal-70"
+        :class="[
+          isSmall ? 'caption-regular' : 'label-regular',
+          isMedium ? 'flex-row items-center' : 'flex-col gap-1',
+        ]"
+      >
+        <i18n
+          tag="div"
+          path="audioTrack.creator"
+          class="line-clamp-1 inline-block overflow-hidden text-ellipsis whitespace-nowrap"
+          :class="{ 'blur-text': shouldBlur }"
         >
-          <div class="part-a">
-            <i18n
-              tag="span"
-              path="audioTrack.creator"
-              :class="{ 'blur-text': shouldBlur }"
-            >
-              <template #creator>{{
-                shouldBlur ? $t("sensitiveContent.creator") : audio.creator
-              }}</template> </i18n
-            ><span v-show="isLarge" class="mx-2" aria-hidden="true">{{
-              $t("interpunct")
+          <template #creator>{{
+            shouldBlur ? $t("sensitiveContent.creator") : audio.creator
+          }}</template>
+        </i18n>
+        <!-- Small layout only -->
+        <div v-if="isSmall" class="flex flex-col gap-1">
+          <div class="flex flex-row">
+            <span class="flex">{{ timeFmt(audio.duration || 0, true) }}</span
+            ><span v-if="audio.category" class="dot-before">{{
+              $t(`filters.audioCategories.${audio.category}`)
             }}</span>
           </div>
-
-          <div class="part-b inline-flex flex-row items-center">
-            <span v-show="isSmall">
-              <span
-                class="inline-block rounded-sm bg-dark-charcoal-06 p-1 font-semibold text-dark-charcoal"
-                >{{ timeFmt(audio.duration || 0, true) }}</span
-              ><span class="mx-2" aria-hidden="true">{{
-                $t("interpunct")
-              }}</span>
-            </span>
-
-            <span v-if="audio.category">
-              <span>{{ $t(`filters.audioCategories.${audio.category}`) }}</span
-              ><span class="mx-2" aria-hidden="true">{{
-                $t("interpunct")
-              }}</span>
-            </span>
-
-            <VLicense :hide-name="isSmall" :license="audio.license" />
-          </div>
+          <VLicense :hide-name="true" :license="audio.license" />
+        </div>
+        <!-- Medium and large layouts -->
+        <div v-else class="flex flex-shrink-0 flex-row">
+          <span v-if="audio.category" :class="{ 'dot-before': isMedium }">{{
+            $t(`filters.audioCategories.${audio.category}`)
+          }}</span>
+          <VLicense
+            :hide-name="!isMd"
+            :license="audio.license"
+            :class="{ 'dot-before': isMedium || (isLarge && audio.category) }"
+          />
         </div>
       </div>
+    </div>
 
-      <div
-        v-show="!isSmall"
-        class="flex flex-row"
-        :class="{
-          'flex-grow': isMedium,
-        }"
-      >
-        <slot
-          name="play-pause"
-          :size="isLarge ? 'large' : 'extra-large'"
-          :layout="'row'"
-          :is-tabbable="false"
-        />
-        <slot
-          name="controller"
-          :features="audioFeatures"
-          :feature-notices="featureNotices"
-          :is-tabbable="false"
-        />
-      </div>
+    <div
+      v-show="!isSmall"
+      class="controller flex flex-row"
+      :class="{ 'ms-2': isLarge }"
+    >
+      <slot
+        name="audio-control"
+        :size="isLarge ? 'large' : 'medium'"
+        layout="row"
+        :is-tabbable="false"
+      />
+      <slot
+        name="controller"
+        :features="audioFeatures"
+        :feature-notices="featureNotices"
+        :is-tabbable="false"
+      />
     </div>
   </article>
 </template>
@@ -111,6 +104,8 @@ import { audioFeatures, AudioSize } from "~/constants/audio"
 
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 
+import { useUiStore } from "~/stores/ui"
+
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
 import VLicense from "~/components/VLicense/VLicense.vue"
 
@@ -143,6 +138,9 @@ export default defineComponent({
 
     const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
 
+    const uiStore = useUiStore()
+    const isMd = computed(() => uiStore.isBreakpoint("md"))
+
     return {
       timeFmt,
 
@@ -152,6 +150,7 @@ export default defineComponent({
       isSmall,
       isMedium,
       isLarge,
+      isMd,
 
       shouldBlur,
     }
@@ -159,13 +158,13 @@ export default defineComponent({
 })
 </script>
 
-<style>
-.row-track .play-pause {
-  @apply flex-shrink-0 rounded-es-sm rounded-ss-sm;
+<style scoped>
+.row-track .audio-control {
+  @apply flex-none rounded-es-sm rounded-ss-sm;
 }
 
 .row-track .waveform {
-  @apply flex-grow;
+  @apply w-full;
   --waveform-background-color: theme("colors.tx");
 }
 
@@ -173,11 +172,46 @@ export default defineComponent({
   @apply rounded-ee-sm rounded-se-sm;
 }
 
+.row-track.size-s {
+  grid-template-columns: 5rem 1fr;
+  grid-template-rows: repeat(4, auto);
+  @apply gap-x-4;
+  grid-template-areas: "thumbnail info-1" "thumbnail info-2" "thumbnail info-3" "thumbnail controller";
+}
+.row-track.size-m {
+  grid-template-columns: 5.9375rem 1fr;
+  grid-template-rows: auto auto 3rem;
+  @apply gap-x-6;
+  grid-template-areas: "thumbnail info-1" "thumbnail info-2" "thumbnail controller";
+}
+.row-track.size-l {
+  grid-template-columns: 4rem 17.5rem 1fr;
+  grid-template-rows: auto auto auto;
+  @apply gap-x-4;
+  grid-template-areas: "thumbnail info-1 controller" "thumbnail info-2 controller" "thumbnail info-3 controller";
+}
+.row-track .thumbnail {
+  grid-area: thumbnail;
+}
+.row-track .controller {
+  grid-area: controller;
+}
+
 .row-track.size-m .waveform {
-  @apply h-20;
+  @apply h-12;
 }
 
 .row-track.size-l .waveform {
-  @apply h-14;
+  @apply h-16;
+}
+
+.dot-after {
+  @apply relative me-5;
+  @apply after:absolute after:-end-3 after:top-[calc(50%-0.125rem)] after:h-1 after:w-1 after:rounded-full after:bg-dark-charcoal-70;
+}
+
+.dot-before {
+  @apply relative ms-5;
+  @apply before:absolute before:-start-3 before:top-[calc(50%-0.125rem)] before:h-1 before:w-1 before:rounded-full before:bg-dark-charcoal-70;
 }
 </style>
diff --git a/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx b/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
index 70e9a8c265a..e33ff2b22e5 100644
--- a/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
+++ b/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
@@ -6,6 +6,7 @@ import {
   Story,
 } from "@storybook/addon-docs"
 import { computed } from "vue"
+import { audioLayouts, audioSizes } from "~/constants/audio"
 
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 
@@ -25,12 +26,12 @@ import wavWaveform from "./wav-waveform.json"
     },
     layout: {
       defaultValue: "full",
-      options: ["full", "box", "row", "global"],
+      options: audioLayouts,
       control: "select",
     },
     size: {
       defaultValue: "m",
-      options: ["s", "m", "l"],
+      options: audioSizes,
       control: "select",
     },
     audio: {
@@ -192,8 +193,7 @@ The component can be rendered in a multiple different layouts, by specifying a
 
 #### Sizes L and M (default)
 
-Box sizes L and M are identical with the only difference being the `width`
-dimension.
+There is no M size in box layout.
 
 <Canvas>
   <Story
@@ -209,7 +209,7 @@ dimension.
     name="Box (medium)"
     args={{
       layout: "box",
-      // size: 'm', (default)
+      size: "l",
     }}
   >
     {Template.bind({})}
diff --git a/frontend/src/components/VAudioTrack/meta/VPlayPause.stories.mdx b/frontend/src/components/VAudioTrack/meta/VPlayPause.stories.mdx
deleted file mode 100644
index 880eb71b0ce..00000000000
--- a/frontend/src/components/VAudioTrack/meta/VPlayPause.stories.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs"
-
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
-
-<Meta
-  title="Components/Audio track/Play-pause toggle"
-  components={VPlayPause}
-  argTypes={{
-    status: {
-      options: ["playing", "paused", "played"],
-      defaultValue: "paused",
-      control: "select",
-    },
-    size: {
-      defaultValue: "medium",
-      options: ["tiny", "small", "medium", "extra-large"],
-      control: "select",
-    },
-    toggle: {
-      action: "toggle",
-    },
-  }}
-/>
-
-export const Template = (args) => ({
-  template: `<VPlayPause v-bind="args" v-on="args"/>`,
-  components: { VPlayPause },
-  setup() {
-    return { args }
-  },
-})
-
-# Play-pause toggle
-
-<Description of={VPlayPause} />
-
-<ArgsTable of={VPlayPause} />
-
-It should be noted that the component emits the `toggle` event with the opposite
-value of its `status` state.
-
-## Size
-
-The button dimensions can be set by passing the `size` prop (see
-[`VOldIconButton` docs](?path=/docs/components-voldiconbutton--default-story)).
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      status: "playing",
-      size: "large",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Two-way binding
-
-The recommended way to use it is with `v-model` mapping to a `String` that can
-either be `'playing'`, `'paused'` or `'played'`.
-
-It should be noted that both paused and played states change to playing when
-toggled whereas the playing state toggles to paused. The played state can only
-be achieved by playing till the end of a track.
-
-export const vModelTemplate = () => ({
-  template: `
-    <div>
-      <VPlayPause v-model="status" />
-      {{ status }}
-    </div>
-  `,
-  components: { VPlayPause },
-  data() {
-    return {
-      status: "played",
-    }
-  },
-})
-
-<Canvas>
-  <Story name="v-model">{vModelTemplate.bind({})}</Story>
-</Canvas>
-
-The component is, indirectly, a transparent wrapper over `<button>` so all
-attributes of the button element can be applied to it, e.g. `disabled`.
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index 26acaa36d7c..2c657caf92b 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -50,6 +50,7 @@
           :audio="item"
           :search-term="searchTerm"
           layout="box"
+          :size="isSm ? 'l' : 's'"
           :is-related="false"
         />
       </template>
@@ -131,6 +132,8 @@ export default defineComponent({
       isFilterVisible: isSidebarVisible,
     } = storeToRefs(uiStore)
 
+    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+
     return {
       searchTerm,
       isError,
@@ -145,6 +148,7 @@ export default defineComponent({
 
       isSidebarVisible,
       isSnackbarVisible,
+      isSm,
 
       isDetail,
     }
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
index cf208d1c245..f061085f965 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioList.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
@@ -55,11 +55,11 @@ export default defineComponent({
 
     const audioTrackSize = computed(() => {
       if (props.kind === "related") {
-        return uiStore.isBreakpoint("md") ? "l" : "s"
+        return uiStore.isBreakpoint("sm") ? "m" : "s"
       } else {
-        return !uiStore.isDesktopLayout
+        return !uiStore.isBreakpoint("sm")
           ? "s"
-          : uiStore.isFilterVisible
+          : uiStore.isBreakpoint("xl")
           ? "l"
           : "m"
       }
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
index 90e32019686..a3413afbbb3 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
@@ -65,7 +65,7 @@ export default defineComponent({
       { inWaveform }: AudioTrackClickEvent
     ) => {
       // Only send the event when the click navigates to the single result page.
-      // If the click is in waveform or play-pause button, it controls the audio player.
+      // If the click is in waveform or audio-control button, it controls the audio player.
       if (inWaveform) return
       useAudioSnackbar().hide()
       sendCustomEvent("SELECT_SEARCH_RESULT", {
diff --git a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-ltr-png-xs-linux.png b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-ltr-png-xs-linux.png
index 4a9fd2edead..7dc1689ed15 100644
Binary files a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-ltr-png-xs-linux.png and b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-ltr-png-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-rtl-png-xs-linux.png b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-rtl-png-xs-linux.png
index d584212af0d..764c0b58408 100644
Binary files a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-rtl-png-xs-linux.png and b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts-snapshots/global-audio-player-on-search-rtl-png-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-2xl-linux.png
index 1447bce4dba..fbe79a9de8a 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-lg-linux.png
index a4790d57c38..fcb0f3c2915 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-md-linux.png
index 8cbbd7d09bc..34f254e43db 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-md-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-sm-linux.png
index d9747e2cb2f..f20577d1b72 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-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-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 3480746bf29..139bb60a071 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 64372ca28a5..3269d167ca6 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 4ff9a56889c..df9c3947425 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 28fc41d8147..5d73531919d 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 dcd66a8956f..3a9be4b23e8 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 00ab4a4ceb3..fa59cb39c53 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-ltr-from-search-results-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xl-linux.png
index c620ec857c9..8c4866b92cf 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xs-linux.png
index 21374892ce6..47ff85f52b7 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-2xl-linux.png
index 8ef08f90810..373a75d659f 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-lg-linux.png
index 11d8203dcaf..6c6d4eb0d67 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-md-linux.png
index daf50b9c054..d5ed2ee0151 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-md-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-sm-linux.png
index ca39a427b31..727efdab203 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-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-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 6da9234df46..04f9423c637 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 9bda0cc7736..07b821614b6 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 04e7241e6e1..a54fa6fb8ab 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 1ceb14bde43..8eca5079c9f 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 6b59deb4340..7689f69bedd 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 97b29779da8..635ad2cfa70 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/audio-rtl-from-search-results-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xl-linux.png
index 6451d565288..1aa678693f1 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xs-linux.png
index db719cd5698..a5c23c4203b 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-xs-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png
index d045b1e8f96..a1566b7ace3 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-2xl-linux.png
index 473f44db6d3..53f658d3ae0 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-lg-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-lg-linux.png
index cb94dde15cd..73791a1e42c 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-md-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-md-linux.png
index cddd084ecb0..5d7f36ec4bb 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-md-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-sm-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-sm-linux.png
index fb1803f8790..958412e659c 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xl-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xl-linux.png
index 4602c249639..6bbadffbdd1 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xs-linux.png b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xs-linux.png
index 8a3c127bd3d..ba10c47c4a7 100644
Binary files a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xs-linux.png and b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts-snapshots/page-with-all-banners-xs-linux.png differ
diff --git a/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js b/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
index 38b151c6788..a648456e7c1 100644
--- a/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
+++ b/frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js
@@ -1,5 +1,3 @@
-/* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "getByText"] }] */
-
 import { fireEvent } from "@testing-library/vue"
 
 import { render } from "~~/test/unit/test-utils/render"
@@ -21,7 +19,6 @@ jest.mock("~/composables/use-match-routes", () => ({
 }))
 
 const stubs = {
-  VPlayPause: true,
   VLicense: true,
   VWaveform: true,
   VAudioThumbnail: true,
@@ -60,30 +57,35 @@ describe("AudioTrack", () => {
   })
 
   it("should render the full audio track component even without duration", () => {
+    options.propsData.layout = "full"
     const { getByText } = render(VAudioTrack, options, configureVue)
-    getByText(props.audio.creator)
-  })
-
-  it("should render the row audio track component even without duration", () => {
-    options.propsData.layout = "row"
-    const { getByText } = render(VAudioTrack, options, configureVue)
-    getByText("by " + props.audio.creator)
+    const creator = getByText(props.audio.creator)
+    expect(creator).toBeInstanceOf(HTMLAnchorElement)
   })
 
-  it("should show audio title as main page title", () => {
+  it("should show audio title as main page title in full layout", () => {
+    options.propsData.layout = "full"
     const { getByText } = render(VAudioTrack, options, configureVue)
     // Title text appears multiple times in the track, so need to specify selector
     const element = getByText(props.audio.title, { selector: "H1" })
     expect(element).toBeInTheDocument()
   })
 
-  it("should show audio creator with link", () => {
+  it("should show audio creator in a full layout with link", () => {
+    options.propsData.layout = "full"
     const { getByText } = render(VAudioTrack, options, configureVue)
     const element = getByText(props.audio.creator)
     expect(element).toBeInstanceOf(HTMLAnchorElement)
     expect(element).toHaveAttribute("href", props.audio.creator_url)
   })
 
+  it("should render the row audio track component even without duration", () => {
+    options.propsData.layout = "row"
+    const { getByText } = render(VAudioTrack, options, configureVue)
+    const creator = getByText("by " + props.audio.creator)
+    expect(creator).toBeTruthy()
+  })
+
   it.each`
     errorType              | errorText
     ${"NotAllowedError"}   | ${/Reproduction not allowed./i}
@@ -95,7 +97,6 @@ describe("AudioTrack", () => {
     async ({ errorType, errorText }) => {
       options.propsData.audio.url = "bad.url"
       options.propsData.layout = "row"
-      options.stubs.VPlayPause = false
       options.stubs.VWaveform = false
       options.stubs.VAudioThumbnail = true
 
@@ -136,6 +137,7 @@ describe("AudioTrack", () => {
   it("has blurred title in box layout when audio is sensitive", async () => {
     options.propsData.audio.isSensitive = true
     options.propsData.layout = "box"
+    options.propsData.size = "large"
     const { getByText } = render(VAudioTrack, options, configureVue)
     const h2 = getByText("This audio track may contain sensitive content.")
     expect(h2).toHaveClass("blur-text")
diff --git a/frontend/test/unit/specs/components/AudioTrack/v-box-layout.spec.js b/frontend/test/unit/specs/components/AudioTrack/v-box-layout.spec.js
index ffcbe7e988a..a54989607fa 100644
--- a/frontend/test/unit/specs/components/AudioTrack/v-box-layout.spec.js
+++ b/frontend/test/unit/specs/components/AudioTrack/v-box-layout.spec.js
@@ -21,11 +21,14 @@ describe("VBoxLayout", () => {
   it("renders audio title, license and category in v-box-layout", () => {
     props.audio.category = "music"
     render(VBoxLayout, options)
-    expect(() => {
-      screen.getByText(props.audio.title)
-      screen.getByLabelText("Attribution-NonCommercial-Share-Alike")
-      screen.getByText("Music")
-    }).not.toThrow()
+    const title = screen.getByText(props.audio.title)
+    expect(title).toBeVisible()
+    const license = screen.getByLabelText(
+      "Attribution-NonCommercial-Share-Alike"
+    )
+    expect(license).toBeInTheDocument() // Not visible unless hovered
+    const category = screen.getByText("Music")
+    expect(category).toBeVisible()
   })
 
   it("should not render category string if category is null", () => {