diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 5641f8aada..7ec717157e 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -366,6 +366,13 @@ https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-
   @apply w-full bg-dark-charcoal-06 font-semibold text-dark-charcoal;
 }
 
+.dropdown-label {
+  @apply border border-dark-charcoal-20 text-dark-charcoal focus-slim-tx hover:border-tx hover:bg-dark-charcoal hover:text-white;
+}
+.dropdown-label-pressed {
+  @apply border-tx bg-dark-charcoal text-white focus-bold-filled active:hover:border-white;
+}
+
 .connection-start {
   @apply rounded-s-none;
 }
diff --git a/src/components/VExternalSearch/VExternalSearchForm.vue b/src/components/VExternalSearch/VExternalSearchForm.vue
index 53903f2360..2e837bac22 100644
--- a/src/components/VExternalSearch/VExternalSearchForm.vue
+++ b/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -2,7 +2,7 @@
   <section
     :key="type"
     ref="sectionRef"
-    class="external-sources flex flex-row place-items-center justify-center p-4"
+    class="external-sources flex flex-row place-items-center justify-center py-4"
     data-testid="external-sources-form"
     @keydown.tab.exact="handleTab"
   >
@@ -33,10 +33,56 @@
       <template #query>{{ searchTerm }}</template>
     </i18n>
 
-    <VExternalSourceList
-      class="inline-flex ms-2 md:justify-center"
-      :external-sources="externalSources"
-    />
+    <VButton
+      id="external-sources-button"
+      ref="triggerRef"
+      :pressed="triggerA11yProps['aria-expanded']"
+      aria-haspopup="dialog"
+      :aria-controls="
+        isMd ? 'external-sources-popover' : 'external-sources-modal'
+      "
+      variant="dropdown-label"
+      size="disabled"
+      class="caption-regular min-w-max gap-1 py-1 px-3 text-dark-charcoal pe-1 ms-2 focus-visible:border-tx"
+      @click="onTriggerClick"
+      >{{ $t("external-sources.button").toString()
+      }}<VIcon
+        class="text-dark-charcoal-40"
+        :class="{ 'text-white': triggerA11yProps['aria-expanded'] }"
+        :icon-path="caretDownIcon"
+      />
+    </VButton>
+    <template v-if="triggerElement">
+      <VPopoverContent
+        v-if="isMd"
+        id="external-sources-popover"
+        aria-labelledby="external-sources-button"
+        :hide="closeDialog"
+        :trigger-element="triggerElement"
+        :visible="isVisible"
+        z-index="popover"
+      >
+        <VExternalSourceList
+          class="flex flex-col"
+          :external-sources="externalSources"
+          @close="closeDialog"
+      /></VPopoverContent>
+      <VModalContent
+        v-else
+        id="external-sources-modal"
+        aria-labelledby="external-sources-button"
+        :trigger-element="triggerElement"
+        :hide="closeDialog"
+        :visible="isVisible"
+        variant="centered"
+      >
+        <VExternalSourceList
+          class="flex-col justify-center"
+          :external-sources="externalSources"
+          @close="closeDialog"
+        />
+      </VModalContent>
+    </template>
   </section>
 </template>
 
@@ -46,20 +92,34 @@ import {
   defineComponent,
   PropType,
   ref,
+  SetupContext,
 } from "@nuxtjs/composition-api"
 
 import { getFocusableElements } from "~/utils/focus-management"
 import { defineEvent } from "~/types/emits"
 
-import type { MediaType } from "~/constants/media"
+import { useUiStore } from "~/stores/ui"
 
+import { useDialogControl } from "~/composables/use-dialog-control"
+
+import type { MediaType } from "~/constants/media"
 import type { ExternalSource } from "~/types/external-source"
 
 import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VPopoverContent from "~/components/VPopover/VPopoverContent.vue"
