diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
index a2bb378729..f16a6d35db 100644
--- a/src/components/VContentSwitcher/VMobileMenuModal.vue
+++ b/src/components/VContentSwitcher/VMobileMenuModal.vue
@@ -8,7 +8,7 @@
         aria-controls="content-switcher-modal"
       />
     </div>
-    <VMobileModalContent
+    <VModalContent
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :hide="close"
@@ -29,7 +29,7 @@
         />
         <VPageList layout="columns" class="mt-10" />
       </nav>
-    </VMobileModalContent>
+    </VModalContent>
   </div>
 </template>
 
@@ -47,7 +47,7 @@ import usePages from '~/composables/use-pages'
 import useSearchType from '~/composables/use-search-type'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
@@ -55,7 +55,7 @@ import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.v
 export default defineComponent({
   name: 'VMobileMenuModal',
   components: {
-    VMobileModalContent,
+    VModalContent,
     VSearchTypes,
     VPageList,
     VSearchTypeButton,
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index ae7f346317..829de9f5ac 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -35,7 +35,7 @@ import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import VSidebarContent from '~/components/VHeader/VSidebarContent.vue'
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 
 export default {
   name: 'VHeaderFilter',
@@ -43,7 +43,7 @@ export default {
     VFilterButton,
     VSearchGridFilter,
     VSidebarContent,
-    VMobileModalContent,
+    VModalContent,
     VTeleport,
   },
   emits: [
@@ -72,7 +72,7 @@ export default {
     const isHeaderScrolled = inject('isHeaderScrolled')
 
     /** @type { import('@nuxtjs/composition-api').Ref<import('@nuxtjs/composition-api').Component> } */
-    const filterComponent = ref(VMobileModalContent)
+    const filterComponent = ref(VModalContent)
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -136,7 +136,7 @@ export default {
           filterComponent.value = VSidebarContent
           options.value = desktopOptions
         } else {
-          filterComponent.value = VMobileModalContent
+          filterComponent.value = VModalContent
           options.value = mobileOptions
         }
       },
diff --git a/src/components/VHeader/VPageMenu/VMobilePageMenu.vue b/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
index ea20a17dbf..f5cc3abd04 100644
--- a/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
+++ b/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
@@ -9,7 +9,7 @@
       <!-- eslint-enable vuejs-accessibility/click-events-have-key-events -->
       <VPageMenuButton :a11y-props="triggerA11yProps" />
     </div>
-    <VMobileModalContent
+    <VModalContent
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :hide="close"
@@ -18,7 +18,7 @@
       <nav class="p-4">
         <VPageList layout="columns" @click="closeMenu" />
       </nav>
-    </VMobileModalContent>
+    </VModalContent>
   </div>
 </template>
 
@@ -27,13 +27,13 @@ import { computed, reactive, ref, watch } from '@nuxtjs/composition-api'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
-import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
+import VModalContent from '~/components/VModal/VModalContent.vue'
 import VPageMenuButton from '~/components/VHeader/VPageMenu/VPageMenuButton.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 
 export default {
   name: 'VMobilePageMenu',
-  components: { VMobileModalContent, VPageMenuButton, VPageList },
+  components: { VModalContent, VPageMenuButton, VPageList },
   setup(_, { emit }) {
     const modalRef = ref(null)
 
diff --git a/src/components/VModal/VMobileModalContent.vue b/src/components/VModal/VMobileModalContent.vue
deleted file mode 100644
index 546d201ea2..0000000000
--- a/src/components/VModal/VMobileModalContent.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <VTeleport v-if="visible" to="modal">
-    <!-- Prevent FocusTrap from trying to focus the first element. We already do that in a more flexible, adaptive way in our Dialog composables. -->
-    <FocusTrap :initial-focus="() => false">
-      <div :class="$style.overlay">
-        <div
-          ref="dialogRef"
-          v-bind="$attrs"
-          class="flex flex-col w-full"
-          role="dialog"
-          aria-modal="true"
-          v-on="$listeners"
-          @keydown="onKeyDown"
-          @blur="onBlur"
-        >
-          <div class="w-full flex justify-between px-4 py-3 shrink-0">
-            <VLogoButton
-              :is-fetching="false"
-              :is-header-scrolled="false"
-              :is-search-route="true"
-            />
-            <VButton
-              size="disabled"
-              variant="plain"
-              class="py-2 px-4 font-semibold text-sr"
-              @click="hide()"
-            >
-              {{ $t('modal.close') }}
-              <VIcon :icon-path="closeIcon" class="ms-2" />
-            </VButton>
-          </div>
-
-          <div
-            class="w-full flex-grow align-bottom bg-white rounded-t-sm text-left overflow-y-auto"
-          >
-            <slot />
-          </div>
-        </div>
-      </div>
-    </FocusTrap>
-  </VTeleport>
-</template>
-
-<script>
-import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
-import { FocusTrap } from 'focus-trap-vue'
-
-import { useDialogContent } from '~/composables/use-dialog-content'
-import { warn } from '~/utils/console'
-
-import VTeleport from '~/components/VTeleport/VTeleport.vue'
-import VButton from '~/components/VButton.vue'
-import VIcon from '~/components/VIcon/VIcon.vue'
-import VLogoButton from '~/components/VHeader/VLogoButton.vue'
-
-import closeIcon from '~/assets/icons/close.svg'
-
-/**
- * Renders the inner content of a modal and manages focus.
- */
-const VMobileModalContent = defineComponent({
-  name: 'VMobileModalContent',
-  components: {
-    VLogoButton,
-    VTeleport,
-    VButton,
-    VIcon,
-    FocusTrap,
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    hide: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<() => void>} */ (
-        Function
-      ),
-      required: true,
-    },
-    hideOnEsc: {
-      type: Boolean,
-      default: true,
-    },
-    hideOnClickOutside: {
-      type: Boolean,
-      default: true,
-    },
-    autoFocusOnShow: {
-      type: Boolean,
-      default: true,
-    },
-    autoFocusOnHide: {
-      type: Boolean,
-      default: true,
-    },
-    triggerElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
-    },
-    initialFocusElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
-      required: false,
-    },
-  },
-  setup(props, { emit, attrs }) {
-    if (!attrs['aria-label'] && !attrs['aria-labelledby']) {
-      warn('You should provide either `aria-label` or `aria-labelledby` props.')
-    }
-
-    const propsRefs = toRefs(props)
-    const dialogRef = ref()
-    const { onKeyDown, onBlur } = useDialogContent({
-      dialogRef,
-      visibleRef: propsRefs.visible,
-      autoFocusOnShowRef: propsRefs.autoFocusOnShow,
-      autoFocusOnHideRef: propsRefs.autoFocusOnHide,
-      triggerElementRef: propsRefs.triggerElement,
-      hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
-      hideRef: propsRefs.hide,
-      hideOnEscRef: propsRefs.hideOnEsc,
-      initialFocusElementRef: propsRefs.initialFocusElement,
-      emit,
-    })
-
-    return { dialogRef, onKeyDown, onBlur, closeIcon }
-  },
-})
-
-export default VMobileModalContent
-</script>
-
-<style module>
-.overlay {
-  @apply flex justify-center z-50 fixed inset-0 min-h-screen bg-white;
-}
-</style>
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index 49e269e1b7..2dd70c2982 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -3,31 +3,49 @@
     <!-- Prevent FocusTrap from trying to focus the first element. We already do that in a more flexible, adaptive way in our Dialog composables. -->
     <FocusTrap :initial-focus="() => false">
       <div
-        class="flex justify-center z-10 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen"
+        class="flex justify-center z-10 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen overflow-y-auto"
       >
         <div
           ref="dialogRef"
           v-bind="$attrs"
-          class="w-4/5 flex flex-col"
+          class="w-full md:max-w-[768px] lg:w-[768px] xl:max-w-[1024px] xl:w-[1024px] flex flex-col"
           role="dialog"
           aria-modal="true"
           v-on="$listeners"
           @keydown="onKeyDown"
           @blur="onBlur"
         >
-          <div class="w-full flex justify-end">
-            <VButton
-              size="disabled"
-              variant="plain"
-              class="text-white py-2"
-              @click="hide()"
+          <slot name="top-bar" :close="hide">
+            <!--
+              These specific padding and margin values serve to
+              visually align the Openverse logo button in the modal
+              with the header logo button so that there isn't a
+              jarring "shifting" effect when opening the mobile modal.
+            -->
+            <div
+              class="w-full flex justify-between md:justify-end bg-white md:bg-tx ps-4 pe-3 md:px-0 py-4 md:py-3 shrink-0"
             >
-              {{ $t('modal.close') }} <VIcon :icon-path="closeIcon" />
-            </VButton>
-          </div>
+              <VLogoButton
+                class="md:hidden"
+                :is-fetching="false"
+                :is-header-scrolled="false"
+                :is-search-route="true"
+              />
+              <VButton
+                ref="closeButton"
+                size="disabled"
+                variant="plain"
+                class="md:text-white text-sr md:text-base"
+                @click="hide()"
+              >
+                {{ $t('modal.close') }}
+                <VIcon :icon-path="closeIcon" class="ms-2" :size="5" />
+              </VButton>
+            </div>
+          </slot>
 
           <div
-            class="w-full flex-grow align-bottom bg-white rounded-t-sm text-left overflow-y-auto"
+            class="w-full flex-grow align-bottom bg-white md:rounded-t-md text-left"
           >
             <slot />
           </div>
@@ -38,7 +56,7 @@
 </template>
 
 <script>
-import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
+import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 
 import { useDialogContent } from '~/composables/use-dialog-content'
@@ -47,6 +65,7 @@ import { warn } from '~/utils/console'
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 
 import closeIcon from '~/assets/icons/close.svg'
 
@@ -55,7 +74,7 @@ import closeIcon from '~/assets/icons/close.svg'
  */
 const VModalContent = defineComponent({
   name: 'VModalContent',
-  components: { VTeleport, VButton, VIcon, FocusTrap },
+  components: { VTeleport, VButton, VIcon, FocusTrap, VLogoButton },
   props: {
     visible: {
       type: Boolean,
@@ -101,6 +120,10 @@ const VModalContent = defineComponent({
     }
 
     const propsRefs = toRefs(props)
+    const closeButton = ref()
+    const initialFocusElement = computed(
+      () => props.initialFocusElement || closeButton.value?.$el
+    )
     const dialogRef = ref()
     const { onKeyDown, onBlur } = useDialogContent({
       dialogRef,
@@ -111,11 +134,17 @@ const VModalContent = defineComponent({
       hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
       hideRef: propsRefs.hide,
       hideOnEscRef: propsRefs.hideOnEsc,
-      initialFocusElementRef: propsRefs.initialFocusElement,
+      initialFocusElementRef: initialFocusElement,
       emit,
     })
 
-    return { dialogRef, onKeyDown, onBlur, closeIcon }
+    return {
+      dialogRef,
+      onKeyDown,
+      onBlur,
+      closeIcon,
+      closeButton,
+    }
   },
 })