diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index fc85a732a8..279d07da85 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -323,25 +323,43 @@ a.button {
 .action-menu {
   @apply border border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
-.action-menu-secondary {
-  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+.action-menu-pressed {
+  @apply border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
 }
 
-.action-menu-secondary-pressed {
-  @apply border-tx bg-dark-charcoal text-white;
+/**
+Similar to `action-menu`, but always has a border, not only on hover.
+https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=1684%3A3678
+ */
+.action-menu-bordered {
+  @apply border border-dark-charcoal-20 bg-white text-dark-charcoal focus-visible:border-tx;
 }
-
-.action-menu-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-tx;
+.action-menu-bordered-pressed {
+  @apply border-dark-charcoal bg-dark-charcoal text-white hover:bg-dark-charcoal-80;
 }
 
 .action-menu-muted {
   @apply border border-tx bg-dark-charcoal-10 text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
 .action-menu-muted-pressed {
-  @apply border border-tx bg-dark-charcoal text-white;
+  @apply border border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
+}
+
+.action-menu[disabled='disabled'],
+.action-menu[aria-disabled='true'],
+.action-menu-muted[disabled='disabled'],
+.action-menu-muted[aria-disabled='true'],
+.action-menu-bordered[disabled='disabled'],
+.action-menu-bordered[aria-disabled='true'] {
+  @apply border-dark-charcoal-10 bg-dark-charcoal-10 text-dark-charcoal-40;
+}
+
+.action-menu-secondary {
+  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+}
+
+.action-menu-secondary-pressed {
+  @apply border-tx bg-dark-charcoal text-white;
 }
 
 .full {
diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
deleted file mode 100644
index 0f57e76ed1..0000000000
--- a/src/components/VContentSwitcher/VMobileMenuModal.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <VModal
-    ref="nodeRef"
-    class="mobile-menu ms-auto md:ms-0"
-    :label="$t('header.filter-button.simple').toString()"
-    :initial-focus-element="initialFocusElement"
-  >
-    <template #trigger="{ a11yProps, visible }">
-      <VSearchTypeButton
-        :a11y-props="a11yProps"
-        :visible="visible"
-        :active-item="activeItem"
-        aria-controls="content-switcher-modal"
-      />
-    </template>
-    <nav
-      id="content-switcher-modal"
-      class="p-6"
-      aria-labelledby="content-switcher-heading"
-    >
-      <VSearchTypes
-        ref="searchTypesRef"
-        size="small"
-        :active-item="content.activeType.value"
-        :use-links="true"
-        @select="selectItem"
-      />
-      <VPageList layout="columns" class="mt-10" />
-    </nav>
-  </VModal>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
-
-import usePages from '~/composables/use-pages'
-import useSearchType from '~/composables/use-search-type'
-
-import type { SupportedSearchType } from '~/constants/media'
-
-import VModal from '~/components/VModal/VModal.vue'
-import VPageList from '~/components/VHeaderOld/VPageMenu/VPageList.vue'
-import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
-import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
-
-export default defineComponent({
-  name: 'VMobileMenuModal',
-  components: {
-    VModal,
-    VPageList,
-    VSearchTypeButton,
-    VSearchTypes,
-  },
-  props: {
-    activeItem: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(_, { emit }) {
-    const content = useSearchType()
-    const pages = usePages()
-
-    const searchTypesRef = ref<InstanceType<typeof VSearchTypes> | null>(null)
-    const nodeRef = ref(null)
-
-    const initialFocusElement = computed(() => {
-      return searchTypesRef.value?.$el
-        ? (searchTypesRef.value.$el as HTMLElement).querySelector<HTMLElement>(
-            '[aria-checked="true"]'
-          )
-        : null
-    })
-
-    const selectItem = (item: SupportedSearchType) => emit('select', item)
-
-    return {
-      pages,
-      content,
-      nodeRef,
-      searchTypesRef,
-
-      selectItem,
-      initialFocusElement,
-    }
-  },
-})
-</script>
diff --git a/src/components/VContentSwitcher/VSearchTypeButton.vue b/src/components/VContentSwitcher/VSearchTypeButton.vue
index 27eaecd15e..d810fd2729 100644
--- a/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -1,11 +1,7 @@
 <template>
   <VButton
-    class="flex flex-row py-2 text-sr font-semibold md:text-base"
-    :class="[
-      sizeClasses,
-      isHeaderScrolled ? 'max-w-[10rem] sm:max-w-[20rem] md:max-w-[16rem]' : '',
-    ]"
-    :variant="buttonVariant"
+    class="flex h-12 w-12 flex-row xl:w-auto xl:px-2 xl:ps-3"
+    variant="action-menu"
     size="disabled"
     :aria-label="buttonLabel"
     v-bind="a11yProps"
@@ -13,96 +9,61 @@
   >
     <VIcon :icon-path="icon" />
     <span
-      class="md:block md:truncate md:ms-2 md:text-start"
-      :class="isHeaderScrolled ? 'hidden' : 'block truncate ms-2 text-start'"
+      class="label-regular hidden truncate xl:block xl:ms-2 xl:text-start"
       >{{ buttonLabel }}</span
     >
-    <VIcon
-      class="hidden text-dark-charcoal-40 md:block md:ms-2"
-      :icon-path="caretDownIcon"
-    />
+    <VIcon class="hidden xl:block xl:ms-2" :icon-path="caretDownIcon" />
   </VButton>
 </template>
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  PropType,
-  ref,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, SearchType } from '~/constants/media'
+import { ALL_MEDIA, AUDIO, IMAGE, MODEL_3D, VIDEO } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
 import { useI18n } from '~/composables/use-i18n'
-import { isMinScreen } from '~/composables/use-media-query'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 
 import caretDownIcon from '~/assets/icons/caret-down.svg'
 
+const labels = {
+  [ALL_MEDIA]: 'search-type.all',
+  [IMAGE]: 'search-type.image',
+  [AUDIO]: 'search-type.audio',
+  [VIDEO]: 'search-type.video',
+  [MODEL_3D]: 'search-type.model-3d',
+}
+
+/**
+ * This is the search type button that appears in the header, not on the homepage.
+ */
 export default defineComponent({
   name: 'VSearchTypeButton',
   components: { VButton, VIcon },
   props: {
     a11yProps: {
       type: Object,
-      required: true,
-    },
-    activeItem: {
-      type: String as PropType<SearchType>,
-      default: ALL_MEDIA,
-    },
-    type: {
-      type: String as PropType<'header' | 'searchbar'>,
-      default: 'header',
+      default: () => ({
+        'aria-expanded': false,
+        'aria-haspopup': 'dialog',
+      }),
     },
   },
-  setup(props) {
+  setup() {
     const i18n = useI18n()
-    const isHeaderScrolled = inject('isHeaderScrolled', ref(null))
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+    const { icons, activeType } = useSearchType()
+
+    const activeItem = computed(() => activeType.value)
 
-    const { icons, activeType: activeItem } = useSearchType()
-    const isIconButton = computed(
-      () => isHeaderScrolled?.value && !isMinScreenMd.value
-    )
-    const sizeClasses = computed(() => {
-      if (props.type === 'searchbar') {
-        return 'h-12 px-2'
-      } else if (isIconButton.value) {
-        return 'w-10 h-10'
-      } else {
-        /**
-          When there is a caret down icon (on 'md' screens), paddings are balanced,
-          without it, paddings need to be adjusted.
-          */
-        return 'ps-2 pe-3 md:px-2'
-      }
-    })
+    const buttonLabel = computed(() => i18n.t(labels[activeItem.value]))
 
-    const buttonVariant = computed(() => {
-      if (props.type === 'searchbar') {
-        return 'action-menu'
-      } else {
-        return isMinScreenMd.value && !isHeaderScrolled?.value
-          ? 'tertiary'
-          : 'action-menu'
-      }
-    })
-    const buttonLabel = computed(() => {
-      return i18n.t(`search-type.${props.activeItem}`)
-    })
+    const icon = computed(() => icons[activeItem.value])
 
     return {
-      buttonVariant,
-      sizeClasses,
       buttonLabel,
       caretDownIcon,
-      isHeaderScrolled,
-      isMinScreenMd,
-      icon: computed(() => icons[activeItem.value]),
+      icon,
     }
   },
 })
diff --git a/src/components/VContentSwitcher/VSearchTypePopover.vue b/src/components/VContentSwitcher/VSearchTypePopover.vue
index 8b11b3461e..40de652bf8 100644
--- a/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -10,35 +10,19 @@
       <VSearchTypeButton
         :a11y-props="a11yProps"
         aria-controls="content-switcher-popover"
-        :active-item="activeItem"
-        :class="{
-          '!border-tx': isInSearchBar,
-          '!bg-white group-hover:!border-dark-charcoal-20 group-hover:focus:!border-tx':
-            isInSearchBar && !a11yProps['aria-expanded'],
-        }"
-        :type="placement"
       />
     </template>
     <VSearchTypes
       id="content-switcher-popover"
       size="medium"
-      :active-item="activeItem"
-      :use-links="placement === 'header'"
-      @select="selectItem"
+      :use-links="true"
+      @select="closePopover"
     />
   </VPopover>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-} from '@nuxtjs/composition-api'
-
-import type { SearchType } from '~/constants/media'
-import { defineEvent } from '~/types/emits'
+import { defineComponent, ref } from '@nuxtjs/composition-api'
 
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
@@ -49,55 +33,21 @@ import checkIcon from '~/assets/icons/checkmark.svg'
 export default defineComponent({
   name: 'VSearchTypePopover',
   components: {
-    VSearchTypeButton,
     VPopover,
+    VSearchTypeButton,
     VSearchTypes,
   },
-  model: {
-    prop: 'activeItem',
-    event: 'select',
-  },
-  props: {
-    activeItem: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
-    placement: {
-      type: String as PropType<'header' | 'searchbar'>,
-      default: 'header',
-    },
-  },
-  emits: {
-    select: defineEvent<SearchType>(),
-  },
-  setup(props, { emit }) {
-    const contentMenuPopover = ref<HTMLElement | null>(null)
-
-    /**
-     * When in the searchbar, content switcher button has a border when the
-     * search bar group is hovered on.
-     */
-    const isInSearchBar = computed(() => props.placement === 'searchbar')
-
-    /**
-     * Only the contentMenuPopover needs to be closed programmatically
-     */
-    const closeMenu = () => {
-      if (contentMenuPopover.value) {
-        contentMenuPopover.value.close()
-      }
-    }
+  setup() {
+    const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-    const selectItem = (item: SearchType) => {
-      emit('select', item)
+    const closePopover = () => {
+      contentMenuPopover.value?.close()
     }
 
     return {
       checkIcon,
-      selectItem,
+      closePopover,
       contentMenuPopover,
-      isInSearchBar,
-      closeMenu,
     }
   },
 })
diff --git a/src/components/VContentSwitcher/VSearchTypes.vue b/src/components/VContentSwitcher/VSearchTypes.vue
index 3e85d79f4f..e11057d738 100644
--- a/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/src/components/VContentSwitcher/VSearchTypes.vue
@@ -29,17 +29,21 @@
         :item-id="idx"
         :icon="content.icons[item]"
         :use-links="useLinks"
-        :selected="item === activeItem"
-        @click="handleClick(item)"
+        :selected="isActive(item)"
+        @click="selectItem(item)"
       />
     </div>
   </VItemGroup>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  type PropType,
+} from '@nuxtjs/composition-api'
 
-import type { SearchType } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
+import type { SearchType } from '~/constants/media'
 import { defineEvent } from '~/types/emits'
 
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
@@ -57,10 +61,9 @@ export default defineComponent({
       type: String as PropType<'small' | 'medium'>,
       default: 'small',
     },
-    activeItem: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
+    /**
+     * Whether to use buttons for search type selection, or links to the specific search type search for the items.
+     */
     useLinks: {
       type: Boolean,
       default: true,
@@ -71,6 +74,9 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const content = useSearchType()
+    const bordered = computed(() => props.size === 'small')
+
+    const isActive = (item: SearchType) => item === content.activeType.value
 
     const contentTypeGroups = computed(() => {
       const base = [
@@ -90,15 +96,17 @@ export default defineComponent({
       return base
     })
 
-    const bordered = computed(() => props.size === 'small')
-    const handleClick = (item) => {
+    const selectItem = (item: SearchType) => {
+      content.setActiveType(item)
       emit('select', item)
     }
+
     return {
       content,
       contentTypeGroups,
+      isActive,
       bordered,
-      handleClick,
+      selectItem,
     }
   },
 })
diff --git a/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.mdx b/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.mdx
new file mode 100644
index 0000000000..5b8244e479
--- /dev/null
+++ b/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.mdx
@@ -0,0 +1,102 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+
+import allIcon from '~/assets/icons/all-content.svg'
+import audioIcon from '~/assets/icons/audio-content.svg'
+import imageIcon from '~/assets/icons/image-content.svg'
+import videoIcon from '~/assets/icons/video-content.svg'
+import model3dIcon from '~/assets/icons/model-3d.svg'
+
+export const icons = {
+  [ALL_MEDIA]: allIcon,
+  [AUDIO]: audioIcon,
+  [IMAGE]: imageIcon,
+  [VIDEO]: videoIcon,
+  [MODEL_3D]: model3dIcon,
+}
+
+import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
+import {
+  ALL_MEDIA,
+  AUDIO,
+  IMAGE,
+  MODEL_3D,
+  supportedSearchTypes,
+  VIDEO,
+} from '~/constants/media'
+import useSearchType from '~/composables/use-search-type'
+
+<Meta
+  title="Components/VContentSwitcher/VSearchTypeButton"
+  components={VSearchTypeButton}
+  argTypes={{
+    activeItem: {
+      defaultValue: 'all',
+      options: supportedSearchTypes,
+      control: 'select',
+    },
+    pressed: {
+      control: 'boolean',
+    },
+    click: {
+      action: 'click',
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<VSearchTypeButton v-bind="args" v-on="args" />`,
+  components: { VSearchTypeButton },
+  setup() {
+    const searchType = useSearchType()
+    searchType.setActiveType(args.activeItem)
+    const a11yProps = { 'aria-haspopup': 'dialog' }
+    if (args.pressed) {
+      a11yProps['aria-expanded'] = true
+    }
+    args.a11yProps = a11yProps
+    return { args }
+  },
+})
+
+# VSearchTypeButton
+
+<Description of={VSearchTypeButton} />
+
+<ArgsTable of={VSearchTypeButton} />
+
+<Canvas>
+  <Story
+    height="480px"
+    name="Default"
+    parameters={{
+      viewport: { defaultViewport: 'lg' },
+    }}
+    args={{
+      activeItem: ALL_MEDIA,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    height="480px"
+    name="Large with text label"
+    parameters={{
+      viewport: { defaultViewport: 'lx' },
+    }}
+    args={{
+      activeItem: ALL_MEDIA,
+      a11yProps: { 'aria-pressed': true },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 31df8b6b5d..443cec0cc6 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -1,18 +1,14 @@
 <template>
   <VButton
     id="filter-button"
-    :variant="variant"
+    :variant="filtersAreApplied ? 'action-menu-muted' : 'action-menu'"
     size="disabled"
-    class="align-center flex-shrink-0 gap-2 self-center py-2 font-semibold focus-visible:border-tx focus-visible:ring focus-visible:ring-pink"
-    :class="
-      filtersAreApplied
-        ? 'flex-shrink-0 px-3'
-        : 'h-10 w-10 px-0 md:h-auto md:w-auto md:px-3'
-    "
+    class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3"
+    :class="[filtersAreApplied ? 'xl:pe-3' : 'xl:pe-4']"
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"
-    :aria-label="mdMinLabel"
+    :aria-label="xlMinLabel"
     @click="$emit('toggle')"
     @keydown.tab.exact="$emit('tab', $event)"
   >
@@ -20,27 +16,21 @@
       :class="filtersAreApplied ? 'hidden' : 'block'"
       :icon-path="filterIcon"
     />
-    <span class="hidden md:inline-block">{{ mdMinLabel }}</span>
-    <span class="md:hidden" :class="!filtersAreApplied && 'hidden'">{{
-      smMaxLabel
+    <span class="hidden xl:inline-block">{{ xlMinLabel }}</span>
+    <span class="xl:hidden" :class="{ hidden: !filtersAreApplied }">{{
+      lgMaxLabel
     }}</span>
   </VButton>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  toRefs,
-  ref,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
 import { defineEvent } from '~/types/emits'
 import { useI18n } from '~/composables/use-i18n'
 
-import VButton, { ButtonVariant } from '~/components/VButton.vue'
+import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import filterIcon from '~/assets/icons/filter.svg'
@@ -65,63 +55,31 @@ export default defineComponent({
     tab: defineEvent<[KeyboardEvent]>(),
     toggle: defineEvent(),
   },
-  setup(props) {
+  setup() {
     const i18n = useI18n()
     const searchStore = useSearchStore()
-    const { pressed } = toRefs(props)
-    const isMinScreenMd = inject('isMinScreenMd', ref(false))
-    const isHeaderScrolled = inject('isHeaderScrolled', ref(false))
     const filterCount = computed(() => searchStore.appliedFilterCount)
     const filtersAreApplied = computed(() => filterCount.value > 0)
 
-    /**
-     * Determine the visual style of the button
-     * based on the viewport, the application of filters, and scrolling.
-     */
-    const variant = computed(() => {
-      // Show the bordered state by default, unless below md
-      let value: ButtonVariant = isMinScreenMd.value
-        ? 'tertiary'
-        : 'action-menu'
-
-      if (isHeaderScrolled.value) {
-        value = 'action-menu'
-      }
-      if (filtersAreApplied.value) {
-        value = 'action-menu-muted'
-      }
-      // Override the default VButton pressed style
-      if (pressed.value) {
-        value = 'action-menu-muted-pressed'
-      }
-      return value
-    })
-
     /**
      * This label's verbosity makes it useful for the aria-label
      * where it is also used, especially on mobile where the
      * label would just be the number of applied filters, and therefore
      * basically useless as far as a label is concerned!
      */
-    const mdMinLabel = computed(() =>
+    const xlMinLabel = computed(() =>
       filtersAreApplied.value
         ? i18n.tc('header.filter-button.with-count', filterCount.value)
         : i18n.t('header.filter-button.simple')
     )
-
-    const smMaxLabel = computed(() =>
-      isHeaderScrolled.value
-        ? filterCount.value
-        : i18n.tc('header.filter-button.with-count', filterCount.value)
+    const lgMaxLabel = computed(() =>
+      filtersAreApplied ? filterCount.value : ''
     )
 
     return {
-      filterCount,
       filterIcon,
-      mdMinLabel,
-      smMaxLabel,
-      variant,
-      isHeaderScrolled,
+      xlMinLabel,
+      lgMaxLabel,
       filtersAreApplied,
     }
   },
diff --git a/src/components/VHeader/VHeaderDesktop.vue b/src/components/VHeader/VHeaderDesktop.vue
new file mode 100644
index 0000000000..13640ab33f
--- /dev/null
+++ b/src/components/VHeader/VHeaderDesktop.vue
@@ -0,0 +1,258 @@
+<template>
+  <header
+    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 border-b bg-white py-4 px-7"
+    :class="
+      isHeaderScrolled || sidebarVisibleRef
+        ? 'border-dark-charcoal-20'
+        : 'border-white'
+    "
+  >
+    <VLogoButton :is-fetching="isFetching" :is-search-route="true" />
+
+    <VSearchBar
+      v-model.trim="searchTerm"
+      class="flex-grow me-4"
+      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 lg:block"
+      >
+        {{ searchStatus }}
+      </span>
+    </VSearchBar>
+
+    <VSearchTypePopover />
+
+    <VFilterButton
+      ref="filterButtonRef"
+      class="flex self-stretch"
+      :pressed="sidebarVisibleRef"
+      :disabled="areFiltersDisabled"
+      aria-haspopup="dialog"
+      :aria-expanded="sidebarVisibleRef"
+      @toggle="toggleSidebar"
+      @tab="onTab"
+    />
+    <VTeleport v-if="sidebarVisibleRef" to="sidebar">
+      <VSearchGridFilter @close="toggleSidebar" />
+    </VTeleport>
+  </header>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  ref,
+  useContext,
+  useRouter,
+  watch,
+} from '@nuxtjs/composition-api'
+
+import { Portal as VTeleport } from 'portal-vue'
+
+import { useMediaStore } from '~/stores/media'
+import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
+
+import { ALL_MEDIA, searchPath, supportedMediaTypes } from '~/constants/media'
+import { IsHeaderScrolledKey } from '~/types/provides'
+import { useMatchSearchRoutes } from '~/composables/use-match-routes'
+import { useI18n } from '~/composables/use-i18n'
+import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
+
+import useSearchType from '~/composables/use-search-type'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { useFocusFilters } from '~/composables/use-focus-filters'
+
+import local from '~/utils/local'
+import { env } from '~/utils/env'
+import { Focus } from '~/utils/focus-management'
+
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
+import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
+import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
+
+import closeIcon from '~/assets/icons/close.svg'
+
+export default defineComponent({
+  name: 'VHeaderDesktop',
+  components: {
+    VFilterButton,
+    VLogoButton,
+    VSearchGridFilter,
+    VSearchTypePopover,
+    VSearchBar,
+    VTeleport,
+  },
+  setup(_, { emit }) {
+    const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
+    const sidebarVisibleRef = ref(false)
+
+    const { app } = useContext()
+    const i18n = useI18n()
+    const router = useRouter()
+
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+
+    const content = useSearchType()
+    const filterSidebar = useFilterSidebarVisibility()
+    const { matches: isSearchRoute } = useMatchSearchRoutes()
+
+    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(() => {
+      if (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
+      },
+    })
+
+    const selectSearchType = async (type) => {
+      content.setActiveType(type)
+
+      const newPath = app.localePath({
+        path: searchPath(type),
+        query: searchStore.searchQueryParams,
+      })
+      router.push(newPath)
+
+      function typeWithoutMedia(mediaType) {
+        return mediaStore.resultCountsPerMediaType[mediaType] === 0
+      }
+
+      const shouldFetchMedia =
+        type === ALL_MEDIA
+          ? supportedMediaTypes.every((type) => typeWithoutMedia(type))
+          : typeWithoutMedia(type)
+
+      if (shouldFetchMedia) {
+        await mediaStore.fetchMedia()
+      }
+    }
+
+    /**
+     * 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
+    )
+
+    onMounted(() => {
+      // We default to show the filter on desktop, and only close it if the user has
+      // explicitly closed it before.
+      const localFilterState = !(
+        local.getItem(env.filterStorageKey) === 'false'
+      )
+      const searchStore = useSearchStore()
+      sidebarVisibleRef.value =
+        searchStore.searchTypeIsSupported && localFilterState
+    })
+
+    watch(sidebarVisibleRef, (visible) => {
+      filterSidebar.setVisibility(visible)
+      visible ? emit('open') : emit('close')
+    })
+
+    const toggleSidebar = () =>
+      (sidebarVisibleRef.value = !sidebarVisibleRef.value)
+
+    const focusFilters = useFocusFilters()
+    /**
+     * Focus the first element in the sidebar when navigating from the VFilterButton
+     * using keyboard `Tab` key.
+     */
+    const onTab = (event: KeyboardEvent) => {
+      focusFilters.focusFilterSidebar(event, Focus.First)
+    }
+
+    return {
+      filterButtonRef,
+      closeIcon,
+      isFetching,
+
+      isHeaderScrolled,
+      areFiltersDisabled,
+
+      close,
+
+      handleSearch,
+      selectSearchType,
+      searchStatus,
+      searchTerm,
+      sidebarVisibleRef,
+
+      toggleSidebar,
+      onTab,
+    }
+  },
+})
+</script>
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
deleted file mode 100644
index 187441622c..0000000000
--- a/src/components/VHeader/VHeaderFilter.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div
-    ref="nodeRef"
-    class="flex items-stretch justify-end text-sr md:text-base"
-  >
-    <VFilterButton
-      ref="buttonRef"
-      class="self-stretch"
-      :class="visibleRef ? 'hidden md:flex' : 'flex'"
-      :pressed="visibleRef"
-      :disabled="disabled"
-      aria-haspopup="dialog"
-      :aria-expanded="visibleRef"
-      @toggle="onTriggerClick"
-      @tab="onTab"
-    />
-    <template v-if="visibleRef">
-      <VTeleport v-if="isMinScreenMd" to="sidebar">
-        <VSearchGridFilter @close="onTriggerClick" />
-      </VTeleport>
-      <VModalContent
-        v-else
-        :hide="close"
-        :visible="true"
-        :trigger-element="triggerElement"
-        :aria-label="$t('header.filter-button.simple')"
-      >
-        <VSearchGridFilter @close="onTriggerClick" />
-      </VModalContent>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  watch,
-  computed,
-  onMounted,
-  inject,
-  Ref,
-  toRef,
-  onBeforeUnmount,
-} from '@nuxtjs/composition-api'
-
-import { Portal as VTeleport } from 'portal-vue'
-
-import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
-import { useFocusFilters } from '~/composables/use-focus-filters'
-
-import { Focus } from '~/utils/focus-management'
-import { defineEvent } from '~/types/emits'
-import local from '~/utils/local'
-import { env } from '~/utils/env'
-import { useSearchStore } from '~/stores/search'
-
-import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
-import VFilterButton from '~/components/VHeader/VFilterButton.vue'
-
-export default defineComponent({
-  name: 'VHeaderFilter',
-  components: {
-    VFilterButton,
-    VSearchGridFilter,
-    VTeleport,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    /**
-     * Fires when the popover opens, regardless of reason. There are no extra parameters.
-     */
-    open: defineEvent(),
-    /**
-     * Fires when the popover closes, regardless of reason. There are no extra parameters.
-     */
-    close: defineEvent(),
-  },
-  setup(props, { emit }) {
-    const nodeRef = ref<HTMLElement | null>(null)
-    const visibleRef = ref(false)
-    const filterSidebar = useFilterSidebarVisibility()
-    const disabledRef = toRef(props, 'disabled')
-
-    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd')
-
-    const open = () => (visibleRef.value = true)
-    const close = () => (visibleRef.value = false)
-    const { lock, unlock } = useBodyScrollLock({ nodeRef })
-
-    onMounted(() => {
-      // We default to show the filter on desktop, and only close it if the user has
-      // explicitly closed it before.
-      const localFilterState = !(
-        local.getItem(env.filterStorageKey) === 'false'
-      )
-      const searchStore = useSearchStore()
-      if (!isMinScreenMd.value) {
-        local.setItem(env.filterStorageKey, 'false')
-      } else {
-        const visible = searchStore.searchTypeIsSupported && localFilterState
-        filterSidebar.setVisibility(visible)
-        if (visible) {
-          open()
-        }
-      }
-    })
-
-    onBeforeUnmount(() => unlock())
-
-    watch(visibleRef, (visible) => {
-      filterSidebar.setVisibility(visible)
-      visible ? emit('open') : emit('close')
-      if (!isMinScreenMd.value) {
-        visible ? lock() : unlock()
-      }
-    })
-
-    watch(disabledRef, (disabled) => {
-      if (disabled && visibleRef.value) {
-        close()
-      }
-    })
-
-    // Lock the scroll when the screen changes to below Md if filters are open.
-    watch(isMinScreenMd, (isMd) => {
-      if (!isMd && visibleRef.value) {
-        lock()
-      }
-    })
-
-    const onTriggerClick = () => {
-      visibleRef.value = !visibleRef.value
-    }
-
-    const focusFilters = useFocusFilters()
-    /**
-     * Focus the first element in the sidebar when navigating from the VFilterButton
-     * using keyboard `Tab` key.
-     */
-    const onTab = (event: KeyboardEvent) => {
-      focusFilters.focusFilterSidebar(event, Focus.First)
-    }
-
-    const triggerElement = computed(() =>
-      nodeRef.value?.firstChild
-        ? (nodeRef.value?.firstChild as HTMLElement)
-        : null
-    )
-
-    return {
-      nodeRef,
-      visibleRef,
-      triggerElement,
-
-      open,
-      close,
-      onTriggerClick,
-      onTab,
-      isMinScreenMd,
-    }
-  },
-})
-</script>
diff --git a/src/components/VHeader/VHeaderMenu.vue b/src/components/VHeader/VHeaderMenu.vue
deleted file mode 100644
index 1c06608756..0000000000
--- a/src/components/VHeader/VHeaderMenu.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-import {
-  ComponentInstance,
-  defineComponent,
-  inject,
-  onMounted,
-  Ref,
-  ref,
-  useContext,
-  useRouter,
-} from '@nuxtjs/composition-api'
-
-import { ALL_MEDIA, searchPath, supportedMediaTypes } from '~/constants/media'
-import useSearchType from '~/composables/use-search-type'
-import { useMediaStore } from '~/stores/media'
-import { useSearchStore } from '~/stores/search'
-
-import VMobileMenuModal from '~/components/VContentSwitcher/VMobileMenuModal.vue'
-import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
-
-export default defineComponent({
-  name: 'VHeaderMenu',
-  components: {
-    VMobileMenuModal,
-    VSearchTypePopover,
-  },
-  props: {
-    isSearchRoute: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  setup() {
-    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd')
-    const menuModalRef = ref<ComponentInstance | null>(null)
-    const content = useSearchType()
-    const { app } = useContext()
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const router = useRouter()
-
-    const isMounted = ref(false)
-    onMounted(() => {
-      isMounted.value = true
-    })
-    const selectSearchType = async (type) => {
-      menuModalRef.value?.closeMenu()
-      content.setActiveType(type)
-
-      const newPath = app.localePath({
-        path: searchPath(type),
-        query: searchStore.searchQueryParams,
-      })
-      router.push(newPath)
-
-      function typeWithoutMedia(mediaType) {
-        return mediaStore.resultCountsPerMediaType[mediaType] === 0
-      }
-
-      const shouldFetchMedia =
-        type === ALL_MEDIA
-          ? supportedMediaTypes.every((type) => typeWithoutMedia(type))
-          : typeWithoutMedia(type)
-
-      if (shouldFetchMedia) {
-        await mediaStore.fetchMedia()
-      }
-    }
-
-    return {
-      isMinScreenMd,
-      menuModalRef,
-      isMounted,
-
-      content,
-      selectSearchType,
-    }
-  },
-  render(h) {
-    if (!this.isSearchRoute) {
-      return null
-    } else if (this.isMinScreenMd && this.isMounted) {
-      return h('div', { class: 'flex flex-grow justify-between gap-x-2' }, [
-        h(VSearchTypePopover, {
-          props: { activeItem: this.content.activeType.value },
-          ref: 'menuModalRef',
-          on: { select: this.selectSearchType },
-        }),
-      ])
-    } else {
-      return h(VMobileMenuModal, {
-        ref: 'menuModalRef',
-        props: { activeItem: this.content.activeType.value },
-        on: {
-          select: this.selectSearchType,
-        },
-      })
-    }
-  },
-})
-</script>
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeaderMobile.vue
similarity index 83%
rename from src/components/VHeader/VHeader.vue
rename to src/components/VHeader/VHeaderMobile.vue
index e5834cae55..ec6171e5fb 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeaderMobile.vue
@@ -1,45 +1,43 @@
 <template>
   <header
-    class="main-header z-30 flex w-full items-center justify-between gap-x-2 gap-y-4 bg-white px-4 py-3 md:items-stretch md:py-4 md:px-7"
+    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="{
-      'flex-wrap md:flex-nowrap': !isHeaderScrolled,
       'border-b border-white': !isHeaderScrolled && !isMenuOpen,
-      'border-b border-dark-charcoal-20':
-        isSearchRoute && (isHeaderScrolled || isMenuOpen),
-      'md:justify-start': !isSearchRoute,
-      'flex-nowrap': !isSearchRoute && isHeaderScrolled,
+      'border-b border-dark-charcoal-20': isHeaderScrolled || isMenuOpen,
     }"
   >
     <VLogoButton :is-fetching="isFetching" :is-search-route="isSearchRoute" />
 
     <VSearchBar
       v-model.trim="searchTerm"
-      class="flex-grow lg:w-1/2 lg:flex-grow-0 2xl:w-1/3"
-      :size="isMinScreenMd ? 'medium' : isHeaderScrolled ? 'small' : 'large'"
-      :class="{
-        'order-4 w-full md:order-none md:w-auto': !isHeaderScrolled,
-      }"
+      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 lg:block"
+        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>
-
-    <VHeaderMenu
-      :is-search-route="isSearchRoute"
-      @open="openMenuModal(menus.CONTENT_SWITCHER)"
-      @close="close"
-    />
-    <VHeaderFilter
-      v-if="isSearchRoute"
-      :disabled="areFiltersDisabled"
-      @open="openMenuModal(menus.FILTERS)"
-      @close="close"
-    />
+    <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>
 
@@ -62,10 +60,9 @@ 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 VHeaderFilter from '~/components/VHeader/VHeaderFilter.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
-import VHeaderMenu from '~/components/VHeader/VHeaderMenu.vue'
 
 import closeIcon from '~/assets/icons/close.svg'
 
@@ -75,12 +72,14 @@ const menus = {
 }
 type HeaderMenu = 'filters' | 'content-switcher'
 
+/**
+ * The mobile search header component.
+ */
 export default defineComponent({
-  name: 'VHeader',
+  name: 'VHeaderMobile',
   components: {
+    VContentSettingsButton,
     VLogoButton,
-    VHeaderFilter,
-    VHeaderMenu,
     VSearchBar,
   },
   setup() {
diff --git a/src/components/VHeader/meta/VFilterButton.stories.mdx b/src/components/VHeader/meta/VFilterButton.stories.mdx
index da896ca3d7..c972fe4247 100644
--- a/src/components/VHeader/meta/VFilterButton.stories.mdx
+++ b/src/components/VHeader/meta/VFilterButton.stories.mdx
@@ -5,7 +5,6 @@ import {
   Meta,
   Story,
 } from '@storybook/addon-docs'
-import { provide, ref } from '@nuxtjs/composition-api'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import { useSearchStore } from '~/stores/search'
 import { filterData, mediaFilterKeys } from '~/constants/filters'
@@ -21,23 +20,24 @@ import { IMAGE } from '~/constants/media'
     appliedFilters: {
       type: 'number',
     },
-    scrolled: {
-      type: 'boolean',
+    toggle: {
+      action: 'toggle',
     },
-    isMinMd: {
-      type: 'boolean',
+    tab: {
+      action: 'tab',
     },
   }}
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<VFilterButton v-bind="args" />`,
+  template: `<VFilterButton v-bind="args" v-on="args" />`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {
     const searchStore = useSearchStore()
     searchStore.setSearchType(IMAGE)
     function applyNFilters(filterCount) {
+      searchStore.clearFilters()
       const filterTypes = [...mediaFilterKeys[IMAGE]]
       let filterIdx = 0
       // Skip license type filters as they can disable license filters
@@ -56,12 +56,6 @@ export const Template = (args, { argTypes }) => ({
       }
     }
     applyNFilters(args.appliedFilters)
-    if (args.scrolled) {
-      provide('isHeaderScrolled', ref(true))
-    }
-    if (args.isMinMd) {
-      provide('isMinScreenMd', ref(true))
-    }
     return { args }
   },
 })
@@ -78,15 +72,24 @@ the field receives an input. It also emits the `search` event when the search
 button is clicked.
 
 <Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
+  <Story
+    name="Default"
+    parameters={{
+      viewport: {
+        defaultViewport: 'lg',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 <Canvas>
   <Story
-    name="Mobile Scrolled"
+    name="With text label"
     parameters={{
       viewport: {
-        defaultViewport: 'iphonex',
+        defaultViewport: 'xl',
       },
     }}
   >
diff --git a/src/components/VHeader/meta/VHeader.stories.mdx b/src/components/VHeader/meta/VHeader.stories.mdx
deleted file mode 100644
index f412233e46..0000000000
--- a/src/components/VHeader/meta/VHeader.stories.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from '@storybook/addon-docs'
-import VHeader from '~/components/VHeader/VHeader.vue'
-
-<Meta
-  title="Components/VHeader/VHeader"
-  component={VHeader}
-  argTypes={{
-    input: {
-      action: 'input',
-    },
-    submit: {
-      action: 'submit',
-    },
-  }}
-/>
-
-export const Template = (args) => ({
-  template: `
-    <VHeader v-bind="args" v-on="args" />`,
-  components: { VHeader },
-  setup() {
-    return { args }
-  },
-})
-
-# VHeader
-
-<Description of={VHeader} />
-
-<ArgsTable of={VHeader} />
-
-The header component. Fixed on scroll, search bar, content switcher, pages menu and filters button.
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
diff --git a/src/components/VHeader/meta/VHeaderDesktop.stories.mdx b/src/components/VHeader/meta/VHeaderDesktop.stories.mdx
new file mode 100644
index 0000000000..c795102186
--- /dev/null
+++ b/src/components/VHeader/meta/VHeaderDesktop.stories.mdx
@@ -0,0 +1,31 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VHeaderDesktop from '~/components/VHeader/VHeaderDesktop.vue'
+
+<Meta title="Components/VHeader/VHeaderDesktop" component={VHeaderDesktop} />
+
+export const Template = (args) => ({
+  template: `
+    <VHeaderDesktop v-bind="args" v-on="args" />`,
+  components: { VHeaderDesktop },
+  setup() {
+    return { args }
+  },
+})
+
+# VHeaderDesktop
+
+<Description of={VHeaderDesktop} />
+
+<ArgsTable of={VHeaderDesktop} />
+
+The header component used for screens on breakpoints wider than `lg`. Fixed on scroll, search bar, content switcher, pages menu and filters button.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
diff --git a/src/components/VHeader/meta/VHeaderMobile.stories.mdx b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
new file mode 100644
index 0000000000..0d14c54440
--- /dev/null
+++ b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
@@ -0,0 +1,42 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VHeaderMobile from '~/components/VHeader/VHeaderMobile.vue'
+
+<Meta
+  title="Components/VHeader/VHeaderMobile"
+  component={VHeaderMobile}
+  argTypes={{
+    input: {
+      action: 'input',
+    },
+    submit: {
+      action: 'submit',
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `
+    <VHeaderMobile v-bind="args" v-on="args" />`,
+  components: { VHeaderMobile },
+  setup() {
+    return { args }
+  },
+})
+
+# VHeaderMobile
+
+<Description of={VHeaderMobile} />
+
+<ArgsTable of={VHeaderMobile} />
+
+The header component used for screens up to `lg` breakpoint. Fixed on scroll, search bar, content switcher, pages menu and filters button.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
diff --git a/src/components/VHeaderOld/meta/VFilterButton.stories.mdx b/src/components/VHeaderOld/meta/VFilterButtonOld.stories.mdx
similarity index 100%
rename from src/components/VHeaderOld/meta/VFilterButton.stories.mdx
rename to src/components/VHeaderOld/meta/VFilterButtonOld.stories.mdx
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 423e4f59b8..ebb139936e 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -5,11 +5,12 @@
     :class="{
       [$style.loading]: status === 'loading' && !prefersReducedMotion,
       'h-10 w-10': autoResize,
+      'h-12 w-12': !autoResize,
     }"
     aria-hidden="true"
     :data-prefers-reduced-motion="prefersReducedMotion"
     data-testid="logo-loader"
-    class="inline-flex h-12 w-12 items-center justify-center rounded p-3 md:h-12 md:w-12"
+    class="inline-flex items-center justify-center rounded p-3 md:h-12 md:w-12"
     fill="currentColor"
   >
     <path
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-search-type.ts b/src/composables/use-search-type.ts
index 150734a6bc..6ba76343ab 100644
--- a/src/composables/use-search-type.ts
+++ b/src/composables/use-search-type.ts
@@ -26,7 +26,7 @@ const icons = {
   [IMAGE]: imageIcon,
   [VIDEO]: videoIcon,
   [MODEL_3D]: model3dIcon,
-}
+} as const
 
 export default function useSearchType() {
   const activeType = computed(() => useSearchStore().searchType)
@@ -54,3 +54,5 @@ export default function useSearchType() {
     additionalTypes,
   }
 }
+
+export type UseSearchTypeReturn = ReturnType<typeof useSearchType>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index d8e72b4c17..5f47f10989 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -5,7 +5,10 @@
       <VMigrationNotice />
       <VTranslationStatusBanner />
       <template v-if="isNewHeaderEnabled">
-        <VHeader v-if="isSearchRoute" />
+        <template v-if="isSearchRoute">
+          <VHeaderDesktop v-if="isMinScreenLg" />
+          <VHeaderMobile v-else />
+        </template>
         <VHeaderInternal v-else />
       </template>
       <VHeaderOld v-else />
@@ -35,7 +38,13 @@
   </div>
 </template>
 <script>
-import { computed, provide, ref, watch } from '@nuxtjs/composition-api'
+import {
+  computed,
+  onMounted,
+  provide,
+  ref,
+  watch,
+} from '@nuxtjs/composition-api'
 import { PortalTarget as VTeleportTarget } from 'portal-vue'
 
 import { useWindowScroll } from '~/composables/use-window-scroll'
@@ -64,8 +73,9 @@ const embeddedPage = {
     VMigrationNotice,
     VTranslationStatusBanner,
     VHeaderOld,
+    VHeaderDesktop: () => import('~/components/VHeader/VHeaderDesktop.vue'),
     VHeaderInternal: () => import('~/components/VHeader/VHeaderInternal.vue'),
-    VHeader: () => import('~/components/VHeader/VHeader.vue'),
+    VHeaderMobile: () => import('~/components/VHeader/VHeaderMobile.vue'),
     VFooter,
     VModalTarget,
     VTeleportTarget,
@@ -82,9 +92,25 @@ const embeddedPage = {
 
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
     const { matches: isSearchRoute } = useMatchSearchRoutes()
+    const mounted = ref(false)
+    onMounted(() => {
+      mounted.value = true
+    })
 
     const isMinScreenMd = isMinScreen('md')
-    const isMinScreenLg = isMinScreen('lg')
+    /**
+     * If we use the `isMinScreen('lg')` composable for conditionally
+     * rendering components, we get a server-client side rendering
+     * mismatch.
+     * To prevent that, we initially render mobile components, and
+     * after the `mounted` ref is true, we re-render the desktop if
+     * the width is `lg`.
+     * @type {Ref<UnwrapRef<boolean>>}
+     */
+    const innerIsMinScreenLg = isMinScreen('lg')
+    const isMinScreenLg = computed(() =>
+      Boolean(innerIsMinScreenLg.value && mounted.value)
+    )
 
     const isSidebarVisible = computed(() => {
       return isNewHeaderEnabled
@@ -117,6 +143,7 @@ const embeddedPage = {
     return {
       isHeaderScrolled,
       isMinScreenMd,
+      isMinScreenLg,
       isSidebarVisible,
       isSearchRoute,
       headerHasTwoRows,
diff --git a/src/stores/feature-flag.ts b/src/stores/feature-flag.ts
index 0ccc12153b..07e74389e6 100644
--- a/src/stores/feature-flag.ts
+++ b/src/stores/feature-flag.ts
@@ -18,7 +18,7 @@ import { LOCAL, DEPLOY_ENVS, DeployEnv } from '~/constants/deploy-env'
 
 import type { Dictionary } from 'vue-router/types/router'
 
-type FlagName = keyof typeof featureData['features']
+export type FlagName = keyof typeof featureData['features']
 export interface FeatureFlagState {
   flags: Record<FlagName, FeatureFlag>
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index c32fdd786a..cfa5e21d7e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -52,6 +52,7 @@ module.exports = {
         60: '#837d82',
         70: '#6e686d',
         80: '#595258',
+        90: '#453D43',
       },
 
       // Special keywords
diff --git a/test/playwright/utils/breakpoints.ts b/test/playwright/utils/breakpoints.ts
index 7ea271bbed..87dd1900d0 100644
--- a/test/playwright/utils/breakpoints.ts
+++ b/test/playwright/utils/breakpoints.ts
@@ -21,6 +21,7 @@ type BreakpointBlock = (options: {
   expectSnapshot: ExpectSnapshot
 }) => void
 
+// TODO: move the `md` breakpoint to the mobileBreakpoints list.
 const desktopBreakpoints = ['2xl', 'xl', 'lg', 'md'] as const
 const mobileBreakpoints = ['sm', 'xs'] as const
 
@@ -139,6 +140,10 @@ const describeEvery = describeEachBreakpoint(
   Object.keys(VIEWPORTS) as Breakpoint[]
 )
 const describeEachDesktop = describeEachBreakpoint(desktopBreakpoints)
+// TODO: remove this function after `md` is moved to mobileBreakpoints
+const describeEachDesktopFromLg = describeEachBreakpoint(
+  desktopBreakpoints.filter((bp) => bp !== 'md')
+)
 const describeEachMobile = describeEachBreakpoint(mobileBreakpoints)
 
 export default {
@@ -146,5 +151,6 @@ export default {
   describeEachBreakpoint,
   describeEvery,
   describeEachDesktop,
+  describeEachDesktopFromLg,
   describeEachMobile,
 }
diff --git a/test/playwright/utils/navigation.ts b/test/playwright/utils/navigation.ts
index 49cbbbf3de..7fae76cc08 100644
--- a/test/playwright/utils/navigation.ts
+++ b/test/playwright/utils/navigation.ts
@@ -14,6 +14,7 @@ import {
 import { SCREEN_SIZES } from '~/constants/screens'
 
 import enMessages from '~/locales/en.json'
+import type { FlagName } from '~/stores/feature-flag'
 
 const messages: Record<string, Record<string, unknown>> = {
   ltr: enMessages,
@@ -231,19 +232,21 @@ export const goToSearchTerm = async (
     mode?: RenderMode
     dir?: LanguageDirection
     query?: string // Only for SSR mode
+    flag?: FlagName
   } = {}
 ) => {
   const searchType = options.searchType || ALL_MEDIA
   const dir = options.dir || 'ltr'
   const mode = options.mode ?? 'SSR'
   const query = options.query ? `&${options.query}` : ''
+  const flag = options.flag ? `&ff_${options.flag}=on` : ''
 
   if (mode === 'SSR') {
-    const path = `search/${searchTypePath(searchType)}?q=${term}${query}`
+    const path = `search/${searchTypePath(searchType)}?q=${term}${query}${flag}`
     await page.goto(pathWithDir(path, dir))
     await dismissTranslationBanner(page)
   } else {
-    await page.goto(pathWithDir('/', dir))
+    await page.goto(pathWithDir(`/${flag}`, dir))
     await dismissTranslationBanner(page)
     // Select the search type
     if (searchType !== 'all') {
@@ -261,10 +264,6 @@ export const goToSearchTerm = async (
     await page.waitForLoadState('load')
   }
   await scrollDownAndUp(page)
-  const pageWidth = page.viewportSize()?.width
-  if (pageWidth && pageWidth > smWidth) {
-    await page.waitForSelector(`[aria-label="${t('header.aria.menu', dir)}"]`)
-  }
 }
 
 /**
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts b/test/playwright/visual-regression/components/header-desktop.spec.ts
new file mode 100644
index 0000000000..625ec9bdcc
--- /dev/null
+++ b/test/playwright/visual-regression/components/header-desktop.spec.ts
@@ -0,0 +1,42 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import {
+  closeFilters,
+  goToSearchTerm,
+  languageDirections,
+} from '~~/test/playwright/utils/navigation'
+
+test.describe.configure({ mode: 'parallel' })
+
+const headerSelector = '.main-header'
+
+test.describe('header desktop snapshots', () => {
+  for (const dir of languageDirections) {
+    test.describe(dir, () => {
+      test.beforeEach(async ({ page }) => {
+        await goToSearchTerm(page, 'birds', { dir: dir, flag: 'new_header' })
+      })
+
+      test.describe('header-desktop', () => {
+        breakpoints.describeEachDesktopFromLg(({ expectSnapshot }) => {
+          test('filters open', async ({ page }) => {
+            await page.mouse.move(0, 150)
+            await expectSnapshot(
+              `filters-open-${dir}`,
+              page.locator(headerSelector)
+            )
+          })
+          test('filters closed', async ({ page }) => {
+            await closeFilters(page)
+            await page.mouse.move(0, 150)
+            await expectSnapshot(
+              `filters-closed-${dir}`,
+              page.locator(headerSelector)
+            )
+          })
+        })
+      })
+    })
+  }
+})
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-2xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-2xl-linux.png
new file mode 100644
index 0000000000..1f8cfe6abb
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-lg-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-lg-linux.png
new file mode 100644
index 0000000000..e3b2f90987
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-lg-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-xl-linux.png
new file mode 100644
index 0000000000..f13c15c2fb
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-ltr-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-2xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-2xl-linux.png
new file mode 100644
index 0000000000..ba43e09c5f
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-lg-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-lg-linux.png
new file mode 100644
index 0000000000..7648100ac5
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-lg-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-xl-linux.png
new file mode 100644
index 0000000000..054bbd0d2d
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-closed-rtl-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-2xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-2xl-linux.png
new file mode 100644
index 0000000000..6afee06173
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-lg-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-lg-linux.png
new file mode 100644
index 0000000000..857b26043f
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-lg-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-xl-linux.png
new file mode 100644
index 0000000000..4612f875b4
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-ltr-xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-2xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-2xl-linux.png
new file mode 100644
index 0000000000..73694d4797
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-lg-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-lg-linux.png
new file mode 100644
index 0000000000..84bdb16c80
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-lg-linux.png differ
diff --git a/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-xl-linux.png b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-xl-linux.png
new file mode 100644
index 0000000000..e7a135790c
Binary files /dev/null and b/test/playwright/visual-regression/components/header-desktop.spec.ts-snapshots/filters-open-rtl-xl-linux.png differ
diff --git a/test/storybook/playwright.config.ts b/test/storybook/playwright.config.ts
index 5aafd9e12e..df0d1f8965 100644
--- a/test/storybook/playwright.config.ts
+++ b/test/storybook/playwright.config.ts
@@ -21,6 +21,12 @@ const config: PlaywrightTestConfig = {
     trace: 'retain-on-failure',
   },
   timeout: 2 * 60 * 1e3,
+  expect: {
+    toMatchSnapshot: {
+      // To avoid flaky tests, we allow a small amount of pixel difference.
+      maxDiffPixelRatio: 0.02,
+    },
+  },
 }
 
 export default config
diff --git a/test/storybook/visual-regression/v-filter-button-old.spec.ts b/test/storybook/visual-regression/v-filter-button-old.spec.ts
new file mode 100644
index 0000000000..09c5c5ba78
--- /dev/null
+++ b/test/storybook/visual-regression/v-filter-button-old.spec.ts
@@ -0,0 +1,60 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import { makeGotoWithArgs } from '~~/test/storybook/utils/args'
+
+const gotoWithArgs = makeGotoWithArgs(
+  'components-vheaderold-vfilterbuttonold--default-story'
+)
+
+test.describe.configure({ mode: 'parallel' })
+
+test.describe('VFilterButtonOld', () => {
+  breakpoints.describeMd(({ expectSnapshot }) => {
+    test('no filters applied', async ({ page }) => {
+      await gotoWithArgs(page, { isMinMd: true })
+      await expectSnapshot('filter-button-old-at-rest', page)
+    })
+
+    test('no filters pressed', async ({ page }) => {
+      await gotoWithArgs(page, { isMinMd: true, pressed: true })
+      await expectSnapshot('filter-button-old-pressed', page)
+    })
+
+    test('filters applied', async ({ page }) => {
+      await gotoWithArgs(page, { isMinMd: true, appliedFilters: 2 })
+      await expectSnapshot('filter-button-old-2-filters', page)
+    })
+
+    test('filters applied and pressed', async ({ page }) => {
+      await gotoWithArgs(page, {
+        isMinMd: true,
+        appliedFilters: 2,
+        pressed: true,
+      })
+      await expectSnapshot('filter-button-old-2-filters-pressed', page)
+    })
+  })
+
+  breakpoints.describeXs(({ expectSnapshot }) => {
+    test('no filters applied and not scrolled', async ({ page }) => {
+      await gotoWithArgs(page)
+      await expectSnapshot('filter-button-old-no-filters-not-scrolled', page)
+    })
+
+    test('no filters but scrolled', async ({ page }) => {
+      await gotoWithArgs(page, { scrolled: true })
+      await expectSnapshot('filter-button-old-no-filters-scrolled', page)
+    })
+
+    test('2 filters not scrolled', async ({ page }) => {
+      await gotoWithArgs(page, { appliedFilters: 2 })
+      await expectSnapshot('filter-button-old-2-filters-not-scrolled', page)
+    })
+
+    test('2 filters and scrolled', async ({ page }) => {
+      await gotoWithArgs(page, { appliedFilters: 2, scrolled: true })
+      await expectSnapshot('filter-button-old-2-filters-scrolled', page)
+    })
+  })
+})
diff --git a/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-md-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-md-linux.png
new file mode 100644
index 0000000000..f74c647715
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-md-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-not-scrolled-xs-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-not-scrolled-xs-linux.png
new file mode 100644
index 0000000000..dccf7c093f
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-not-scrolled-xs-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-pressed-md-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-pressed-md-linux.png
new file mode 100644
index 0000000000..1be99ef962
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-pressed-md-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-scrolled-xs-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-scrolled-xs-linux.png
similarity index 72%
rename from test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-scrolled-xs-linux.png
rename to test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-scrolled-xs-linux.png
index 1eed6d8377..7d73b4f115 100644
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-scrolled-xs-linux.png and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-2-filters-scrolled-xs-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-at-rest-md-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-at-rest-md-linux.png
new file mode 100644
index 0000000000..d3c5a0cddc
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-at-rest-md-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-not-scrolled-xs-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-no-filters-not-scrolled-xs-linux.png
similarity index 100%
rename from test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-not-scrolled-xs-linux.png
rename to test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-no-filters-not-scrolled-xs-linux.png
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-scrolled-xs-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-no-filters-scrolled-xs-linux.png
similarity index 100%
rename from test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-scrolled-xs-linux.png
rename to test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-no-filters-scrolled-xs-linux.png
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-md-linux.png b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-pressed-md-linux.png
similarity index 50%
rename from test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-md-linux.png
rename to test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-pressed-md-linux.png
index e27607b213..ba992063dc 100644
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-md-linux.png and b/test/storybook/visual-regression/v-filter-button-old.spec.ts-snapshots/filter-button-old-pressed-md-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts b/test/storybook/visual-regression/v-filter-button.spec.ts
index 6b67087f41..93dfeec341 100644
--- a/test/storybook/visual-regression/v-filter-button.spec.ts
+++ b/test/storybook/visual-regression/v-filter-button.spec.ts
@@ -7,20 +7,22 @@ const gotoWithArgs = makeGotoWithArgs(
   'components-vheader-vfilterbutton--default-story'
 )
 
+test.describe.configure({ mode: 'parallel' })
+
 test.describe('VFilterButton', () => {
-  breakpoints.describeMd(({ expectSnapshot }) => {
+  breakpoints.describeLg(({ expectSnapshot }) => {
     test('no filters applied', async ({ page }) => {
       await gotoWithArgs(page, { isMinMd: true })
       await expectSnapshot('filter-button-at-rest', page)
     })
 
     test('no filters pressed', async ({ page }) => {
-      await gotoWithArgs(page, { isMinMd: true, pressed: true })
+      await gotoWithArgs(page, { pressed: true })
       await expectSnapshot('filter-button-pressed', page)
     })
 
     test('filters applied', async ({ page }) => {
-      await gotoWithArgs(page, { isMinMd: true, appliedFilters: 2 })
+      await gotoWithArgs(page, { appliedFilters: 2 })
       await expectSnapshot('filter-button-2-filters', page)
     })
 
@@ -34,25 +36,15 @@ test.describe('VFilterButton', () => {
     })
   })
 
-  breakpoints.describeXs(({ expectSnapshot }) => {
-    test('no filters applied and not scrolled', async ({ page }) => {
+  breakpoints.describeXl(({ expectSnapshot }) => {
+    test('no filters applied', async ({ page }) => {
       await gotoWithArgs(page)
       await expectSnapshot('filter-button-no-filters-not-scrolled', page)
     })
 
-    test('no filters but scrolled', async ({ page }) => {
-      await gotoWithArgs(page, { scrolled: true })
-      await expectSnapshot('filter-button-no-filters-scrolled', page)
-    })
-
-    test('2 filters not scrolled', async ({ page }) => {
+    test('2 filters', async ({ page }) => {
       await gotoWithArgs(page, { appliedFilters: 2 })
       await expectSnapshot('filter-button-2-filters-not-scrolled', page)
     })
-
-    test('2 filters and scrolled', async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2, scrolled: true })
-      await expectSnapshot('filter-button-2-filters-scrolled', page)
-    })
   })
 })
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-lg-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-lg-linux.png
new file mode 100644
index 0000000000..54dde1c4df
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-md-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-md-linux.png
deleted file mode 100644
index 889c79dfc3..0000000000
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-md-linux.png and /dev/null differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xl-linux.png
new file mode 100644
index 0000000000..bac27cba2d
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xs-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xs-linux.png
deleted file mode 100644
index f0831c3b80..0000000000
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-not-scrolled-xs-linux.png and /dev/null differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-lg-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-lg-linux.png
new file mode 100644
index 0000000000..dc963ad4bd
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-md-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-md-linux.png
deleted file mode 100644
index 1ce25b063d..0000000000
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-2-filters-pressed-md-linux.png and /dev/null differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-lg-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-lg-linux.png
new file mode 100644
index 0000000000..6e490f3096
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-md-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-md-linux.png
deleted file mode 100644
index 464fa93169..0000000000
Binary files a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-md-linux.png and /dev/null differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-not-scrolled-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-not-scrolled-xl-linux.png
new file mode 100644
index 0000000000..817ff1f2cf
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-no-filters-not-scrolled-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-lg-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-lg-linux.png
new file mode 100644
index 0000000000..21ef84ed94
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts b/test/storybook/visual-regression/v-search-type-button.spec.ts
new file mode 100644
index 0000000000..3db2779ebe
--- /dev/null
+++ b/test/storybook/visual-regression/v-search-type-button.spec.ts
@@ -0,0 +1,83 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+
+const defaultUrl =
+  '/iframe.html?id=components-vcontentswitcher-vsearchtypebutton--default-story'
+const pressedUrl = `${defaultUrl}&args=pressed:true`
+
+const searchTypeButtonLocator = 'button[aria-haspopup="dialog"]'
+
+test.describe('VSearchTypeButton', () => {
+  breakpoints.describeLg(({ expectSnapshot }) => {
+    test('resting', async ({ page }) => {
+      await page.goto(defaultUrl)
+      await expectSnapshot(
+        'v-search-type-button-at-rest',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('hovered', async ({ page }) => {
+      await page.goto(defaultUrl)
+      await page.hover(searchTypeButtonLocator)
+      await expectSnapshot(
+        'v-search-type-button-hovered',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('pressed', async ({ page }) => {
+      await page.goto(pressedUrl)
+      await expectSnapshot(
+        'v-search-type-button-pressed',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('pressed-hovered', async ({ page }) => {
+      await page.goto(pressedUrl)
+      await page.hover(searchTypeButtonLocator)
+      await expectSnapshot(
+        'v-search-type-button-pressed-hovered',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+  })
+
+  breakpoints.describeXl(({ expectSnapshot }) => {
+    test('resting', async ({ page }) => {
+      await page.goto(defaultUrl)
+      await expectSnapshot(
+        'v-search-type-button-with-text-at-rest',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('hovered', async ({ page }) => {
+      await page.goto(defaultUrl)
+      await page.hover(searchTypeButtonLocator)
+      await expectSnapshot(
+        'v-search-type-button-with-text-hovered',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('pressed', async ({ page }) => {
+      await page.goto(pressedUrl)
+      await expectSnapshot(
+        'v-search-type-button-with-text-pressed',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+
+    test('pressed-hovered', async ({ page }) => {
+      await page.goto(pressedUrl)
+      await page.hover(searchTypeButtonLocator)
+      await expectSnapshot(
+        'v-search-type-button-with-text-pressed-hovered',
+        page.locator(searchTypeButtonLocator)
+      )
+    })
+  })
+})
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-at-rest-lg-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-at-rest-lg-linux.png
new file mode 100644
index 0000000000..d981144bbf
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-at-rest-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-hovered-lg-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-hovered-lg-linux.png
new file mode 100644
index 0000000000..096376af8b
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-hovered-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-hovered-lg-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-hovered-lg-linux.png
new file mode 100644
index 0000000000..739ba19cef
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-hovered-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-lg-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-lg-linux.png
new file mode 100644
index 0000000000..bfcd1b4f44
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-pressed-lg-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-at-rest-xl-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-at-rest-xl-linux.png
new file mode 100644
index 0000000000..e6b0a38446
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-at-rest-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-hovered-xl-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-hovered-xl-linux.png
new file mode 100644
index 0000000000..f6356a8623
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-hovered-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-hovered-xl-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-hovered-xl-linux.png
new file mode 100644
index 0000000000..3ec88bc6b7
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-hovered-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-xl-linux.png b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-xl-linux.png
new file mode 100644
index 0000000000..ba8c795de7
Binary files /dev/null and b/test/storybook/visual-regression/v-search-type-button.spec.ts-snapshots/v-search-type-button-with-text-pressed-xl-linux.png differ