diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 8d5c397458..a5302c6dbb 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -292,6 +292,7 @@ export default defineComponent({
     } = useDialogControl({
       visibleRef: contentSettingsOpen,
       nodeRef: headerRef,
+      lockBodyScroll: true,
       emit,
     })
 
diff --git a/src/layouts/content-layout.vue b/src/layouts/content-layout.vue
new file mode 100644
index 0000000000..650d212b43
--- /dev/null
+++ b/src/layouts/content-layout.vue
@@ -0,0 +1,211 @@
+<template>
+  <div
+    class="app flex min-h-screen min-h-[100dvh] flex-col bg-white"
+    :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
+  >
+    <div class="sticky top-0 z-40 block">
+      <VTeleportTarget name="skip-to-content" :force-destroy="true" />
+      <VBanners />
+      <template v-if="isNewHeaderEnabled">
+        <template v-if="isSearchHeader">
+          <VHeaderDesktop v-if="isDesktopLayout" class="bg-white" />
+          <VHeaderMobile v-else class="bg-white" />
+        </template>
+        <VHeaderInternal
+          v-else
+          :class="[
+            'bg-white',
+            { 'border-b-dark-charcoal-20': isHeaderScrolled },
+          ]"
+        />
+      </template>
+      <VHeaderOld v-else class="bg-white" />
+    </div>
+
+    <main
+      class="main grid h-full flex-grow"
+      :class="[
+        { 'has-sidebar': isSidebarVisible },
+        isSidebarVisible
+          ? 'grid-cols-[1fr_var(--filter-sidebar-width)]'
+          : 'grid-cols-1',
+      ]"
+    >
+      <div
+        v-if="isNewHeaderEnabled"
+        class="main-page flex h-full w-full min-w-0 flex-col justify-between"
+      >
+        <Nuxt />
+        <VFooter
+          :mode="isSearchHeader ? 'content' : 'search'"
+          class="border-t border-dark-charcoal-20 bg-white"
+        />
+      </div>
+      <Nuxt v-else class="main-page flex h-full w-full min-w-0 flex-col" />
+
+      <aside
+        v-if="isSidebarVisible"
+        class="sidebar fixed z-10 h-[calc(100vh-81px)] h-[calc(100dvh-81px)] overflow-y-auto border-dark-charcoal-20 bg-dark-charcoal-06 end-0 border-s"
+      >
+        <VSearchGridFilter class="px-10 pt-8 pb-10" @close="closeSidebar" />
+      </aside>
+    </main>
+
+    <VModalTarget class="modal" />
+    <VGlobalAudioSection />
+  </div>
+</template>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  provide,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
+import { PortalTarget as VTeleportTarget } from "portal-vue"
+
+import { useWindowScroll } from "~/composables/use-window-scroll"
+import {
+  useMatchSearchRoutes,
+  useMatchSingleResultRoutes,
+  useMatchContentPageRoutes,
+} from "~/composables/use-match-routes"
+import { useLayout } from "~/composables/use-layout"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useUiStore } from "~/stores/ui"
+import { useSearchStore } from "~/stores/search"
+
+import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
+
+import VBanners from "~/components/VBanner/VBanners.vue"
+import VHeaderOld from "~/components/VHeaderOld/VHeaderOld.vue"
+import VModalTarget from "~/components/VModal/VModalTarget.vue"
+import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
+import VSearchGridFilter from "~/components/VFilters/VSearchGridFilter.vue"
+
+/**
+ * This is the ContentLayout: the search page, the single result page,
+ * and the content pages.
+ * It has white background and is scrollable. It can also have a sidebar.
+ */
+export default defineComponent({
+  name: "ContentLayout",
+  components: {
+    VBanners,
+    VHeaderDesktop: () => import("~/components/VHeader/VHeaderDesktop.vue"),
+    VHeaderInternal: () => import("~/components/VHeader/VHeaderInternal.vue"),
+    VHeaderMobile: () =>
+      import("~/components/VHeader/VHeaderMobile/VHeaderMobile.vue"),
+    VFooter: () => import("~/components/VFooter/VFooter.vue"),
+    VHeaderOld,
+    VModalTarget,
+    VTeleportTarget,
+    VGlobalAudioSection,
+    VSearchGridFilter,
+  },
+  setup() {
+    const { app } = useContext()
+    const uiStore = useUiStore()
+    const featureFlagStore = useFeatureFlagStore()
+    const searchStore = useSearchStore()
+
+    const isNewHeaderEnabled = computed(() =>
+      featureFlagStore.isOn("new_header")
+    )
+    const { updateBreakpoint } = useLayout()
+
+    /**
+     * Update the breakpoint value in the cookie on mounted.
+     * The Pinia state might become different from the cookie state if, for example, the cookies were saved when the screen was `sm`,
+     * and then a page is opened on SSR on a `lg` screen.
+     */
+    onMounted(() => {
+      updateBreakpoint()
+    })
+
+    const { matches: isSearchRoute } = useMatchSearchRoutes()
+    const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
+    const { matches: isContentPageRoute } = useMatchContentPageRoutes()
+
+    const nuxtError = computed(() => app.nuxt.err)
+
+    const isWhite = computed(
+      () =>
+        !nuxtError.value &&
+        (isSearchRoute.value ||
+          isSingleResultRoute.value ||
+          isContentPageRoute.value)
+    )
+
+    const isSearchHeader = computed(
+      () =>
+        !nuxtError.value && (isSearchRoute.value || isSingleResultRoute.value)
+    )
+
+    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
+    const breakpoint = computed(() => uiStore.breakpoint)
+
+    /**
+     * Filters sidebar is visible only on desktop layouts
+     * on search result pages for supported search types.
+     */
+    const isSidebarVisible = computed(
+      () =>
+        isSearchRoute.value &&
+        searchStore.searchTypeIsSupported &&
+        uiStore.isFilterVisible &&
+        isDesktopLayout.value
+    )
+
+    const closeSidebar = () => {
+      uiStore.setFiltersState(false)
+    }
+
+    const isHeaderScrolled = ref(false)
+    const { isScrolled: isMainContentScrolled, y: scrollY } = useWindowScroll()
+    watch([isMainContentScrolled], ([isMainContentScrolled]) => {
+      isHeaderScrolled.value = isMainContentScrolled
+    })
+    const showScrollButton = computed(() => scrollY.value > 70)
+
+    provide("isHeaderScrolled", isHeaderScrolled)
+    provide("showScrollButton", showScrollButton)
+    provide(IsHeaderScrolledKey, isHeaderScrolled)
+    provide(IsSidebarVisibleKey, isSidebarVisible)
+
+    // TODO: remove `headerHasTwoRows` provide after the new header is enabled.
+    const headerHasTwoRows = computed(
+      () =>
+        isSearchRoute.value && !isHeaderScrolled.value && !isDesktopLayout.value
+    )
+    provide("headerHasTwoRows", headerHasTwoRows)
+
+    return {
+      isHeaderScrolled,
+      isDesktopLayout,
+      isSidebarVisible,
+      isSearchRoute,
+      isSearchHeader,
+      headerHasTwoRows,
+      isNewHeaderEnabled,
+      isWhite,
+      breakpoint,
+
+      closeSidebar,
+    }
+  },
+  head() {
+    return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
+  },
+})
+</script>
+
+<style scoped>
+.has-sidebar .sidebar {
+  width: var(--filter-sidebar-width);
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 8bc4fba8a5..35ea07a099 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,62 +1,21 @@
 <template>
   <div
-    :key="isWhite ? 'white' : 'yellow'"
-    class="app flex flex-col"
-    :class="[
-      isDesktopLayout ? 'desktop' : 'mobile',
-      isWhite ? 'bg-white' : 'bg-yellow',
-      breakpoint,
-    ]"
+    class="app flex h-screen h-[100dvh] flex-col bg-yellow"
+    :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
   >
     <div class="sticky top-0 z-40 block">
       <VTeleportTarget name="skip-to-content" :force-destroy="true" />
       <VBanners />
