diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
index 5820c8cf295..4e220245b9a 100644
--- a/frontend/src/components/VAudioTrack/VAudioControl.vue
+++ b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -1,7 +1,7 @@
 <template>
   <VIconButton
     :tabindex="isTabbable ? 0 : -1"
-    class="play-pause"
+    class="audio-control"
     :size="buttonSize"
     variant="filled-dark"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
@@ -52,12 +52,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} as const
+const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
+  {
+    row: ["end"],
+    global: ["top", "end"],
+    box: [],
+    full: [],
+  } as const
 
 /**
  * The mapping of play-pause control sizes to the VIconButton sizes
@@ -137,8 +138,8 @@ export default defineComponent({
      */
     const connections = computed(() => {
       return props.layout === "row" && props.size === "small"
-        ? "none"
-        : layoutConnectionsMap[props.layout]
+        ? []
+        : [...layoutConnectionsMap[props.layout]]
     })
 
     /** Convert the `play-pause` sizes to `VIconButton` sizes */
diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
index 1f1bc9fac41..e1c5c73f459 100644
--- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="audio-track" :aria-label="ariaLabel" role="region">
+  <div
+    class="audio-track relative rounded"
+    :aria-label="ariaLabel"
+    role="region"
+  >
     <VGlobalLayout :audio="audio">
       <template #controller="waveformProps">
         <VWaveform
@@ -14,9 +18,10 @@
         />
       </template>
 
-      <template #play-pause="playPauseProps">
-        <VPlayPause
-          v-bind="playPauseProps"
+      <template #audio-control="{ size, layout }">
+        <VAudioControl
+          :size="size"
+          :layout="layout"
           :status="status"
           @toggle="handleToggle"
         />
