diff --git a/src/components/VHeader/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile.vue
deleted file mode 100644
index 0938b887d6..0000000000
--- a/src/components/VHeader/VHeaderMobile.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-  <header
-    class="main-header z-30 flex w-full items-center justify-between gap-x-2 bg-white px-4 py-3 md:items-stretch md:py-4 md:px-7"
-    :class="{
-      'border-b border-white': !isHeaderScrolled && !isMenuOpen,
-      'border-b border-dark-charcoal-20': isHeaderScrolled || isMenuOpen,
-    }"
-  >
-    <VLogoButton :is-fetching="isFetching" :is-search-route="isSearchRoute" />
-
-    <VSearchBar
-      v-model.trim="searchTerm"
-      class="flex-grow"
-      size="medium"
-      @submit="handleSearch"
-    >
-      <span
-        v-show="searchStatus"
-        class="info mx-4 hidden whitespace-nowrap text-xs font-semibold text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal"
-      >
-        {{ searchStatus }}
-      </span>
-    </VSearchBar>
-    <VModal
-      :label="$t('header.aria.menu').toString()"
-      class="flex items-stretch"
-    >
-      <template #trigger="{ visible, a11Props }">
-        <VContentSettingsButton :is-pressed="visible" v-bind="a11Props" />
-      </template>
-      <template #default>
-        <nav
-          id="content-switcher-modal"
-          class="p-6"
-          aria-labelledby="content-switcher-heading"
-        >
-          <VSearchTypes ref="searchTypesRef" size="small" :use-links="true" />
-        </nav>
-      </template>
-    </VModal>
-  </header>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  ref,
-  useContext,
-  useRouter,
-} from '@nuxtjs/composition-api'
-
-import { ALL_MEDIA, searchPath } from '~/constants/media'
-import { isMinScreen } from '~/composables/use-media-query'
-import { useMatchSearchRoutes } from '~/composables/use-match-routes'
-import { useI18n } from '~/composables/use-i18n'
-import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
-import { useMediaStore } from '~/stores/media'
-import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
-
-import VContentSettingsButton from '~/components/VHeader/VContentSettingsButton.vue'
-import VLogoButton from '~/components/VHeader/VLogoButton.vue'
-import VModal from '~/components/VModal/VModal.vue'
-import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
-import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
-
-import closeIcon from '~/assets/icons/close.svg'
-
-const menus = {
-  FILTERS: 'filters',
-  CONTENT_SWITCHER: 'content-switcher',
-}
-type HeaderMenu = 'filters' | 'content-switcher'
-
-/**
- * The mobile search header component.
- */
-export default defineComponent({
-  name: 'VHeaderMobile',
-  components: {
-    VContentSettingsButton,
-    VLogoButton,
-    VModal,
-    VSearchBar,
-    VSearchTypes,
-  },
-  setup() {
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { app } = useContext()
-    const i18n = useI18n()
-    const router = useRouter()
-
-    const { matches: isSearchRoute } = useMatchSearchRoutes()
-
-    const isHeaderScrolled = inject('isHeaderScrolled', false)
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
-
-    const menuModalRef = ref(null)
-
-    const openMenu = ref<null | HeaderMenu>(null)
-    const isMenuOpen = computed(() => openMenu.value !== null)
-
-    const openMenuModal = (menuName: HeaderMenu) => {
-      if (openMenu.value !== null) {
-        close()
-      }
-      openMenu.value = menuName
-    }
-    const close = () => {
-      openMenu.value = null
-    }
-
-    const isFetching = computed(() => {
-      return mediaStore.fetchState.isFetching
-    })
-
-    const resultsCount = computed(() => mediaStore.resultCount)
-    const { getI18nCount } = useI18nResultsCount()
-    /**
-     * Additional text at the end of the search bar.
-     * Shows the loading state or result count.
-     */
-    const searchStatus = computed(() => {
-      if (!isSearchRoute.value || searchStore.searchTerm === '') return ''
-      if (isFetching.value) return i18n.t('header.loading')
-      return getI18nCount(resultsCount.value)
-    })
-
-    const localSearchTerm = ref(searchStore.searchTerm)
-    let searchTermChanged = computed(() => {
-      return searchStore.searchTerm !== localSearchTerm.value
-    })
-    /**
-     * Search term has a getter and setter to be used as a v-model.
-     * To prevent sending unnecessary requests, we also keep track of whether
-     * the search term was changed.
-     */
-    const searchTerm = computed({
-      get: () => localSearchTerm.value,
-      set: (value: string) => {
-        localSearchTerm.value = value
-      },
-    })
-
-    /**
-     * Called when the 'search' button in the header is clicked.
-     * There are several scenarios:
-     * - search term hasn't changed:
-     *   - on a search route, do nothing.
-     *   - on other routes: set searchType to 'All content', reset the media,
-     *     change the path to `/search/` (All content).
-     * - search term changed:
-     *   - on a search route: Update the store searchTerm value, update query `q` param, reset media,
-     *     fetch new media.
-     *   - on other routes: Update the store searchTerm value, set searchType to 'All content', reset media,
-     *     update query `q` param.
-     * Updating the path causes the `search.vue` page's route watcher
-     * to run and fetch new media.
-     */
-    const handleSearch = async () => {
-      window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
-      const mediaStore = useMediaStore()
-      const searchStore = useSearchStore()
-      const searchType = isSearchRoute.value
-        ? searchStore.searchType
-        : ALL_MEDIA
-      if (
-        isSearchRoute.value &&
-        (!searchTermChanged.value || searchTerm.value === '')
-      )
-        return
-      if (searchTermChanged.value) {
-        await mediaStore.clearMedia()
-
-        searchStore.setSearchTerm(searchTerm.value)
-        searchStore.setSearchType(searchType)
-      }
-      document.activeElement?.blur()
-      if (isSearchTypeSupported(searchType)) {
-        const newPath = app.localePath({
-          path: searchPath(searchType),
-          query: searchStore.searchQueryParams,
-        })
-        router.push(newPath)
-      }
-    }
-    const areFiltersDisabled = computed(
-      () => !searchStore.searchTypeIsSupported
-    )
-
-    return {
-      closeIcon,
-      isFetching,
-
-      isHeaderScrolled,
-      isMinScreenMd,
-      isSearchRoute,
-      areFiltersDisabled,
-
-      menuModalRef,
-
-      openMenu,
-      openMenuModal,
-      isMenuOpen,
-
-      menus,
-      close,
-
-      handleSearch,
-      searchStatus,
-      searchTerm,
-    }
-  },
-})
-</script>
diff --git a/src/components/VHeader/VHeaderMobile/VBackButton.vue b/src/components/VHeader/VHeaderMobile/VBackButton.vue
new file mode 100644
index 0000000000..367e5e20bd
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VBackButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <VButton
+    size="disabled"
+    class="icon-button flex h-12 w-12 flex-shrink-0 rotate-90 items-center justify-center bg-tx active:shadow-ring"
+    variant="plain--avoid"
+    aria-label="Go back"
+    @click="$emit('click')"
+  >
+    <span
+      class="flex h-8 w-8 items-center justify-center rounded-sm bg-dark-charcoal-10"
+    >
+      <VIcon
+        class="bg-red pointer-events-none rounded-sm bg-dark-charcoal-10"
+        :icon-path="caretDownIcon"
+      />
+    </span>
+  </VButton>
+</template>
+
+<script lang="ts">
+import { defineEvent } from '~/types/emits'
+
+import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import caretDownIcon from '~/assets/icons/caret-down.svg'
+
+export default {
+  name: 'VBackButton',
+  components: { VButton, VIcon },
+  emits: {
+    click: defineEvent(),
+  },
+  setup() {
+    return {
+      caretDownIcon,
+    }
+  },
+}
+</script>
diff --git a/src/components/VHeader/VContentSettingsButton.vue b/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
similarity index 100%
rename from src/components/VHeader/VContentSettingsButton.vue
rename to src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
diff --git a/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue b/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
new file mode 100644
index 0000000000..1f5f48cd45
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
@@ -0,0 +1,45 @@
+<template>
+  <VModal
+    :label="$t('header.aria.menu').toString()"
+    variant="search"
+    :hide-on-esc="true"
+  >
+    <template #trigger="{ visible, a11Props }">
+      <VContentSettingsButton
+        ref="contentSettingsButtonRef"
+        :is-pressed="visible"
+        v-bind="a11Props"
+        class="me-2"
+      />
+    </template>
+    <template #default>
+      <nav
+        id="content-switcher-modal"
+        class="p-6"
+        aria-labelledby="content-switcher-heading"
+      >
+        <VSearchTypes
+          ref="searchTypesRef"
+          active-item="image"
+          size="small"
+          :use-links="true"
+        />
+      </nav>
+    </template>
+  </VModal>
+</template>
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton.vue'
+import VModal from '~/components/VModal/VModal.vue'
+import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
+
+/**
+ * This is a temporary stub component that needs to be replaced with the actual ContentSettingsModal
+ */
+export default defineComponent({
+  name: 'VContentSettingsModal',
+  components: { VContentSettingsButton, VModal, VSearchTypes },
+})
+</script>
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
new file mode 100644
index 0000000000..a15af452d1
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -0,0 +1,262 @@
+<template>
+  <header
+    class="main-header z-30 flex w-full items-center border-b border-tx bg-white px-4 py-3 md:py-4 md:px-7"
+    :class="{ 'border-dark-charcoal-20': isHeaderScrolled }"
+  >
+    <form
+      class="search-bar group flex h-12 w-full flex-row items-center overflow-hidden rounded-sm border border-1.5"
+      :class="
+        searchBarIsActive
+          ? 'border-pink bg-white'
+          : 'border-tx bg-dark-charcoal-06'
+      "
+      @submit.prevent="handleSearch"
+    >
+      <slot name="start">
+        <VLogoButton
+          v-if="!searchBarIsActive"
+          :is-fetching="isFetching"
+          :is-search-route="true"
+          class="w-12"
+        />
+        <VBackButton v-else @click="handleBack" />
+      </slot>
+      <input
+        id="search-bar"
+        ref="searchInputRef"
+        name="q"
+        :placeholder="$t('hero.search.placeholder').toString()"
+        type="search"
+        class="search-field h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-dark-charcoal-70 placeholder-dark-charcoal-70 ms-1 focus-visible:outline-none"
+        :value="searchTerm"
+        :aria-label="
+          $t('search.search-bar-label', { openverse: 'Openverse' }).toString()
+        "
+        @input="updateSearchText"
+        @focus="activate"
+        @blur="handleBlur"
+      />
+      <slot>
+        <VIconButton
+          v-if="searchBarIsActive"
+          ref="closeButton"
+          :button-props="{ variant: 'plain' }"
+          :icon-props="{ iconPath: closeIcon }"
+          size="search-medium"
+          class="border-tx text-dark-charcoal-70 focus-visible:ring-offset-tx"
+          :aria-label="$t('modal.close')"
+          @click="clearSearchText"
+        />
+        <template v-else>
+          <span
+            v-show="searchStatus"
+            class="info mx-4 hidden whitespace-nowrap text-xs group-hover:text-dark-charcoal group-focus:text-dark-charcoal md:flex"
+          >
+            {{ searchStatus }}
+          </span>
+          <VContentSettingsModal />
+        </template>
+      </slot>
+    </form>
+  </header>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  nextTick,
+  ref,
+  useContext,
+  useRouter,
+  watch,
+} from '@nuxtjs/composition-api'
+
+import { ensureFocus } from '~/utils/reakit-utils/focus'
+
+import { searchPath } from '~/constants/media'
+
+import { useI18n } from '~/composables/use-i18n'
+import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
+
+import { useMediaStore } from '~/stores/media'
+import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
+
+import { IsHeaderScrolledKey } from '~/types/provides'
+
+import VBackButton from '~/components/VHeader/VHeaderMobile/VBackButton.vue'
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+
+import VContentSettingsModal from '~/components/VHeader/VHeaderMobile/VContentSettingsModal.vue'
+
+import closeIcon from '~/assets/icons/close-small.svg'
+
+/**
+ * Displays a text field for a search query and is attached to an action button
+ * that fires a search request. The loading state and number of hits are also
+ * displayed in the bar itself.
+ */
+export default defineComponent({
+  name: 'VCompositeSearchBar',
+  components: {
+    VContentSettingsModal,
+    VBackButton,
+    VIconButton,
+    VLogoButton,
+  },
+  setup() {
+    const searchInputRef = ref<HTMLInputElement | null>(null)
+
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+    const { app } = useContext()
+    const i18n = useI18n()
+    const router = useRouter()
+
+    const searchBarIsActive = ref(false)
+
+    const isHeaderScrolled = inject(IsHeaderScrolledKey)
+
+    const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+    const resultsCount = computed(() => mediaStore.resultCount)
+    const { getI18nCount } = useI18nResultsCount()
+    /**
+     * Additional text at the end of the search bar.
+     * Shows the loading state or result count.
+     */
+    const searchStatus = computed<string>(() => {
+      if (searchStore.searchTerm === '') return ''
+      if (isFetching.value) return i18n.t('header.loading').toString()
+      return getI18nCount(resultsCount.value)
+    })
+
+    const localSearchTerm = ref(searchStore.searchTerm)
+    let searchTermChanged = computed(() => {
+      return searchStore.searchTerm !== localSearchTerm.value
+    })
+    /**
+     * Search term has a getter and setter to be used as a v-model.
+     * To prevent sending unnecessary requests, we also keep track of whether
+     * the search term was changed.
+     */
+    const searchTerm = computed({
+      get: () => localSearchTerm.value,
+      set: (value: string) => {
+        localSearchTerm.value = value
+      },
+    })
+
+    /**
+     * Called when the 'search' button in the header is clicked.
+     * There are several scenarios:
+     * - search term hasn't changed:
+     *   - on a search route, do nothing.
+     *   - on other routes: set searchType to 'All content', reset the media,
+     *     change the path to `/search/` (All content).
+     * - search term changed:
+     *   - on a search route: Update the store searchTerm value, update query `q` param, reset media,
+     *     fetch new media.
+     *   - on other routes: Update the store searchTerm value, set searchType to 'All content', reset media,
+     *     update query `q` param.
+     * Updating the path causes the `search.vue` page's route watcher
+     * to run and fetch new media.
+     */
+    const handleSearch = async () => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+      deactivate()
+      const mediaStore = useMediaStore()
+      const searchStore = useSearchStore()
+      const searchType = searchStore.searchType
+      if (!searchTermChanged.value || searchTerm.value === '') return
+      if (searchTermChanged.value) {
+        await mediaStore.clearMedia()
+
+        searchStore.setSearchTerm(searchTerm.value)
+        searchStore.setSearchType(searchType)
+      }
+
+      if (isSearchTypeSupported(searchType)) {
+        const newPath = app.localePath({
+          path: searchPath(searchType),
+          query: searchStore.searchQueryParams,
+        })
+        router.push(newPath)
+      }
+    }
+
+    const isRecentSearchesModalOpen = ref(false)
+
+    const activate = () => (searchBarIsActive.value = true)
+    const deactivate = () => (searchBarIsActive.value = false)
+
+    watch(searchBarIsActive, (active) => {
+      if (active) {
+        isRecentSearchesModalOpen.value = true
+        /**
+         * Without `nextTick`, the search bar is not focused on click in Firefox
+         */
+        nextTick(() => ensureFocus(searchInputRef.value))
+      } else {
+        isRecentSearchesModalOpen.value = false
+        if (localSearchTerm.value === '' && searchStore.searchTerm !== '') {
+          localSearchTerm.value = searchStore.searchTerm
+        }
+      }
+    })
+
+    const updateSearchText = (event: Event) => {
+      searchTerm.value = (event.target as HTMLInputElement).value
+    }
+
+    const clearSearchText = () => {
+      searchTerm.value = ''
+      ensureFocus(searchInputRef.value)
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      if (e.relatedTarget === null) {
+        deactivate()
+      }
+    }
+
+    const handleBack = () => {
+      deactivate()
+    }
+
+    return {
+      closeIcon,
+      searchInputRef,
+
+      isHeaderScrolled,
+      isFetching,
+
+      isRecentSearchesModalOpen,
+      searchBarIsActive,
+      activate,
+      deactivate,
+
+      searchStatus,
+      searchTerm,
+      clearSearchText,
+      updateSearchText,
+      handleSearch,
+
+      handleBlur,
+      handleBack,
+    }
+  },
+})
+</script>
+
+<style>
+/* Removes the cross icon to clear the field */
+.search-bar input[type='search']::-webkit-search-decoration,
+.search-bar input[type='search']::-webkit-search-cancel-button,
+.search-bar input[type='search']::-webkit-search-results-button,
+.search-bar input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+</style>
diff --git a/src/components/VHeader/meta/VContentSettingsButton.stories.mdx b/src/components/VHeader/meta/VContentSettingsButton.stories.mdx
index 9e9da723f6..e08f4a8d7e 100644
--- a/src/components/VHeader/meta/VContentSettingsButton.stories.mdx
+++ b/src/components/VHeader/meta/VContentSettingsButton.stories.mdx
@@ -5,10 +5,10 @@ import {
   Meta,
   Story,
 } from '@storybook/addon-docs'