-      <template v-if="isNewHeaderEnabled">
-        <template v-if="isSearchHeader">
-          <VHeaderDesktop
-            v-if="isDesktopLayout"
-            :class="isWhite ? 'bg-white' : 'bg-yellow'"
-          />
-          <VHeaderMobile v-else :class="isWhite ? 'bg-white' : 'bg-yellow'" />
-        </template>
-        <VHeaderInternal
-          v-else
-          :class="[
-            { 'border-b-dark-charcoal-20': isHeaderScrolled && isWhite },
-            isWhite ? 'bg-white' : 'bg-yellow',
-          ]"
-        />
-      </template>
-      <VHeaderOld v-else :class="isWhite ? 'bg-white' : 'bg-yellow'" />
+      <VHeaderInternal class="bg-yellow" />
     </div>
 
-    <main
-      class="main grid h-full flex-grow"
-      :class="[
-        { 'has-sidebar': isSidebarVisible },
-        isSidebarVisible
-          ? 'grid-cols-[1fr_var(--filter-sidebar-width)]'
-          : 'grid-cols-1',
-      ]"
-    >
+    <main class="main grid h-full flex-grow">
       <div
-        v-if="isNewHeaderEnabled"
         class="main-page flex h-full w-full min-w-0 flex-col justify-between"
       >
         <Nuxt />
