diff --git a/frontend/src/components/VContentReport/VContentReportModal.vue b/frontend/src/components/VContentReport/VContentReportModal.vue
index e23846cad8f..f8c21f38200 100644
--- a/frontend/src/components/VContentReport/VContentReportModal.vue
+++ b/frontend/src/components/VContentReport/VContentReportModal.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue"
 
 import { WIP } from "~/constants/content-report"
+import { CONTENT_REPORT_DIALOG } from "~/constants/dialogs"
 import { useContentReport } from "~/composables/use-content-report"
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
@@ -36,6 +37,7 @@ const close = () => {
 
 <template>
   <VModal
+    :id="CONTENT_REPORT_DIALOG"
     ref="modalRef"
     :label="$t('mediaDetails.contentReport.long')"
     :hide-on-click-outside="true"
@@ -51,7 +53,7 @@ const close = () => {
     <template #default>
       <VContentReportForm
         ref="contentReportFormRef"
-        class="p-7 pt-0 sm:p-9"
+        class="p-7 pt-0 sm:p-9 sm:pt-0"
         :media="media"
         :status="status"
         :allow-cancel="true"
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index 9698719aac0..ed03e1cc7b6 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -3,6 +3,7 @@ import { computed, ref } from "vue"
 
 import useSearchType from "~/composables/use-search-type"
 
+import { SEARCH_TYPES_DIALOG } from "~/constants/dialogs"
 import type { SearchType } from "~/constants/media"
 
 import VPopover from "~/components/VPopover/VPopover.vue"
@@ -38,6 +39,7 @@ const handleSelect = (searchType: SearchType) => {
 
 <template>
   <VPopover
+    :id="SEARCH_TYPES_DIALOG"
     ref="contentMenuPopover"
     :label="$t('searchType.label')"
     placement="bottom-end"
diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
index 5af757d9003..501d7548d08 100644
--- a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -11,6 +11,8 @@ import { useMediaStore } from "~/stores/media"
 
 import { useExternalSources } from "~/composables/use-external-sources"
 
+import { EXTERNAL_SEARCH_DIALOG } from "~/constants/dialogs"
+
 import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -58,6 +60,7 @@ const isMd = computed(() => uiStore.isBreakpoint("md"))
     data-testid="external-sources-form"
   >
     <VModal
+      :id="EXTERNAL_SEARCH_DIALOG"
       variant="centered"
       :hide-on-click-outside="true"
       labelled-by="external-sources-button"
@@ -100,10 +103,7 @@ const isMd = computed(() => uiStore.isBreakpoint("md"))
           {{ $t("externalSources.title") }}
         </h2>
       </template>
-      <VExternalSourceList
-        class="-mt-3 flex flex-col"
-        :search-term="searchTerm"
-      />
+      <VExternalSourceList class="flex flex-col" :search-term="searchTerm" />
     </VModal>
   </section>
 </template>
diff --git a/frontend/src/components/VFilters/VFilterChecklist.vue b/frontend/src/components/VFilters/VFilterChecklist.vue
index df8d52335bf..f5ca06e2bc0 100644
--- a/frontend/src/components/VFilters/VFilterChecklist.vue
+++ b/frontend/src/components/VFilters/VFilterChecklist.vue
@@ -4,7 +4,6 @@ import { useI18n } from "#imports"
 import { useSearchStore } from "~/stores/search"
 
 import type { FilterItem, FilterCategory } from "~/constants/filters"
-
 import type { License } from "~/constants/license"
 
 import { getElements } from "~/utils/license"
@@ -12,10 +11,9 @@ import { getElements } from "~/utils/license"
 import VButton from "~/components/VButton.vue"
 import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
 import VLicense from "~/components/VLicense/VLicense.vue"
 import VLicenseExplanation from "~/components/VFilters/VLicenseExplanation.vue"
-import VPopover from "~/components/VPopover/VPopover.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 type toggleFilterPayload = {
   filterType: FilterCategory
@@ -69,6 +67,14 @@ const isLicense = (code: string): code is License => {
   // Quick check that also prevents "`code` is declared but its value is never read" warning.
   return !!code && props.filterType === "licenses"
 }
+
+const getTitle = (code: string) => {
+  return isLicense(code)
+    ? t("filters.licenseExplanation.licenseDefinition")
+    : t("filters.licenseExplanation.markDefinition", {
+        mark: code.toUpperCase(),
+      })
+}
 </script>
 
 <template>
@@ -93,11 +99,12 @@ const isLicense = (code: string): code is License => {
       </VCheckbox>
 
       <!-- License explanation -->
-      <VPopover
+      <VModal
         v-if="isLicense(item.code)"
-        strategy="fixed"
+        :id="item.code"
+        variant="centered"
+        :hide-on-click-outside="true"
         :label="$t('browsePage.aria.licenseExplanation')"
-        :trap-focus="false"
       >
         <template #trigger="{ a11yProps }">
           <VButton
@@ -110,20 +117,24 @@ const isLicense = (code: string): code is License => {
             <VIcon name="help" />
           </VButton>
         </template>
-        <template #default="{ close }">
-          <div class="relative">
-            <VIconButton
-              :label="getLicenseExplanationCloseAria(item.code)"
-              :icon-props="{ name: 'close' }"
-              variant="transparent-gray"
-              size="small"
-              class="!absolute end-1 top-1"
-              @click="close"
-            />
-            <VLicenseExplanation :license="item.code" />
-          </div>
+        <template #title>
+          <h5 class="text-base font-semibold">
+            {{ getTitle(item.code) }}
+          </h5>
+        </template>
+        <template #close-button="{ close }">
+          <VIconButton
+            :label="getLicenseExplanationCloseAria(item.code)"
+            :icon-props="{ name: 'close' }"
+            variant="transparent-gray"
+            size="small"
+            @click="close"
+          />
+        </template>
+        <template #default>
+          <VLicenseExplanation :license="item.code" />
         </template>
-      </VPopover>
+      </VModal>
     </div>
   </fieldset>
 </template>
diff --git a/frontend/src/components/VFilters/VLicenseExplanation.vue b/frontend/src/components/VFilters/VLicenseExplanation.vue
index 0ed6badf7d0..01592ebe27e 100644
--- a/frontend/src/components/VFilters/VLicenseExplanation.vue
+++ b/frontend/src/components/VFilters/VLicenseExplanation.vue
@@ -19,24 +19,10 @@ defineProps<{
 </script>
 
 <template>
-  <div class="license-explanation w-70 max-w-xs p-6">
-    <h5 class="text-base font-semibold">
-      <template v-if="isLicense(license)">{{
-        $t("filters.licenseExplanation.licenseDefinition")
-      }}</template>
-      <template v-else>{{
-        $t("filters.licenseExplanation.markDefinition", {
-          mark: license.toUpperCase(),
-        })
-      }}</template>
-    </h5>
-
-    <VLicenseElements
-      v-if="license"
-      size="small"
-      class="my-4"
-      :license="license"
-    />
+  <div
+    class="license-explanation flex flex-col gap-y-4 p-6 pt-0 sm:p-9 sm:pt-0"
+  >
+    <VLicenseElements size="small" :license="license" />
 
     <i18n-t
       scope="global"
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index fb9481cbfd6..49ecf7c8325 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * The desktop search header.
+ */
 import { useNuxtApp } from "#imports"
 
 import { computed, inject, ref } from "vue"
@@ -22,10 +25,6 @@ import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover
 
 import type { Ref } from "vue"
 
-/**
- * The desktop search header.
- */
-
 const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
 const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
 
diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
index c30474fbf79..2c191b03708 100644
--- a/frontend/src/components/VHeader/VHeaderInternal.vue
+++ b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -8,6 +8,8 @@ import { useHydrating } from "~/composables/use-hydrating"
 
 import { useUiStore } from "~/stores/ui"
 
+import { PAGES_DIALOG } from "~/constants/dialogs"
+
 import VHomeLink from "~/components/VHeader/VHomeLink.vue"
 import VPageLinks from "~/components/VHeader/VPageLinks.vue"
 import VModalContent from "~/components/VModal/VModalContent.vue"
@@ -22,10 +24,7 @@ const emit = defineEmits<{
 
 const menuButtonRef = ref<InstanceType<typeof VIconButton> | null>(null)
 const nodeRef = ref<HTMLElement | null>(null)
-const modalContentRef = ref<{
-  $el: HTMLElement
-  deactivateFocusTrap: () => void
-} | null>(null)
+const modalContentRef = ref<InstanceType<typeof VModalContent> | null>(null)
 
 const uiStore = useUiStore()
 
@@ -55,6 +54,7 @@ const {
   onTriggerClick: internalOnTriggerClick,
   triggerA11yProps,
 } = useDialogControl({
+  id: PAGES_DIALOG,
   visibleRef: isModalVisible,
   nodeRef,
   lockBodyScroll,
@@ -105,6 +105,7 @@ watch(route, () => {
       <template v-if="triggerElement">
         <VPopoverContent
           v-if="isSm"
+          :id="PAGES_DIALOG"
           z-index="popover"
           :hide="closePageMenu"
           :visible="isModalVisible"
@@ -121,6 +122,7 @@ watch(route, () => {
         </VPopoverContent>
         <VModalContent
           v-else-if="!isSm"
+          :id="PAGES_DIALOG"
           ref="modalContentRef"
           aria-labelledby="menu-button"
           :hide="closePageMenu"
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
index 5fd2f05f6bf..df42d07dc0c 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -7,6 +7,8 @@ import useSearchType from "~/composables/use-search-type"
 
 import { SearchType } from "~/constants/media"
 
+import { CONTENT_SETTINGS_DIALOG } from "~/constants/dialogs"
+
 import VButton from "~/components/VButton.vue"
 import VFilterTab from "~/components/VHeader/VHeaderMobile/VFilterTab.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -42,9 +44,7 @@ const props = withDefaults(
   }
 )
 
-defineEmits<{
-  select: [SearchType]
-}>()
+defineEmits<{ select: [SearchType] }>()
 
 const searchStore = useSearchStore()
 const content = useSearchType()
@@ -70,6 +70,7 @@ const clearFilters = () => {
 
 <template>
   <VModalContent
+    :id="CONTENT_SETTINGS_DIALOG"
     :aria-label="$t('header.aria.menu')"
     :hide-on-click-outside="true"
     :hide="close"
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 8e51d60c9d5..38dea071723 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -18,6 +18,10 @@ import { useRecentSearches } from "~/composables/use-recent-searches"
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 
+import {
+  CONTENT_SETTINGS_DIALOG,
+  RECENT_SEARCHES_DIALOG,
+} from "~/constants/dialogs"
 import { skipToContentTargetId } from "~/constants/window"
 
 import VLogoButton from "~/components/VHeader/VLogoButton.vue"
@@ -219,6 +223,7 @@ const {
   onTriggerClick: toggleContentSettings,
   triggerA11yProps,
 } = useDialogControl({
+  id: CONTENT_SETTINGS_DIALOG,
   visibleRef: contentSettingsOpen,
   nodeRef: headerRef,
   lockBodyScroll: true,
@@ -352,6 +357,7 @@ const handleTab = (
     </form>
     <VModalContent
       v-if="isRecentVisible"
+      :id="RECENT_SEARCHES_DIALOG"
       :visible="true"
       :hide="deactivate"
       :trigger-element="searchInputRef"
diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue
index 7366684b96d..b0ea424d624 100644
--- a/frontend/src/components/VHomepageContent.vue
+++ b/frontend/src/components/VHomepageContent.vue
@@ -9,6 +9,8 @@ import { useDialogControl } from "~/composables/use-dialog-control"
 
 import { useUiStore } from "~/stores/ui"
 
+import { HOMEPAGE_CONTENT_SETTINGS_DIALOG } from "~/constants/dialogs"
+
 import VContentSettingsModalContent from "~/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue"
 import VLink from "~/components/VLink.vue"
 import VPopoverContent from "~/components/VPopover/VPopoverContent.vue"
@@ -68,6 +70,7 @@ const {
   onTriggerClick,
   triggerA11yProps,
 } = useDialogControl({
+  id: HOMEPAGE_CONTENT_SETTINGS_DIALOG,
   visibleRef: isContentSwitcherVisible,
   nodeRef,
   lockBodyScroll,
@@ -108,6 +111,7 @@ const {
       <template v-if="triggerElement">
         <VPopoverContent
           v-if="isLg"
+          :id="HOMEPAGE_CONTENT_SETTINGS_DIALOG"
           z-index="popover"
           :hide="closeContentSwitcher"
           :trap-focus="false"
@@ -124,6 +128,7 @@ const {
 
         <VContentSettingsModalContent
           v-else
+          :id="HOMEPAGE_CONTENT_SETTINGS_DIALOG"
           aria-labelledby="search-type-button"
           :close="closeContentSwitcher"
           :visible="isContentSwitcherVisible"
diff --git a/frontend/src/components/VLicense/VLicenseElements.vue b/frontend/src/components/VLicense/VLicenseElements.vue
index 623402f19b8..8af8d01f3fe 100644
--- a/frontend/src/components/VLicense/VLicenseElements.vue
+++ b/frontend/src/components/VLicense/VLicenseElements.vue
@@ -42,11 +42,11 @@ const getLicenseDescription = (element: string) => {
 </script>
 
 <template>
-  <ul>
+  <ul class="flex flex-col gap-y-2 md:gap-y-4">
     <li
       v-for="element in elementNames"
       :key="element"
-      class="mb-2 flex items-center gap-3 text-sm md:mb-4 md:text-base"
+      class="flex items-center gap-x-3 text-sm md:text-base"
     >
       <VIcon
         view-box="0 0 30 30"
diff --git a/frontend/src/components/VMediaInfo/VMediaLicense.vue b/frontend/src/components/VMediaInfo/VMediaLicense.vue
index de4dc19fa02..43457517450 100644
--- a/frontend/src/components/VMediaInfo/VMediaLicense.vue
+++ b/frontend/src/components/VMediaInfo/VMediaLicense.vue
@@ -36,7 +36,7 @@ const sendVisitLicensePage = () => {
 </script>
 
 <template>
-  <div class="media-attribution">
+  <div class="media-attribution mb-2 md:mb-0">
     <h3 class="description-bold md:heading-6 mb-4">
       {{ headerText }}
     </h3>
diff --git a/frontend/src/components/VModal/VModal.vue b/frontend/src/components/VModal/VModal.vue
index 7df5d073ba5..4afa27c2f53 100644
--- a/frontend/src/components/VModal/VModal.vue
+++ b/frontend/src/components/VModal/VModal.vue
@@ -11,7 +11,7 @@ import VModalContent from "~/components/VModal/VModalContent.vue"
  * NB: Most of these technically default to `undefined` so that the underlying `VModalContent`
  * default for each of them can take over.
  */
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /**
      * Whether the popover should hide when the <kbd>Escape</kbd> key is pressed.
@@ -81,6 +81,11 @@ withDefaults(
      */
     mode?: ModalColorMode
     modalContentClasses?: string
+    /**
+     * The id used to keep track of the modal in the open dialog stack, to enable
+     * nested dialogs.
+     */
+    id: string
   }>(),
   {
     hideOnEsc: true,
@@ -123,6 +128,7 @@ const {
   triggerA11yProps,
   visible: visibleRef,
 } = useDialogControl({
+  id: props.id,
   lockBodyScroll: true,
   nodeRef,
   emit: emit as SetupContext["emit"],
@@ -152,6 +158,7 @@ defineExpose({
     </div>
     <VModalContent
       v-if="triggerRef"
+      :id="id"
       ref="modalContentRef"
       :visible="visibleRef"
       :trigger-element="triggerRef"
@@ -171,6 +178,9 @@ defineExpose({
         <slot name="top-bar" :close="hide" />
       </template>
       <template #title><slot name="title" /></template>
+      <template #close-button="{ close: hide }"
+        ><slot name="close-button" :close="hide"
+      /></template>
       <slot name="default" />
     </VModalContent>
   </div>
diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
index 2a4abb6ccfa..488e626e334 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -4,6 +4,8 @@
  */
 import { toRefs, ref, computed, useAttrs } from "vue"
 
+import { useElementSize } from "@vueuse/core"
+
 import { useDialogContent } from "~/composables/use-dialog-content"
 
 import type { ModalColorMode, ModalVariant } from "~/types/modal"
@@ -16,6 +18,7 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    id: string
     visible: boolean
     hide: () => void
     hideOnEsc?: boolean
@@ -87,6 +90,13 @@ const handleClose = (event: MouseEvent) => {
   props.hide()
 }
 
+const modalHeaderRef = ref<HTMLElement | null>(null)
+const { height: modalHeaderHeight } = useElementSize(
+  modalHeaderRef,
+  { width: 0, height: 0 },
+  { box: "border-box" }
+)
+
 defineExpose({
   dialogRef,
   deactivateFocusTrap,
@@ -108,6 +118,7 @@ defineExpose({
       <!-- re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906 -->
       <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
       <div
+        :id="id"
         ref="dialogRef"
         v-bind="$attrs"
         class="flex flex-col"
@@ -121,9 +132,10 @@ defineExpose({
               variant === 'two-thirds',
             'mt-auto w-full rounded-se-lg rounded-ss-lg bg-overlay':
               variant === 'fit-content',
-            'm-6 max-w-90 rounded sm:m-0': variant === 'centered',
+            'm-6 max-w-90 rounded sm:m-0 sm:w-90': variant === 'centered',
           },
         ]"
+        :style="`--modal-header-height: ${modalHeaderHeight}px;`"
         role="dialog"
         aria-modal="true"
         @keydown="onKeyDown"
@@ -151,10 +163,11 @@ defineExpose({
         </slot>
         <header
           v-if="variant === 'centered'"
+          ref="modalHeaderRef"
           class="flex items-center justify-between p-5 ps-7 sm:p-7 sm:ps-9"
         >
           <slot name="title" />
-          <slot name="close-button">
+          <slot name="close-button" :close="handleClose">
             <VIconButton
               :label="$t('modal.close')"
               :icon-props="{ name: 'close' }"
@@ -208,4 +221,8 @@ by the address bar.
     @apply pb-10;
   }
 }
+.modal-content {
+  max-height: calc(100vh - var(--modal-header-height, 0) - 6rem);
+  overflow-y: scroll;
+}
 </style>
diff --git a/frontend/src/components/VPopover/VPopover.vue b/frontend/src/components/VPopover/VPopover.vue
index d1b87223c5d..dec173ad2bd 100644
--- a/frontend/src/components/VPopover/VPopover.vue
+++ b/frontend/src/components/VPopover/VPopover.vue
@@ -15,6 +15,11 @@ import type { Placement, Strategy } from "@floating-ui/dom"
 
 const props = withDefaults(
   defineProps<{
+    /**
+     * The id used to keep track of the popover in the open dialog stack, to enable
+     * nested dialogs.
+     */
+    id: string
     /**
      * Whether the popover should show when the trigger is hovered on.
      */
@@ -131,6 +136,7 @@ const triggerRef = computed(() =>
 )
 
 const { close, onTriggerClick, triggerA11yProps } = useDialogControl({
+  id: props.id,
   visibleRef,
   emit: emit as SetupContext["emit"],
 })
@@ -162,6 +168,7 @@ defineExpose({
     </div>
     <VPopoverContent
       v-if="triggerRef"
+      :id="id"
       :z-index="zIndex"
       :visible="visibleRef"
       :trigger-element="triggerRef"
diff --git a/frontend/src/components/VPopover/VPopoverContent.vue b/frontend/src/components/VPopover/VPopoverContent.vue
index cefc7392ae5..5640f9973a6 100644
--- a/frontend/src/components/VPopover/VPopoverContent.vue
+++ b/frontend/src/components/VPopover/VPopoverContent.vue
@@ -12,6 +12,7 @@ import type { SetupContext } from "vue"
 
 const props = withDefaults(
   defineProps<{
+    id: string
     visible: boolean
     hide: () => void
     hideOnEsc?: boolean
@@ -62,6 +63,7 @@ const { onKeyDown, onBlur, heightProperties, style } = usePopoverContent({
 <template>
   <div
     v-show="visible"
+    :id="id"
     ref="popoverRef"
     role="dialog"
     aria-modal="true"
diff --git a/frontend/src/composables/use-dialog-control.ts b/frontend/src/composables/use-dialog-control.ts
index a880605c40c..9b229c6bf9f 100644
--- a/frontend/src/composables/use-dialog-control.ts
+++ b/frontend/src/composables/use-dialog-control.ts
@@ -5,22 +5,24 @@ import {
   ref,
   Ref,
   SetupContext,
-  unref,
   watch,
 } from "vue"
 
 import { MaybeRefOrGetter, toValue } from "@vueuse/core"
 
 import { useBodyScrollLock } from "~/composables/use-body-scroll-lock"
+import { useDialogStack } from "~/composables/use-dialog-stack"
 
 type Fn = () => void
 export function useDialogControl({
+  id,
   visibleRef,
   nodeRef,
   lockBodyScroll,
   emit,
   deactivateFocusTrap,
 }: {
+  id: MaybeRefOrGetter<string | undefined>
   visibleRef?: Ref<boolean>
   nodeRef?: Ref<HTMLElement | null>
   lockBodyScroll?: ComputedRef<boolean> | boolean
@@ -59,7 +61,7 @@ export function useDialogControl({
     lock = bodyScroll.lock
     unlock = bodyScroll.unlock
   }
-  const shouldLockBodyScroll = computed(() => unref(lockBodyScroll) ?? false)
+  const shouldLockBodyScroll = computed(() => toValue(lockBodyScroll) ?? false)
   watch(shouldLockBodyScroll, (shouldLock) => {
     if (shouldLock) {
       if (internalVisibleRef.value) {
@@ -70,9 +72,13 @@ export function useDialogControl({
     }
   })
 
-  const open = () => (internalVisibleRef.value = true)
+  const open = () => {
+    internalVisibleRef.value = true
+    pushModalToStack()
+  }
 
   const close = () => {
+    popModalFromStack()
     const fn = toValue(deactivateFocusTrap)
     if (fn) {
       fn()
@@ -80,8 +86,28 @@ export function useDialogControl({
     internalVisibleRef.value = false
   }
 
+  const pushModalToStack = () => {
+    const { push } = useDialogStack()
+    const idValue = toValue(id)
+    if (idValue) {
+      push(idValue)
+    }
+  }
+
+  const popModalFromStack = () => {
+    const openModalStack = useDialogStack()
+    const idValue = toValue(id)
+    if (idValue && openModalStack.indexOf(idValue) > -1) {
+      openModalStack.pop()
+    }
+  }
+
   const onTriggerClick = () => {
-    internalVisibleRef.value = !internalVisibleRef.value
+    if (internalVisibleRef.value) {
+      close()
+    } else {
+      open()
+    }
   }
 
   return {
diff --git a/frontend/src/composables/use-dialog-stack.ts b/frontend/src/composables/use-dialog-stack.ts
new file mode 100644
index 00000000000..8ef2fc38ea5
--- /dev/null
+++ b/frontend/src/composables/use-dialog-stack.ts
@@ -0,0 +1,36 @@
+import { computed, ref } from "vue"
+
+const stack = ref<string[]>([])
+
+/**
+ * This composable allows displaying multiple dialogs on top of each other,
+ * and routing the events to the active, top-most dialog.
+ */
+export const useDialogStack = () => {
+  const push = (id: string) => {
+    stack.value.push(id)
+  }
+  const pop = () => {
+    stack.value.pop()
+  }
+  const clear = () => {
+    stack.value = []
+  }
+  const indexOf = (id: string) => {
+    return stack.value.indexOf(id)
+  }
+
+  /**
+   * The top-level dialog in the UI that intercepts 'outside' events.
+   */
+  const activeDialog = computed(() => stack.value[stack.value.length - 1])
+
+  return {
+    stack,
+    push,
+    pop,
+    clear,
+    indexOf,
+    activeDialog,
+  }
+}
diff --git a/frontend/src/composables/use-event-listener-outside.ts b/frontend/src/composables/use-event-listener-outside.ts
index dcdaf13a1dd..64a1cb17839 100644
--- a/frontend/src/composables/use-event-listener-outside.ts
+++ b/frontend/src/composables/use-event-listener-outside.ts
@@ -1,6 +1,7 @@
-import { Ref, ref, watch } from "vue"
+import { type Ref, ref, watch } from "vue"
 
 import { contains, getDocument, isInDocument } from "~/utils/reakit-utils/dom"
+import { useDialogStack } from "~/composables/use-dialog-stack"
 
 interface Props {
   /**
@@ -67,6 +68,11 @@ export const useEventListenerOutside = ({
         if (trigger && contains(trigger, target)) {
           return
         }
+        // Event is in the top-level dialog, so shouldn't be handled by the
+        // parent dialogs
+        if (useDialogStack().activeDialog.value !== container.id) {
+          return
+        }
 
         listener(event)
       }
diff --git a/frontend/src/composables/use-hide-on-click-outside.ts b/frontend/src/composables/use-hide-on-click-outside.ts
index dfd67f405f9..520fd5545f2 100644
--- a/frontend/src/composables/use-hide-on-click-outside.ts
+++ b/frontend/src/composables/use-hide-on-click-outside.ts
@@ -1,4 +1,4 @@
-import { ref, watch, computed, Ref } from "vue"
+import { ref, watch, computed, type Ref } from "vue"
 
 import { getDocument } from "~/utils/reakit-utils/dom"
 import { useEventListenerOutside } from "~/composables/use-event-listener-outside"
@@ -15,11 +15,10 @@ function useMouseDownTargetRef({
   dialogRef,
   visibleRef,
   hideOnClickOutsideRef,
-}: {
-  dialogRef: Props["dialogRef"]
-  visibleRef: Props["visibleRef"]
-  hideOnClickOutsideRef: Props["hideOnClickOutsideRef"]
-}): Ref<EventTarget> {
+}: Pick<
+  Props,
+  "dialogRef" | "visibleRef" | "hideOnClickOutsideRef"
+>): Ref<EventTarget> {
   const mouseDownTargetRef = ref()
 
   watch(
@@ -82,6 +81,7 @@ export function useHideOnClickOutside({
     eventType: "focusin",
     listener: (event: Event) => {
       const document = getDocument(dialogRef.value)
+
       if (event.target !== document) {
         hideRef.value()
       }
diff --git a/frontend/src/composables/use-popover-content.ts b/frontend/src/composables/use-popover-content.ts
index accde7dac87..bf73fe17e27 100644
--- a/frontend/src/composables/use-popover-content.ts
+++ b/frontend/src/composables/use-popover-content.ts
@@ -10,6 +10,7 @@ import type { Ref, ToRefs, SetupContext } from "vue"
 import type { Placement, Strategy } from "@floating-ui/dom"
 
 export type PopoverContentProps = {
+  id: string
   visible: boolean
   hide: () => void
   hideOnEsc: boolean
diff --git a/frontend/src/constants/dialogs.ts b/frontend/src/constants/dialogs.ts
new file mode 100644
index 00000000000..be97de61771
--- /dev/null
+++ b/frontend/src/constants/dialogs.ts
@@ -0,0 +1,8 @@
+export const CONTENT_REPORT_DIALOG = "content-report-dialog"
+export const SEARCH_TYPES_DIALOG = "search-types-dialog"
+export const EXTERNAL_SEARCH_DIALOG = "external-search-dialog"
+export const CONTENT_SETTINGS_DIALOG = "content-settings-dialog"
+export const HOMEPAGE_CONTENT_SETTINGS_DIALOG =
+  "homepage-content-settings-dialog"
+export const RECENT_SEARCHES_DIALOG = "recent-searches-dialog"
+export const PAGES_DIALOG = "pages-dialog"
diff --git a/frontend/src/layouts/search-layout.vue b/frontend/src/layouts/search-layout.vue
index f9182700640..7ff2f8fc8d9 100644
--- a/frontend/src/layouts/search-layout.vue
+++ b/frontend/src/layouts/search-layout.vue
@@ -70,7 +70,7 @@ provide(IsSidebarVisibleKey, isSidebarVisible)
     <VHeader
       class="header-el"
       :kind="isDesktopLayout ? 'search-desktop' : 'search-mobile'"
-      :show-bottom-border="isHeaderScrolled"
+      :show-bottom-border="isHeaderScrolled || isSidebarVisible"
     />
 
     <aside
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-sm-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-sm-linux.png
index fb3b9bba41b..315eb8a9cfe 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-sm-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-xl-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-xl-linux.png
index 9bfdca40353..2cfb602eccc 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-xl-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-ltr-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-sm-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-sm-linux.png
index 13ad3a07f3b..0a9b2446dee 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-sm-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-xl-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-xl-linux.png
index 2c17e211221..3784f0370df 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-xl-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-audio-sources-popover-rtl-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-sm-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-sm-linux.png
index 2da8adcdeb1..53568a0cdff 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-sm-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-xl-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-xl-linux.png
index 1aa4d089d1e..979e50f58d3 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-xl-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-ltr-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-sm-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-sm-linux.png
index 65c21d943b8..908c6469889 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-sm-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-xl-linux.png b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-xl-linux.png
index ae204e6ee58..8f8cd791fd0 100644
Binary files a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-xl-linux.png and b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts-snapshots/external-image-sources-popover-rtl-xl-linux.png differ
diff --git a/frontend/test/unit/specs/components/v-modal.spec.js b/frontend/test/unit/specs/components/v-modal.spec.js
index e0f0b41019d..3f10ad51857 100644
--- a/frontend/test/unit/specs/components/v-modal.spec.js
+++ b/frontend/test/unit/specs/components/v-modal.spec.js
@@ -31,7 +31,7 @@ const TestWrapper = createApp({}).component("TestWrapper", {
   },
   template: `
     <div>
-      <VModal label="modal label" :initial-focus-element="resolvedInitialFocusElement">
+      <VModal label="modal label" id="modal" :initial-focus-element="resolvedInitialFocusElement">
         <template #trigger="{ a11yProps, visible }">
           <VButton variant="filled-white" size="medium" v-bind="a11yProps">{{ visible }}</VButton>
         </template>
diff --git a/frontend/test/unit/specs/components/v-popover.spec.js b/frontend/test/unit/specs/components/v-popover.spec.js
index 917f851e348..3f38ac67258 100644
--- a/frontend/test/unit/specs/components/v-popover.spec.js
+++ b/frontend/test/unit/specs/components/v-popover.spec.js
@@ -25,7 +25,7 @@ const TestWrapper = createApp({}).component("TestWrapper", {
     <div>
       <!-- This div is a clickable area that is neither the trigger nor the content, useful for testing click-away behavior -->
       <div>External area</div>
-      <VPopover label="Test label" v-bind="popoverProps">
+      <VPopover label="Test label" id="test-popover" v-bind="popoverProps">
         <template #trigger="{ visible, a11yProps }">
           <VButton id="popover-button" variant="bordered-white" size="medium" :pressed="visible" v-bind="a11yProps">{{ visible ? 'Close' : 'Open' }}</VButton>
         </template>