-import VContentSettingsButton from '~/components/VHeader/VContentSettingsButton.vue'
+import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton.vue'
 
 <Meta
-  title="Components/VHeader/VContentSettingsButton"
+  title="Components/VHeader/VHeaderMobile/VContentSettingsButton"
   component={VContentSettingsButton}
   decorators={[
     () => ({
diff --git a/src/components/VHeader/meta/VHeaderMobile.stories.mdx b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
index 0d14c54440..3c64bc62ab 100644
--- a/src/components/VHeader/meta/VHeaderMobile.stories.mdx
+++ b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
@@ -5,19 +5,11 @@ import {
   Meta,
   Story,
 } from '@storybook/addon-docs'
-import VHeaderMobile from '~/components/VHeader/VHeaderMobile.vue'
+import VHeaderMobile from '~/components/VHeader/VHeaderMobile/VHeaderMobile.vue'
 
 <Meta
-  title="Components/VHeader/VHeaderMobile"
+  title="Components/VHeader/VHeaderMobile/VHeaderMobile"
   component={VHeaderMobile}
-  argTypes={{
-    input: {
-      action: 'input',
-    },
-    submit: {
-      action: 'submit',
-    },
-  }}
 />
 
 export const Template = (args) => ({
diff --git a/src/components/VModal/VModal.vue b/src/components/VModal/VModal.vue
index d0dd3908cc..f2aa683451 100644
--- a/src/components/VModal/VModal.vue
+++ b/src/components/VModal/VModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="nodeRef">
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
-    <div ref="triggerContainerRef" @click="onTriggerClick">
+    <div ref="triggerContainerRef" class="flex" @click="onTriggerClick">
       <!--
         @slot The trigger. Should be a button 99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the dialog will not open.
           @binding {object} a11yProps Props to v-bind to the trigger element to ensure accessibility
diff --git a/src/composables/use-match-routes.ts b/src/composables/use-match-routes.ts
index e3c62f2bcc..488d5c3248 100644
--- a/src/composables/use-match-routes.ts
+++ b/src/composables/use-match-routes.ts
@@ -6,7 +6,7 @@ import {
   Ref,
 } from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, searchTypes } from '~/constants/media'
+import { ALL_MEDIA, searchTypes, supportedSearchTypes } from '~/constants/media'
 
 /**
  * Reactive property that returns true only on the matching routes.
@@ -50,4 +50,17 @@ export const useMatchSearchRoutes = () => {
   return useMatchRoute(routes)
 }
 
+/**
+ * Reactive property that returns true only on the `search` routes.
+ * Homepage, single image result and other content pages return `false`
+ */
+export const useMatchSingleResultRoutes = () => {
+  const routes = [
+    ...supportedSearchTypes
+      .filter((name) => name !== ALL_MEDIA)
+      .map((name) => `${name}-id`),
+  ]
+  return useMatchRoute(routes)
+}
+
 export const useMatchHomeRoute = () => useMatchRoute(['index'])
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 5f47f10989..f71974ef8c 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -5,7 +5,7 @@
       <VMigrationNotice />
       <VTranslationStatusBanner />
       <template v-if="isNewHeaderEnabled">
-        <template v-if="isSearchRoute">
+        <template v-if="isSearchHeader">
           <VHeaderDesktop v-if="isMinScreenLg" />
           <VHeaderMobile v-else />
         </template>
@@ -48,7 +48,10 @@ import {
 import { PortalTarget as VTeleportTarget } from 'portal-vue'
 
 import { useWindowScroll } from '~/composables/use-window-scroll'
-import { useMatchSearchRoutes } from '~/composables/use-match-routes'
+import {
+  useMatchSearchRoutes,
+  useMatchSingleResultRoutes,
+} from '~/composables/use-match-routes'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useFeatureFlagStore } from '~/stores/feature-flag'
@@ -75,7 +78,8 @@ const embeddedPage = {
     VHeaderOld,
     VHeaderDesktop: () => import('~/components/VHeader/VHeaderDesktop.vue'),
     VHeaderInternal: () => import('~/components/VHeader/VHeaderInternal.vue'),
-    VHeaderMobile: () => import('~/components/VHeader/VHeaderMobile.vue'),
+    VHeaderMobile: () =>
+      import('~/components/VHeader/VHeaderMobile/VHeaderMobile.vue'),
     VFooter,
     VModalTarget,
     VTeleportTarget,
@@ -92,6 +96,10 @@ const embeddedPage = {
 
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
     const { matches: isSearchRoute } = useMatchSearchRoutes()
+    const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
+    const isSearchHeader = computed(
+      () => isSearchRoute.value || isSingleResultRoute.value
+    )
     const mounted = ref(false)
     onMounted(() => {
       mounted.value = true
@@ -146,6 +154,7 @@ const embeddedPage = {
       isMinScreenLg,
       isSidebarVisible,
       isSearchRoute,
+      isSearchHeader,
       headerHasTwoRows,
       isNewHeaderEnabled,
     }
diff --git a/tsconfig.json b/tsconfig.json
index b2c8893954..f77e51aeb4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -78,7 +78,7 @@
     "src/components/VErrorSection/VErrorImage.vue",
     "src/components/VFilters/VLicenseExplanation.vue",
     "src/components/VHeader/VFilterButton.vue",
-    "src/components/VHeader/VSearchBar/**.vue",
+    //    "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VHeader/VPageLinks.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
     "src/pages/feedback.vue",