-        <VFooter
-          :mode="isSearchHeader ? 'content' : 'search'"
-          :class="isWhite ? 'border-t border-dark-charcoal-20' : 'bg-yellow'"
-        />
+        <VFooter mode="search" class="bg-yellow" />
       </div>
-      <Nuxt v-else class="main-page flex h-full w-full min-w-0 flex-col" />
-
-      <aside
-        v-if="isSidebarVisible"
-        class="sidebar fixed z-10 overflow-y-auto border-dark-charcoal-20 bg-dark-charcoal-06 end-0 border-s"
-      >
-        <VSearchGridFilter class="px-10 pt-8 pb-10" @close="closeSidebar" />
-      </aside>
     </main>
 
     <VModalTarget class="modal" />
@@ -64,60 +23,34 @@
   </div>
 </template>
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  provide,
-  ref,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
+import { computed, defineComponent, onMounted } from "@nuxtjs/composition-api"
 import { PortalTarget as VTeleportTarget } from "portal-vue"
 
-import { useWindowScroll } from "~/composables/use-window-scroll"
-import {
-  useMatchSearchRoutes,
-  useMatchSingleResultRoutes,
-  useMatchContentPageRoutes,
-} from "~/composables/use-match-routes"
 import { useLayout } from "~/composables/use-layout"
 
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useUiStore } from "~/stores/ui"
-import { useSearchStore } from "~/stores/search"
-
-import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
 
 import VBanners from "~/components/VBanner/VBanners.vue"
-import VHeaderOld from "~/components/VHeaderOld/VHeaderOld.vue"
-import VModalTarget from "~/components/VModal/VModalTarget.vue"
 import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
-import VSearchGridFilter from "~/components/VFilters/VSearchGridFilter.vue"
+import VModalTarget from "~/components/VModal/VModalTarget.vue"
 