@@ -40,7 +45,7 @@ import type { AudioInteraction } from "~/types/analytics"
 import type { AudioDetail } from "~/types/media"
 import type { AudioStatus } from "~/constants/audio"
 
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
+import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 
@@ -51,7 +56,7 @@ import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 export default defineComponent({
   name: "VGlobalAudioTrack",
   components: {
-    VPlayPause,
+    VAudioControl,
     VWaveform,
     VGlobalLayout,
   },
diff --git a/frontend/src/components/VAudioTrack/VPlayPause.vue b/frontend/src/components/VAudioTrack/VPlayPause.vue
index b994e522e6d..c64fe641b0f 100644
--- a/frontend/src/components/VAudioTrack/VPlayPause.vue
+++ b/frontend/src/components/VAudioTrack/VPlayPause.vue
@@ -45,12 +45,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} 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
@@ -109,7 +110,7 @@ export default defineComponent({
     const buttonProps = computed(() => {
       const variant = "plain--avoid" as ButtonVariant
 
-      return { variant, connections: layoutConnectionsMap[props.layout] }
+      return { variant, connections: [...layoutConnectionsMap[props.layout]] }
     })
 
     const handleMouseDown = (event: MouseEvent) => {
diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index 29166876cd4..ffe2879c83a 100644
--- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="global-track flex w-full flex-row">
-    <div class="flex-shrink-0">
-      <VAudioThumbnail :audio="audio" />
-      <slot name="play-pause" size="large" layout="global" />
+  <div
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-dark-charcoal ring-opacity-20"
+  >
+    <div class="h-12 w-12 rounded-ss">
+      <VAudioThumbnail class="rounded-ss" :audio="audio" />
     </div>
 
-    <div class="relative flex-grow">
+    <div class="flex h-12 items-center justify-between rounded-se bg-white">
       <VLink
         :href="`/audio/${audio.id}`"
-        class="hover-underline absolute inset-x-0 top-[10.5px] z-10 line-clamp-2 flex flex-row items-center justify-between px-4 pe-12 text-sr font-semibold text-dark-charcoal"
+        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-dark-charcoal"
         :class="{ 'blur-text': shouldBlur }"
       >
         {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
       </VLink>
-
-      <slot name="controller" :usable-frac="0.5" />
     </div>
+    <slot name="audio-control" size="medium" layout="global" />
+    <slot name="controller" :usable-frac="1" />
   </div>
 </template>
 
@@ -52,12 +53,20 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 .global-track .thumbnail {
-  @apply h-14 w-14;
+  @apply h-12 w-12 rounded-ss;
+}
+.global-track .thumbnail img,
+.global-track .thumbnail ~ svg {
+  @apply rounded-ss;
 }
 
 .global-track .waveform {
-  @apply h-full;
+  @apply h-full rounded-ee;
+  --waveform-background-color: theme("colors.white");
+}
+.global-track .audio-control {
+  @apply rounded-es;
 }
 </style>
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index 9a26eba5c54..a2f45a63a66 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -7,9 +7,9 @@
       $style.button,
       $style[variant],
       $style[`size-${size}${iconOnly ? '-icon-only' : ''}`],
+      connectionStyles,
       {
         [$style[`${variant}-pressed`]]: isActive,
-        [$style[`connection-${connections}`]]: isConnected,
         [$style[`icon-start-${size}`]]: hasIconStart,
         [$style[`icon-end-${size}`]]: hasIconEnd,
         [$style[`icon-only`]]: iconOnly,
@@ -159,13 +159,12 @@ const VButton = defineComponent({
     /**
      * Whether the button is connected to another control and needs to have no rounded
      * borders at that edge.
-     * `all` means that the button is not rounded.
      *
-     * @default 'none'
+     * @default []
      */
     connections: {
-      type: String as PropType<ButtonConnections>,
-      default: "none",
+      type: Array as PropType<ButtonConnections[]>,
+      default: () => [] as ButtonConnections[],
     },
     /**
      * Whether the button has an icon at the inline start of the button.
@@ -203,7 +202,11 @@ const VButton = defineComponent({
     const typeRef = ref<ButtonType | undefined>(propsRef.type.value)
     const supportsDisabledAttributeRef = ref(true)
 
-    const isConnected = computed(() => props.connections !== "none")
+    const connectionStyles = computed(() =>
+      props.connections
+        .map((connection) => `connection-${connection}`)
+        .join(" ")
+    )
 
     const isActive = computed(() => {
       return (
@@ -272,7 +275,7 @@ const VButton = defineComponent({
       ariaDisabledRef,
       typeRef,
       isActive,
-      isConnected,
+      connectionStyles,
       isPlainDangerous,
       isFocusSlimFilled,
       isFocusSlimTx,
@@ -386,14 +389,19 @@ a.button {
 .dropdown-label-pressed {
   @apply border-tx bg-dark-charcoal text-white active:hover:border-white;
 }
+</style>
 
+<style scoped>
 .connection-start {
   @apply rounded-s-none;
 }
 .connection-end {
   @apply rounded-e-none;
 }
-.connection-all {
-  @apply rounded-none;
+.connection-top {
+  @apply rounded-se-none rounded-ss-none;
+}
+.connection-bottom {
+  @apply rounded-ee-none rounded-es-none;
 }
 </style>
diff --git a/frontend/src/components/VCloseButton.vue b/frontend/src/components/VCloseButton.vue
deleted file mode 100644
index 53c440e7e83..00000000000
--- a/frontend/src/components/VCloseButton.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <VOldIconButton
-    :button-props="buttonProps"
-    :icon-props="iconProps"
-    :borderless="true"
-    :size="size"
-    :class="{
-      'bg-tx text-white ring-offset-tx focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10':
-        variant === 'black',
-      '!text-dark-charcoal-70 hover:!text-white':
-        variant === 'filled-white-light',
-    }"
-    :label="label"
-    @click="$emit('close')"
-  />
-</template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import type { ButtonVariant } from "~/types/button"
-
-import VOldIconButton from "~/components/VIconButton/VOldIconButton.vue"
-
-import type { TranslateResult } from "vue-i18n"
-
-type CloseButtonVariant =
-  | "filled-white"
-  | "filled-white-light"
-  | "transparent-dark"
-  | "transparent-gray"
-  | "filled-dark"
-  | "black"
-  | "plain--avoid"
-
-/**
- * The square icon button with a cross in it. Used to close popovers,
- * modals, and other overlays.
- * Must have a label for accessibility.
- */
-export default defineComponent({
-  name: "VCloseButton",
-  components: { VOldIconButton },
-  props: {
-    label: {
-      type: [String, Object] as PropType<string | TranslateResult>,
-      required: true,
-    },
-    /**
-     * The variant of the button. `filled-white-light` is not a VButton variant,
-     * it overrides the `filled-white` variant's text color with a lighter color.
-     *
-     * `black` is a special non-standard button used only on the black
-     * background of the internal header.
-     *
-     * @default "filled-white-light"
-     */
-    variant: {
-      type: String as PropType<CloseButtonVariant>,
-      default: "filled-white-light",
-    },
-    /**
-     * The size of the underlying VOldIconButton.
-     */
-    size: {
-      type: String as PropType<"close" | "small" | "medium" | "large">,
-      default: "medium",
-    },
-    /**
-     * Whether to choose `close-small` or `close` (medium) icon.
-     *
-     * @default "medium"
-     */
-    iconSize: {
-      type: String as PropType<"small" | "medium">,
-      default: "small",
-    },
-  },
-  setup(props) {
-    const iconProps = computed(() => {
-      return { name: props.iconSize === "small" ? "close-small" : "close" }
-    })
-
-    const buttonProps = computed<{ variant: ButtonVariant }>(() => {
-      const variant =
-        props.variant === "black"
-          ? "plain--avoid"
-          : props.variant === "filled-white-light"
-          ? "filled-white"
-          : props.variant
-      return { variant }
-    })
-
-    return {
-      buttonProps,
-      iconProps,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
index 29c7921007d..8a8e0bc5f48 100644
--- a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
+++ b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="global-audio sticky bottom-0 z-global-audio sm:hidden">
-    <VGlobalAudioTrack v-if="audio" :audio="audio" />
-    <VCloseButton
-      v-if="audio"
-      class="!absolute end-0 top-0 z-30"
-      variant="transparent-dark"
-      size="large"
-      :label="$t('audioTrack.close')"
-      @close="handleClose"
-    />
+  <div
+    class="global-audio sticky z-global-audio sm:hidden"
+    :class="{ 'bottom-2 mx-2': !!audio }"
+  >
+    <template v-if="audio">
+      <VGlobalAudioTrack :audio="audio" />
+      <VIconButton
+        class="!absolute end-0 top-0 z-30 m-2"
+        variant="transparent-gray"
+        :icon-props="{ name: 'close-small' }"
+        size="small"
+        :label="$t('audioTrack.close')"
+        @click="handleClose"
+      />
+    </template>
   </div>
 </template>
 
@@ -26,13 +31,13 @@ import { useUiStore } from "~/stores/ui"
 
 import type { AudioDetail } from "~/types/media"
 
-import VCloseButton from "~/components/VCloseButton.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 import VGlobalAudioTrack from "~/components/VAudioTrack/VGlobalAudioTrack.vue"
 
 export default defineComponent({
   name: "VGlobalAudioSection",
   components: {
-    VCloseButton,
+    VIconButton,
     VGlobalAudioTrack,
   },
   setup() {
@@ -136,15 +141,8 @@ export default defineComponent({
     return {
       audio,
 
-      handleError,
       handleClose,
     }
   },
 })
 </script>
-
-<style>
-.global-audio {
-  grid-area: global-audio;
-}
-</style>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index 0d89db8bbff..5e7a9ce5f6e 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -31,7 +31,7 @@ import type { TranslateResult } from "vue-i18n"
 
 /**
  * The buttons placed inside the mobile search bar in the header.
- * They are based on the VOldIconButton, look like they have a smallish focus area
+ * They are based on the VButton, look like they have a smallish focus area
  * (32x32px), but actually have a larger tappable area of 48x48px to comply with
  * accessibility requirements.
  */
diff --git a/frontend/src/components/VIconButton/VIconButton.vue b/frontend/src/components/VIconButton/VIconButton.vue
index bd5ed502a31..35c3621a3fb 100644
--- a/frontend/src/components/VIconButton/VIconButton.vue
+++ b/frontend/src/components/VIconButton/VIconButton.vue
@@ -66,7 +66,7 @@ export default defineComponent({
      * Connections to pass down to the `VButton` component nested inside the button.
      */
     connections: {
-      type: String as PropType<ButtonConnections>,
+      type: Array as PropType<ButtonConnections[]>,
     },
     /**
      * The label used for accessibility purposes.
diff --git a/frontend/src/components/meta/VCloseButton.stories.mdx b/frontend/src/components/meta/VCloseButton.stories.mdx
deleted file mode 100644
index 5a86dc935da..00000000000
--- a/frontend/src/components/meta/VCloseButton.stories.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs"
-import VCloseButton from "~/components/VCloseButton.vue"
-
-<Meta title="Components/VCloseButton" components={VCloseButton} />
-
-export const buttonVariants = [
-  "filled-white",
-  "filled-white-light",
-  "filled-dark",
-  "black",
-]
-
-export const Template = (args) => ({
-  template: `
-    <div class="flex"><div id="wrapper"
-        class="px-4 h-16 flex flex-grow-0 items-center justify-center bg-dark-charcoal-06">
-    <VCloseButton v-bind="args" v-on="args" label="Close" />
-    </div></div>
-  `,
-  components: { VCloseButton },
-  setup() {
-    return { args }
-  },
-})
-
-# VCloseButton
-
-<Description of={VCloseButton} />
-
-<Canvas>
-  <Story
-    name="VCloseButton"
-    parameters={{
-      viewport: { defaultViewport: "sm" },
-    }}
-    args={{
-      variant: "filled-white-light",
-    }}
-    argTypes={{
-      variant: {
-        options: buttonVariants,
-        control: { type: "select" },
-      },
-      size: {
-        options: ["small", "medium", "large"],
-        control: { type: "select" },
-      },
-      iconSize: {
-        options: ["small", "medium"],
-        control: { type: "select" },
-      },
-      close: {
-        action: "close",
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable of={VCloseButton} />
-
-## VCloseButton variants
-
-export const VariantsTemplate = (args) => ({
-  template: `
-    <div class="flex p-4 gap-4 items-center justify-center bg-dark-charcoal-06" id="wrapper">
-    <VCloseButton
-        v-for="variant in buttonVariants"
-        :key="variant" v-bind="{...args, variant }"
-        v-on="args" label="Close" />
-    </div>
-  `,
-  components: { VCloseButton },
-  setup() {
-    return { args }
-  },
-  data: () => ({
-    buttonVariants,
-  }),
-})
-
-<Canvas>
-  <Story
-    name="VCloseButton varuabts"
-    parameters={{
-      viewport: { defaultViewport: "sm" },
-    }}
-    argTypes={{
-      size: {
-        options: ["small", "medium", "large"],
-        control: { type: "select" },
-      },
-      iconSize: {
-        options: ["small", "medium"],
-        control: { type: "select" },
-      },
-      close: {
-        action: "close",
-      },
-    }}
-  >
-    {VariantsTemplate.bind({})}
-  </Story>
-</Canvas>
diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue
index a144a62b787..ccb21012581 100644
--- a/frontend/src/layouts/content-layout.vue
+++ b/frontend/src/layouts/content-layout.vue
@@ -2,7 +2,7 @@
   <div>
     <VSkipToContentButton />
     <div
-      class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr,auto] bg-white"
+      class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] bg-white"
       :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
     >
       <div class="header-el sticky top-0 z-40 block bg-white">
@@ -23,10 +23,10 @@
           mode="internal"
           class="border-t border-dark-charcoal-20 bg-white"
         />
+        <VGlobalAudioSection />
       </div>
-
-      <VModalTarget class="modal" />
     </div>
+    <VModalTarget class="modal" />
   </div>
 </template>
 <script lang="ts">
@@ -44,6 +44,7 @@ import VFooter from "~/components/VFooter/VFooter.vue"
 import VModalTarget from "~/components/VModal/VModalTarget.vue"
 import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
+import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
 
 /**
  * This is the ContentLayout: the search page, the single result page,
@@ -53,6 +54,7 @@ import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
 export default defineComponent({
   name: "ContentLayout",
   components: {
+    VGlobalAudioSection,
     VSkipToContentButton,
     VBanners,
     VHeaderInternal,
@@ -108,7 +110,7 @@ export default defineComponent({
 
 <style scoped>
 .app {
-  grid-template-areas: "header" "main" "global-audio";
+  grid-template-areas: "header" "main";
 }
 .header-el {
   grid-area: header;
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
index a8fe6008e37..c4f3de0c9d0 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -13,10 +13,8 @@
         <Nuxt class="flex-grow" />
         <VFooter mode="internal" class="bg-yellow" />
       </div>
-
-      <VModalTarget class="modal" />
-      <VGlobalAudioSection />
     </div>
+    <VModalTarget class="modal" />
   </div>
 </template>
 <script lang="ts">
@@ -28,7 +26,6 @@ import { useUiStore } from "~/stores/ui"
 
 import VBanners from "~/components/VBanner/VBanners.vue"
 import VFooter from "~/components/VFooter/VFooter.vue"
-import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
 import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
 import VModalTarget from "~/components/VModal/VModalTarget.vue"
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
@@ -42,7 +39,6 @@ export default defineComponent({
     VSkipToContentButton,
     VBanners,
     VFooter,
-    VGlobalAudioSection,
     VHeaderInternal,
     VModalTarget,
   },
diff --git a/frontend/src/layouts/search-layout.vue b/frontend/src/layouts/search-layout.vue
index 7bc9dc60211..574527ac66b 100644
--- a/frontend/src/layouts/search-layout.vue
+++ b/frontend/src/layouts/search-layout.vue
@@ -2,7 +2,7 @@
   <div>
     <VSkipToContentButton />
     <div
-      class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr,auto] bg-white"
+      class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr] bg-white"
       :class="[
         isDesktopLayout ? 'desktop' : 'mobile',
         breakpoint,
@@ -44,10 +44,9 @@
           class="border-t border-dark-charcoal-20 bg-white"
         />
       </div>
-
-      <VModalTarget class="modal" />
       <VGlobalAudioSection />
     </div>
+    <VModalTarget class="modal" />
   </div>
 </template>
 <script lang="ts">
@@ -179,7 +178,7 @@ export default defineComponent({
   width: var(--filter-sidebar-width);
 }
 .app {
-  grid-template-areas: "header" "main" "global-audio";
+  grid-template-areas: "header" "main";
 }
 .header-el {
   grid-area: header;
diff --git a/frontend/src/types/button.ts b/frontend/src/types/button.ts
index ef8c3bb311e..d5d7985be72 100644
--- a/frontend/src/types/button.ts
+++ b/frontend/src/types/button.ts
@@ -36,5 +36,5 @@ export type ButtonSize = (typeof buttonSizes)[number]
 export const buttonTypes = ["button", "submit", "reset"] as const
 export type ButtonType = (typeof buttonTypes)[number]
 
-export const buttonConnections = ["start", "end", "none", "all"] as const
+export const buttonConnections = ["start", "end", "top", "bottom"] as const
 export type ButtonConnections = (typeof buttonConnections)[number]
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 222b09af7f0..feea364b04e 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -119,6 +119,7 @@ export default {
     ringWidth: {
       DEFAULT: "1.5px", // aka slim
       bold: "3.0px",
+      1: "1px",
       0: "0",
     },
     borderWidth: {
diff --git a/frontend/tailwind.safelist.txt b/frontend/tailwind.safelist.txt
index df97666c8c4..95a49997209 100644
--- a/frontend/tailwind.safelist.txt
+++ b/frontend/tailwind.safelist.txt
@@ -13,6 +13,11 @@ h-6
 h-8
 h-12
 
+rounded-ee
+rounded-es
+rounded-se
+rounded-ss
+
 z-auto
 z-10
 z-20
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 b5220822c50..4a9fd2edead 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 c71ca610a86..d584212af0d 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