+import VModalContent from "~/components/VModal/VModalContent.vue"
+
+import caretDownIcon from "~/assets/icons/caret-down.svg"
 
 export default defineComponent({
   name: "VExternalSearchForm",
   components: {
+    VModalContent,
+    VPopoverContent,
+    VIcon,
+    VButton,
     VExternalSourceList,
   },
   props: {
@@ -88,7 +148,29 @@ export default defineComponent({
     tab: defineEvent<[KeyboardEvent]>(),
   },
   setup(_, { emit }) {
-    const sectionRef = ref<HTMLElement>()
+    const sectionRef = ref<HTMLElement | null>(null)
+    const triggerRef = ref<InstanceType<typeof VButton> | null>(null)
+    const uiStore = useUiStore()
+
+    const isMd = computed(() => uiStore.isBreakpoint("md"))
+
+    const triggerElement = computed(() => triggerRef.value?.$el as HTMLElement)
+
+    const lockBodyScroll = computed(() => !isMd.value)
+
+    const isVisible = ref(false)
+
+    const {
+      close: closeDialog,
+      open: openDialog,
+      onTriggerClick,
+      triggerA11yProps,
+    } = useDialogControl({
+      visibleRef: isVisible,
+      nodeRef: sectionRef,
+      lockBodyScroll,
+      emit: emit as SetupContext["emit"],
+    })
 
     /**
      * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
@@ -107,7 +189,19 @@ export default defineComponent({
     }
     return {
       sectionRef,
+      triggerRef,
+      triggerElement,
       handleTab,
+      isMd,
+
+      closeDialog,
+      openDialog,
+      onTriggerClick,
+      triggerA11yProps,
+
+      isVisible,
+
+      caretDownIcon,
     }
   },
 })
diff --git a/src/components/VExternalSearch/VExternalSourceList.vue b/src/components/VExternalSearch/VExternalSourceList.vue
index 7012d2a184..569c92102d 100644
--- a/src/components/VExternalSearch/VExternalSourceList.vue
+++ b/src/components/VExternalSearch/VExternalSourceList.vue
@@ -1,62 +1,35 @@
 <template>
-  <VPopover
-    ref="sourceListPopover"
-    class="flex items-stretch"
-    :label="$t('external-sources.button').toString()"
-    placement="top-start"
-  >
-    <template #trigger="{ a11yProps }">
-      <VButton
-        :pressed="a11yProps['aria-expanded']"
-        :aria-haspopup="a11yProps['aria-haspopup']"
-        aria-controls="source-list-popover"
-        variant="action-menu-bordered"
-        size="disabled"
-        class="caption-regular justify-between py-1 px-3 text-dark-charcoal pe-2"
-        >{{ $t("external-sources.button").toString() }}
-        <VIcon
-          class="text-dark-charcoal-40 ms-1"
-          :class="a11yProps['aria-expanded'] ? 'rotate-180' : 'rotate-0'"
-          :icon-path="icons.caretDown"
-      /></VButton>
-    </template>
-    <template #default="{ close }">
-      <div
-        class="relative max-w-[280px] p-2 pt-0"
-        data-testid="source-list-popover"
-      >
-        <VIconButton
-          class="absolute top-0 border-none text-dark-charcoal-70 end-0"
-          :icon-props="{ iconPath: icons.closeSmall }"
-          :aria-label="$t('modal.close').toString()"
-          @click="close"
-        />
-        <h2 class="description-bold mb-2 px-4 pt-5 text-start">
-          {{ $t("external-sources.title") }}
-        </h2>
-        <p class="caption-regular mb-4 px-4 text-start">
-          {{ $t("external-sources.caption", { openverse: "Openverse" }) }}
-        </p>
-        <VButton
-          v-for="source in externalSources"
-          :key="source.name"
-          as="VLink"
-          variant="plain"
-          size="disabled"
-          class="caption-bold w-full justify-between px-4 py-3 text-dark-charcoal hover:bg-dark-charcoal-10"
-          :href="source.url"
-        >
-          {{ source.name }}
-          <VIcon
-            :icon-path="icons.externalLink"
-            :size="4"
-            :rtl-flip="true"
-            class="ms-2"
-          />
-        </VButton>
-      </div>
-    </template>
-  </VPopover>
+  <div class="relative max-w-[280px]" data-testid="source-list-popover">
+    <VIconButton
+      class="absolute top-0 border-none text-dark-charcoal-70 end-0"
+      :icon-props="{ iconPath: icons.closeSmall }"
+      :aria-label="$t('modal.close').toString()"
+      @click="$emit('close')"
+    />
+    <h2 class="description-bold mb-2 px-4 pt-5 text-start">
+      {{ $t("external-sources.title") }}
+    </h2>
+    <p class="caption-regular mb-4 px-4 text-start">
+      {{ $t("external-sources.caption", { openverse: "Openverse" }) }}
+    </p>
+    <VButton
+      v-for="source in externalSources"
+      :key="source.name"
+      as="VLink"
+      variant="plain"
+      size="disabled"
+      class="caption-bold w-full justify-between px-4 py-3 text-dark-charcoal hover:bg-dark-charcoal-10"
+      :href="source.url"
+    >
+      {{ source.name }}
+      <VIcon
+        :icon-path="icons.externalLink"
+        :size="4"
+        :rtl-flip="true"
+        class="ms-2"
+      />
+    </VButton>
+  </div>
 </template>
 
 <script lang="ts">
@@ -67,7 +40,6 @@ import type { ExternalSource } from "~/types/external-source"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
-import VPopover from "~/components/VPopover/VPopover.vue"
 
 import externalLinkIcon from "~/assets/icons/external-link.svg"
 import caretDownIcon from "~/assets/icons/caret-down.svg"
@@ -79,7 +51,7 @@ import closeSmallIcon from "~/assets/icons/close-small.svg"
  */
 export default defineComponent({
   name: "VExternalSourceList",
-  components: { VButton, VIcon, VIconButton, VPopover },
+  components: { VButton, VIcon, VIconButton },
   props: {
     /**
      * the media type to use as the criteria for filtering additional sources
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index ed8302bb16..a975d6c114 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -11,7 +11,7 @@
       <div
         ref="dialogRef"
         v-bind="$attrs"
-        class="flex w-full flex-col"
+        class="flex flex-col"
         :class="[$style[`modal-${variant}`], $style[`modal-${mode}`]]"
         role="dialog"
         aria-modal="true"
@@ -91,6 +91,7 @@ import closeIcon from "~/assets/icons/close.svg"
 export default defineComponent({
   name: "VModalContent",
   components: { VTeleport, VButton, VIcon, VLogoButtonOld },
+  inheritAttrs: false,
   props: {
     visible: {
       type: Boolean,
@@ -193,12 +194,23 @@ export default defineComponent({
 .top-bar-two-thirds {
   @apply bg-tx;
 }
+
 .modal-backdrop-fit-content,
 .modal-backdrop-two-thirds {
   @apply bg-dark-charcoal bg-opacity-75;
 }
+.modal-backdrop-centered {
+  @apply flex-col items-center;
+}
+
 .modal-default {
-  @apply md:max-w-[768px] lg:w-[768px] xl:w-[1024px] xl:max-w-[1024px];
+  @apply w-full md:max-w-[768px] lg:w-[768px] xl:w-[1024px] xl:max-w-[1024px];
+}
+.modal-full {
+  @apply w-full;
+}
+.modal-two-thirds {
+  @apply mt-auto h-2/3 w-full rounded-t-lg bg-white;
 }
 
 .modal-dark {
@@ -207,11 +219,12 @@ export default defineComponent({
 .modal-light {
   @apply bg-white text-dark-charcoal;
 }
+
 .modal-content-default {
   @apply text-left align-bottom md:rounded-t-md;
 }
-.modal-two-thirds {
-  @apply mt-auto h-2/3 w-full rounded-t-lg bg-white;
+.modal-content-centered {
+  @apply w-auto;
 }
 .modal-fit-content {
   @apply mt-auto w-full rounded-t-lg bg-white;
diff --git a/src/components/VPopover/VPopoverContent.vue b/src/components/VPopover/VPopoverContent.vue
index 5101089ec1..3f04bc2fc2 100644
--- a/src/components/VPopover/VPopoverContent.vue
+++ b/src/components/VPopover/VPopoverContent.vue
@@ -12,6 +12,7 @@
       :class="[`z-${zIndex}`, width]"
       :style="heightProperties"
       :tabindex="-1"
+      v-bind="$attrs"
       @blur="onBlur"
     >
       <slot />
@@ -44,6 +45,7 @@ export const VPopoverContentContextKey = Symbol(
 
 export default defineComponent({
   name: "VPopoverContent",
+  inheritAttrs: false,
   props: {
     visible: {
       type: Boolean,
diff --git a/src/composables/use-dialog-control.ts b/src/composables/use-dialog-control.ts
index f3ddd7fcfc..8ebabec629 100644
--- a/src/composables/use-dialog-control.ts
+++ b/src/composables/use-dialog-control.ts
@@ -60,6 +60,13 @@ export function useDialogControl({
     unlock = bodyScroll.unlock
   }
   const shouldLockBodyScroll = computed(() => unref(lockBodyScroll) ?? false)
+  watch(shouldLockBodyScroll, (shouldLock) => {
+    if (shouldLock) {
+      if (internalVisibleRef.value) lock()
+    } else {
+      unlock()
+    }
+  })
 
   const open = () => (internalVisibleRef.value = true)
 
diff --git a/src/types/button.ts b/src/types/button.ts
index e4aaf7d4d9..5a740f79ef 100644
--- a/src/types/button.ts
+++ b/src/types/button.ts
@@ -17,6 +17,8 @@ export const buttonVariants = [
   "plain",
   "plain--avoid",
   "full",
+  "dropdown-label",
+  "dropdown-label-pressed",
 ] as const
 export type ButtonVariant = typeof buttonVariants[number]
 
diff --git a/src/types/modal.ts b/src/types/modal.ts
index bff3069e4c..a8efc89198 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -1,6 +1,11 @@
 import type { Ref } from "@nuxtjs/composition-api"
 
-export type ModalVariant = "default" | "full" | "two-thirds" | "fit-content"
+export type ModalVariant =
+  | "default"
+  | "full"
+  | "two-thirds"
+  | "fit-content"
+  | "centered"
 export type ModalColorMode = "dark" | "light"
 
 export type DialogOptions = {
diff --git a/test/playwright/e2e/search-types-old.spec.ts b/test/playwright/e2e/search-types-old.spec.ts
index 3cc627a12e..d8e5d4760c 100644
--- a/test/playwright/e2e/search-types-old.spec.ts
+++ b/test/playwright/e2e/search-types-old.spec.ts
@@ -4,10 +4,11 @@ import {
   changeContentType,
   goToSearchTerm,
   OLD_HEADER,
-  searchTypePath,
 } from "~~/test/playwright/utils/navigation"
 import { mockProviderApis } from "~~/test/playwright/utils/route"
 
+import { searchPath } from "~/constants/media"
+
 /**
  * Using SSR:
  * 1. Can open 'all content' search page, and see search results.
@@ -35,7 +36,7 @@ const allContentConfig = {
   name: "All content",
   url: "/search/?q=birds",
   canLoadMore: true,
-  metaSourceCount: 7,
+  externalSourceCount: 7,
 } as const
 
 const imageConfig = {
@@ -43,7 +44,7 @@ const imageConfig = {
   name: "Images",
   url: "/search/image?q=birds",
   canLoadMore: true,
-  metaSourceCount: 7,
+  externalSourceCount: 7,
   results: /Over 10,000 results/,
 } as const
 
@@ -52,7 +53,7 @@ const audioConfig = {
   name: "Audio",
   url: "/search/audio?q=birds",
   canLoadMore: true,
-  metaSourceCount: 3,
+  externalSourceCount: 3,
   results: /764 results/,
 } as const
 
@@ -71,14 +72,17 @@ async function checkLoadMore(page: Page, searchType: SearchTypeConfig) {
     await expect(loadMoreSection).toContainText("Load more")
   }
 }
-async function checkMetasearchForm(page: Page, searchType: SearchTypeConfig) {
+async function checkExternalSourcesForm(
+  page: Page,
+  searchType: SearchTypeConfig
+) {
   const metaSearchForm = await page.locator(
     '[data-testid="external-sources-form"]'
   )
   await expect(metaSearchForm).toHaveCount(1)
 
   const sourceButtons = await page.locator(".external-sources a")
-  await expect(sourceButtons).toHaveCount(searchType.metaSourceCount)
+  await expect(sourceButtons).toHaveCount(searchType.externalSourceCount)
 }
 
 async function checkSearchMetadata(page: Page, searchType: SearchTypeConfig) {
@@ -90,10 +94,8 @@ async function checkSearchMetadata(page: Page, searchType: SearchTypeConfig) {
 }
 
 async function checkPageMeta(page: Page, searchType: SearchTypeConfig) {
-  const urlParam = searchTypePath(searchType.id)
-
   const expectedTitle = `birds | Openverse`
-  const expectedURL = `/search/${urlParam}?q=birds`
+  const expectedURL = `${searchPath(searchType.id)}?q=birds`
 
   await expect(page).toHaveTitle(expectedTitle)
   await expect(page).toHaveURL(expectedURL)
@@ -101,7 +103,7 @@ async function checkPageMeta(page: Page, searchType: SearchTypeConfig) {
 async function checkSearchResult(page: Page, searchType: SearchTypeConfig) {
   await checkSearchMetadata(page, searchType)
   await checkLoadMore(page, searchType)
-  await checkMetasearchForm(page, searchType)
+  await checkExternalSourcesForm(page, searchType)
   await checkPageMeta(page, searchType)
 }
 
diff --git a/test/playwright/e2e/search-types.spec.ts b/test/playwright/e2e/search-types.spec.ts
index a540bbdef9..1832538168 100644
--- a/test/playwright/e2e/search-types.spec.ts
+++ b/test/playwright/e2e/search-types.spec.ts
@@ -4,11 +4,12 @@ import {
   changeContentType,
   enableNewHeader,
   goToSearchTerm,
-  searchTypePath,
 } from "~~/test/playwright/utils/navigation"
 import { mockProviderApis } from "~~/test/playwright/utils/route"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
+import { searchPath } from "~/constants/media"
+
 /**
  * Using SSR:
  * 1. Can open 'all content' search page, and see search results.
@@ -32,7 +33,6 @@ const allContentConfig = {
   name: "All content",
   url: "/search/?q=birds",
   canLoadMore: true,
-  metaSourceCount: 7,
 } as const
 
 const imageConfig = {
@@ -40,7 +40,6 @@ const imageConfig = {
   name: "Images",
   url: "/search/image?q=birds",
   canLoadMore: true,
-  metaSourceCount: 7,
   results: /Over 10,000 results/,
 } as const
 
@@ -49,7 +48,6 @@ const audioConfig = {
   name: "Audio",
   url: "/search/audio?q=birds",
   canLoadMore: true,
-  metaSourceCount: 3,
   results: /764 results/,
 } as const
 
@@ -68,29 +66,23 @@ async function checkLoadMore(page: Page, searchType: SearchTypeConfig) {
     await expect(loadMoreSection).toContainText("Load more")
   }
 }
-async function checkMetasearchForm(page: Page, searchType: SearchTypeConfig) {
-  const metaSearchForm = await page.locator(
-    '[data-testid="external-sources-form"]'
-  )
-  await expect(metaSearchForm).toHaveCount(1)
-
-  const sourceButtons = await page.locator(".external-sources a")
-  await expect(sourceButtons).toHaveCount(searchType.metaSourceCount)
+async function checkExternalSourcesForm(page: Page) {
+  await expect(
+    page.locator('[data-testid="external-sources-form"]')
+  ).toBeVisible()
 }
 
 async function checkSearchMetadata(page: Page, searchType: SearchTypeConfig) {
   if (searchType.canLoadMore) {
-    const searchResult = await page.locator('[data-testid="search-results"]')
+    const searchResult = page.locator('[data-testid="search-results"]')
     await expect(searchResult).toBeVisible()
     await expect(searchResult).not.toBeEmpty()
   }
 }
 
 async function checkPageMeta(page: Page, searchType: SearchTypeConfig) {
-  const urlParam = searchTypePath(searchType.id)
-
   const expectedTitle = `birds | Openverse`
-  const expectedURL = `/search/${urlParam}?q=birds`
+  const expectedURL = `${searchPath(searchType.id)}?q=birds`
 
   await expect(page).toHaveTitle(expectedTitle)
   await expect(page).toHaveURL(expectedURL)
@@ -98,7 +90,7 @@ async function checkPageMeta(page: Page, searchType: SearchTypeConfig) {
 async function checkSearchResult(page: Page, searchType: SearchTypeConfig) {
   await checkSearchMetadata(page, searchType)
   await checkLoadMore(page, searchType)
-  await checkMetasearchForm(page, searchType)
+  await checkExternalSourcesForm(page)
   await checkPageMeta(page, searchType)
 }
 
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts b/test/playwright/visual-regression/components/external-sources-section.spec.ts
index b896d50cda..cd445edcd1 100644
--- a/test/playwright/visual-regression/components/external-sources-section.spec.ts
+++ b/test/playwright/visual-regression/components/external-sources-section.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import {
   enableNewHeader,
@@ -6,28 +6,36 @@ import {
   languageDirections,
 } from "~~/test/playwright/utils/navigation"
 
+import breakpoints from "~~/test/playwright/utils/breakpoints"
+
 import { supportedSearchTypes } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
 
 for (const dir of languageDirections) {
   for (const searchType of supportedSearchTypes) {
-    test(`External ${searchType} sources popover - ${dir}`, async ({
-      page,
-    }) => {
-      await enableNewHeader(page)
-      await goToSearchTerm(page, "birds", { searchType, dir })
-      const externalSourcesButton = page.locator(
-        '[aria-controls="source-list-popover"]'
-      )
+    breakpoints.describeMobileAndDesktop(
+      async ({ breakpoint, expectSnapshot }) => {
+        test(`External ${searchType} sources popover - ${dir}`, async ({
+          page,
+        }) => {
+          await enableNewHeader(page)
+          await goToSearchTerm(page, "birds", { searchType, dir })
+          const sourcesId = `external-sources-${
+            breakpoint === "xl" ? "popover" : "modal"
+          }`
+          const externalSourcesButton = page.locator(
+            `[aria-controls="${sourcesId}"]`
+          )
 
-      await externalSourcesButton.click()
+          await externalSourcesButton.click()
 
-      expect(
-        await page.locator('[data-testid="source-list-popover"]').screenshot()
-      ).toMatchSnapshot({
-        name: `external-${searchType}-sources-popover-${dir}.png`,
-      })
-    })
+          await expectSnapshot(
+            `external-${searchType}-sources-popover-${dir}.png`,
+            page.locator(`#${sourcesId}`)
+          )
+        })
+      }
+    )
   }
 }
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-sm-linux.png
new file mode 100644
index 0000000000..526c9ca5ca
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-xl-linux.png
new file mode 100644
index 0000000000..49a950af81
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-ltr-png-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-sm-linux.png
new file mode 100644
index 0000000000..ccd1a7f4ce
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-xl-linux.png
new file mode 100644
index 0000000000..ac00daacbb
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-all-sources-popover-rtl-png-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-sm-linux.png
new file mode 100644
index 0000000000..6c3bb1d60b
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-xl-linux.png
new file mode 100644
index 0000000000..c42ff00fe9
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-png-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-sm-linux.png
new file mode 100644
index 0000000000..ec457bfb34
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-xl-linux.png
new file mode 100644
index 0000000000..a7a28c9752
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-png-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-sm-linux.png
new file mode 100644
index 0000000000..526c9ca5ca
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-xl-linux.png
new file mode 100644
index 0000000000..49a950af81
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-png-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-sm-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-sm-linux.png
new file mode 100644
index 0000000000..6687ae0208
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-sm-linux.png differ
diff --git a/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-xl-linux.png b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-xl-linux.png
new file mode 100644
index 0000000000..ac00daacbb
Binary files /dev/null and b/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-png-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-hovered-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-hovered-linux.png
new file mode 100644
index 0000000000..49b3b5c8f4
Binary files /dev/null and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-hovered-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-hovered-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-hovered-linux.png
new file mode 100644
index 0000000000..49b3b5c8f4
Binary files /dev/null and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-hovered-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-linux.png
new file mode 100644
index 0000000000..49b3b5c8f4
Binary files /dev/null and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-pressed-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-resting-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-resting-linux.png
new file mode 100644
index 0000000000..408c3c7cd9
Binary files /dev/null and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/dropdown-label-resting-linux.png differ