-export default {
+/**
+ * The default layout is one screen high and yellow, without sidebars.
+ * The new header version of the "blank" layout.
+ */
+export default defineComponent({
   name: "DefaultLayout",
   components: {
     VBanners,
-    VHeaderDesktop: () => import("~/components/VHeader/VHeaderDesktop.vue"),
     VHeaderInternal: () => import("~/components/VHeader/VHeaderInternal.vue"),
-    VHeaderMobile: () =>
-      import("~/components/VHeader/VHeaderMobile/VHeaderMobile.vue"),
     VFooter: () => import("~/components/VFooter/VFooter.vue"),
-    VHeaderOld,
     VModalTarget,
     VTeleportTarget,
     VGlobalAudioSection,
-    VSearchGridFilter,
   },
   setup() {
-    const { app } = useContext()
     const uiStore = useUiStore()
-    const featureFlagStore = useFeatureFlagStore()
-    const searchStore = useSearchStore()
 
-    const isNewHeaderEnabled = computed(() =>
-      featureFlagStore.isOn("new_header")
-    )
     const { updateBreakpoint } = useLayout()
 
     /**
@@ -129,92 +62,16 @@ export default {
       updateBreakpoint()
     })
 
-    const { matches: isSearchRoute } = useMatchSearchRoutes()
-    const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
-    const { matches: isContentPageRoute } = useMatchContentPageRoutes()
-
-    const nuxtError = computed(() => app.nuxt.err)
-
-    const isWhite = computed(
-      () =>
-        !nuxtError.value &&
-        (isSearchRoute.value ||
-          isSingleResultRoute.value ||
-          isContentPageRoute.value)
-    )
-
-    const isSearchHeader = computed(
-      () =>
-        !nuxtError.value && (isSearchRoute.value || isSingleResultRoute.value)
-    )
-
     const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
     const breakpoint = computed(() => uiStore.breakpoint)
 
-    /**
-     * Filters sidebar is visible only on desktop layouts
-     * on search result pages for supported search types.
-     */
-    const isSidebarVisible = computed(
-      () =>
-        isSearchRoute.value &&
-        searchStore.searchTypeIsSupported &&
-        uiStore.isFilterVisible &&
-        isDesktopLayout.value
-    )
-
-    const closeSidebar = () => {
-      uiStore.setFiltersState(false)
-    }
-
-    const isHeaderScrolled = ref(false)
-    const { isScrolled: isMainContentScrolled, y: scrollY } = useWindowScroll()
-    watch([isMainContentScrolled], ([isMainContentScrolled]) => {
-      isHeaderScrolled.value = isMainContentScrolled
-    })
-    const showScrollButton = computed(() => scrollY.value > 70)
-
-    provide("isHeaderScrolled", isHeaderScrolled)
-    provide("showScrollButton", showScrollButton)
-    provide(IsHeaderScrolledKey, isHeaderScrolled)
-    provide(IsSidebarVisibleKey, isSidebarVisible)
-
-    // TODO: remove `headerHasTwoRows` provide after the new header is enabled.
-    const headerHasTwoRows = computed(
-      () =>
-        isSearchRoute.value && !isHeaderScrolled.value && !isDesktopLayout.value
-    )
-    provide("headerHasTwoRows", headerHasTwoRows)
-
     return {
-      isHeaderScrolled,
       isDesktopLayout,
-      isSidebarVisible,
-      isSearchRoute,
-      isSearchHeader,
-      headerHasTwoRows,
-      isNewHeaderEnabled,
-      isWhite,
       breakpoint,
-
-      closeSidebar,
     }
   },
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
   },
-}
+})
 </script>
-
-<style scoped>
-.app {
-  @apply h-screen h-[100dvh];
-}
-.sidebar {
-  /* Header height above md is 80px plus 1px for bottom border */
-  @apply h-[calc(100vh-81px)] h-[calc(100dvh-81px)];
-}
-.has-sidebar .sidebar {
-  width: var(--filter-sidebar-width);
-}
-</style>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 85e0c618ba..6235c18c20 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -145,6 +145,7 @@ import VContentPage from "~/components/VContentPage.vue"
 export default defineComponent({
   name: "AboutPage",
   components: { VLink, VContentPage },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/audio/_id/index.vue b/src/pages/audio/_id/index.vue
index 0842aeb1c0..0aab27294e 100644
--- a/src/pages/audio/_id/index.vue
+++ b/src/pages/audio/_id/index.vue
@@ -50,6 +50,7 @@ export default defineComponent({
     }
     next()
   },
+  layout: "content-layout",
   setup() {
     const route = useRoute()
     const singleResultStore = useSingleResultStore()
diff --git a/src/pages/external-sources.vue b/src/pages/external-sources.vue
index 860fa7dc95..962673468c 100644
--- a/src/pages/external-sources.vue
+++ b/src/pages/external-sources.vue
@@ -76,6 +76,7 @@ import VLink from "~/components/VLink.vue"
 export default defineComponent({
   name: "ExternalSourcesPage",
   components: { VContentPage, VLink },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index a457d91a46..9c20fc047b 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -64,6 +64,7 @@ const tabs = Object.keys(forms) as (keyof typeof forms)[]
 export default defineComponent({
   name: "FeedbackPage",
   components: { VLink, VContentPage, VTabs, VTab, VTabPanel },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/image/_id/index.vue b/src/pages/image/_id/index.vue
index 23d0176fa7..896b05d429 100644
--- a/src/pages/image/_id/index.vue
+++ b/src/pages/image/_id/index.vue
@@ -137,6 +137,7 @@ export default defineComponent({
     }
     next()
   },
+  layout: "content-layout",
   setup() {
     const route = useRoute()
 
diff --git a/src/pages/preferences.vue b/src/pages/preferences.vue
index a5f90e5531..13489636d8 100644
--- a/src/pages/preferences.vue
+++ b/src/pages/preferences.vue
@@ -87,6 +87,7 @@ export default defineComponent({
     VContentPage,
     VCheckbox,
   },
+  layout: "content-layout",
   setup() {
     const { $cookies } = useContext()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/privacy.vue b/src/pages/privacy.vue
index 0dea8f2bc9..712ebbd07d 100644
--- a/src/pages/privacy.vue
+++ b/src/pages/privacy.vue
@@ -56,6 +56,7 @@ import VContentPage from "~/components/VContentPage.vue"
 export default defineComponent({
   name: "VPrivacyPage",
   components: { VLink, VContentPage },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index cff399baf4..aa1e01e835 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -236,6 +236,7 @@ import VContentPage from "~/components/VContentPage.vue"
 export default defineComponent({
   name: "VSearchHelpPage",
   components: { VLink, VContentPage },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 79e8af051a..ab29472700 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -68,6 +68,7 @@ export default defineComponent({
     }
     next()
   },
+  layout: "content-layout",
   middleware({ route, redirect }) {
     /**
      * This anonymous middleware redirects any search without a query to the homepage.
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 11a98036c2..f40fa24e0f 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -104,6 +104,7 @@ import externalLinkIcon from "~/assets/icons/external-link.svg"
 export default defineComponent({
   name: "SourcePage",
   components: { VButton, VContentPage, VIcon, VLink, VSourcesTable },
+  layout: "content-layout",
   setup() {
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
diff --git a/test/playwright/visual-regression/pages/pages.spec.ts b/test/playwright/visual-regression/pages/pages.spec.ts
index d61a6bb4f4..e2f5864f6e 100644
--- a/test/playwright/visual-regression/pages/pages.spec.ts
+++ b/test/playwright/visual-regression/pages/pages.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { removeHiddenOverflow } from "~~/test/playwright/utils/page"
@@ -47,6 +47,13 @@ for (const contentPage of contentPages) {
   }
 }
 
+const cleanImageResults = async (page: Page) => {
+  await page.addStyleTag({
+    content: ".results-grid img { filter: brightness(0%); }",
+  })
+  await page.waitForTimeout(500)
+}
+
 test.describe("Layout color is set correctly", () => {
   breakpoints.describeLg(() => {
     test.use({
@@ -61,8 +68,13 @@ test.describe("Layout color is set correctly", () => {
       await page.getByRole("combobox", { name: "Language" }).selectOption("ar")
 
       await page.getByPlaceholder("البحث عن محتوى").fill("cat")
-      await page.getByRole("button", { name: "يبحث" }).click()
-      await page.waitForNavigation()
+
+      await Promise.all([
+        page.waitForNavigation(),
+        page.getByRole("button", { name: "يبحث" }).click(),
+      ])
+
+      await cleanImageResults(page)
 
       expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png")
     })
diff --git a/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png b/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png
index 33158bc49f..dd04bbd1b0 100644
Binary files a/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png and b/test/playwright/visual-regression/pages/pages.spec.ts-snapshots/search-page-rtl-lg-linux.png differ