diff --git a/package.json b/package.json
index 37990302b5..a1c71959ac 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "dev:generate-types": "pnpm runts ./test/generateTypes.ts",
     "dev:postgres": "cross-env PAYLOAD_DATABASE=postgres pnpm runts ./test/dev.ts",
     "dev:prod": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts --prod",
+    "dev:prod:memorydb": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts --prod --start-memory-db",
     "dev:vercel-postgres": "cross-env PAYLOAD_DATABASE=vercel-postgres pnpm runts ./test/dev.ts",
     "devsafe": "node ./scripts/delete-recursively.js '**/.next' && pnpm dev",
     "docker:restart": "pnpm docker:stop --remove-orphans && pnpm docker:start",
diff --git a/packages/payload/src/bin/generateImportMap/index.ts b/packages/payload/src/bin/generateImportMap/index.ts
index 05d451f1da..850ce084b0 100644
--- a/packages/payload/src/bin/generateImportMap/index.ts
+++ b/packages/payload/src/bin/generateImportMap/index.ts
@@ -64,12 +64,23 @@ export function addPayloadComponentToImportMap({
   // then path needs to be /test/fields/components/Field.tsx NOT /users/username/project/test/fields/components/Field.tsx
   // so we need to append baseDir to componentPath
 
-  imports[importIdentifier] = {
-    path:
-      componentPath.startsWith('.') || componentPath.startsWith('/')
-        ? path.posix.join(baseDir.replace(/\\/g, '/'), componentPath.slice(1))
-        : componentPath,
-    specifier: exportName,
+  if (componentPath.startsWith('.') || componentPath.startsWith('/')) {
+    const normalizedBaseDir = baseDir.replace(/\\/g, '/')
+
+    const finalPath = normalizedBaseDir.startsWith('/../')
+      ? `${normalizedBaseDir}${componentPath.slice(1)}`
+      : path.posix.join(normalizedBaseDir, componentPath.slice(1))
+
+    imports[importIdentifier] = {
+      path:
+        componentPath.startsWith('.') || componentPath.startsWith('/') ? finalPath : componentPath,
+      specifier: exportName,
+    }
+  } else {
+    imports[importIdentifier] = {
+      path: componentPath,
+      specifier: exportName,
+    }
   }
   importMap[componentPath + '#' + exportName] = importIdentifier
 }
@@ -109,7 +120,29 @@ export async function generateImportMap(
   // rootDir: /
   // componentsBaseDir = /
 
-  const componentsBaseDir = path.relative(rootDir, config.admin.importMap.baseDir)
+  // E.g.:
+  // config.admin.importMap.baseDir = /test/fields/
+  // rootDir: /test/fields/prod
+  // componentsBaseDir = ../
+
+  // Check if rootDir is a subdirectory of baseDir
+  const baseDir = config.admin.importMap.baseDir
+  const isSubdirectory = path.relative(baseDir, rootDir).startsWith('..')
+
+  let componentsBaseDir
+
+  if (isSubdirectory) {
+    // Get the relative path from rootDir to baseDir
+    componentsBaseDir = path.relative(rootDir, baseDir)
+  } else {
+    // If rootDir is not a subdirectory, just return baseDir relative to rootDir
+    componentsBaseDir = `/${path.relative(rootDir, baseDir)}`
+  }
+
+  // Ensure result has a trailing slash
+  if (!componentsBaseDir.endsWith('/')) {
+    componentsBaseDir += '/'
+  }
 
   const addToImportMap: AddToImportMap = (payloadComponent) => {
     if (!payloadComponent) {
diff --git a/test/generateImportMap.ts b/test/generateImportMap.ts
index 31e2929997..51fce17230 100644
--- a/test/generateImportMap.ts
+++ b/test/generateImportMap.ts
@@ -4,6 +4,7 @@ const [testConfigDir] = process.argv.slice(2)
 
 import type { SanitizedConfig } from 'payload'
 
+import fs from 'fs'
 import { generateImportMap } from 'payload'
 import { fileURLToPath } from 'url'
 
@@ -21,11 +22,24 @@ async function run() {
 
     const config: SanitizedConfig = await (await import(pathWithConfig)).default
 
-    process.env.ROOT_DIR =
-      testConfigDir === 'live-preview' || testConfigDir === 'admin-root'
-        ? testDir
-        : path.resolve(dirname, '..')
+    let rootDir = ''
+    if (testConfigDir === 'live-preview' || testConfigDir === 'admin-root') {
+      rootDir = testDir
+      if (process.env.PAYLOAD_TEST_PROD === 'true') {
+        // If in prod mode, there may be a testSuite/prod folder. If so, use that as the rootDir
+        const prodDir = path.resolve(testDir, 'prod')
+        try {
+          fs.accessSync(prodDir, fs.constants.F_OK)
+          rootDir = prodDir
+        } catch (err) {
+          // Swallow err - no prod folder
+        }
+      }
+    } else {
+      rootDir = path.resolve(dirname, '..')
+    }
 
+    process.env.ROOT_DIR = rootDir
     await generateImportMap(config, { log: true, force: true })
   }
 }
diff --git a/test/helpers.ts b/test/helpers.ts
index 5e44c03750..46c4401494 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -348,7 +348,8 @@ export function initPageConsoleErrorCatch(page: Page) {
       !msg.text().includes('Error: NEXT_REDIRECT') &&
       !msg.text().includes('Error getting document data') &&
       !msg.text().includes('Failed trying to load default language strings') &&
-      !msg.text().includes('TypeError: Failed to fetch') // This happens when server actions are aborted
+      !msg.text().includes('TypeError: Failed to fetch') && // This happens when server actions are aborted
+      !msg.text().includes('der-radius: 2px  Server   Error: Error getting do') // This is a weird error that happens in the console
     ) {
       // "Failed to fetch RSC payload for" happens seemingly randomly. There are lots of issues in the next.js repository for this. Causes e2e tests to fail and flake. Will ignore for now
       // the the server responded with a status of error happens frequently. Will ignore it for now.
diff --git a/test/helpers/getNextRootDir.ts b/test/helpers/getNextRootDir.ts
index 81f1de753f..0fb0e449d4 100644
--- a/test/helpers/getNextRootDir.ts
+++ b/test/helpers/getNextRootDir.ts
@@ -33,8 +33,19 @@ export function getNextRootDir(testSuite?: string) {
     }
 
     if (hasNextConfig) {
+      let rootDir = testSuiteDir
+      if (process.env.PAYLOAD_TEST_PROD === 'true') {
+        // If in prod mode, there may be a testSuite/prod folder. If so, use that as the rootDir
+        const prodDir = resolve(testSuiteDir, 'prod')
+        try {
+          fs.accessSync(prodDir, fs.constants.F_OK)
+          rootDir = prodDir
+        } catch (err) {
+          // Swallow err - no prod folder
+        }
+      }
       return {
-        rootDir: testSuiteDir,
+        rootDir,
         adminRoute,
       }
     }
diff --git a/test/live-preview/e2e.spec.ts b/test/live-preview/e2e.spec.ts
index 147d8a617b..0f08d8f6ca 100644
--- a/test/live-preview/e2e.spec.ts
+++ b/test/live-preview/e2e.spec.ts
@@ -32,6 +32,7 @@ import {
   ssrAutosavePagesSlug,
   ssrPagesSlug,
 } from './shared.js'
+import { wait } from 'payload/shared'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -178,8 +179,12 @@ describe('Live Preview', () => {
     await expect(frame.locator(renderedPageTitleLocator)).toHaveText('For Testing: SSR Home')
 
     const newTitleValue = 'SSR Home (Edited)'
+    await wait(1000)
 
-    await titleField.fill(newTitleValue)
+    await titleField.clear()
+    await titleField.pressSequentially(newTitleValue)
+
+    await wait(1000)
 
     await waitForAutoSaveToRunAndComplete(page)
 
diff --git a/test/live-preview/prod/app/(payload)/admin/[[...segments]]/not-found.tsx b/test/live-preview/prod/app/(payload)/admin/[[...segments]]/not-found.tsx
new file mode 100644
index 0000000000..180e6f81cd
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, importMap, params, searchParams })
+
+export default NotFound
diff --git a/test/live-preview/prod/app/(payload)/admin/[[...segments]]/page.tsx b/test/live-preview/prod/app/(payload)/admin/[[...segments]]/page.tsx
new file mode 100644
index 0000000000..e59b2d3a84
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/admin/[[...segments]]/page.tsx
@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, importMap, params, searchParams })
+
+export default Page
diff --git a/test/live-preview/prod/app/(payload)/admin/importMap.js b/test/live-preview/prod/app/(payload)/admin/importMap.js
new file mode 100644
index 0000000000..d34a2c99bd
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/admin/importMap.js
@@ -0,0 +1,141 @@
+import { RscEntrySlateCell as RscEntrySlateCell_0e78253914a550fdacd75626f1dabe17 } from '@payloadcms/richtext-slate/rsc'
+import { RscEntrySlateField as RscEntrySlateField_0e78253914a550fdacd75626f1dabe17 } from '@payloadcms/richtext-slate/rsc'
+import { BoldLeafButton as BoldLeafButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { BoldLeaf as BoldLeaf_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { CodeLeafButton as CodeLeafButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { CodeLeaf as CodeLeaf_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { ItalicLeafButton as ItalicLeafButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { ItalicLeaf as ItalicLeaf_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { StrikethroughLeafButton as StrikethroughLeafButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { StrikethroughLeaf as StrikethroughLeaf_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { UnderlineLeafButton as UnderlineLeafButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { UnderlineLeaf as UnderlineLeaf_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { BlockquoteElementButton as BlockquoteElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { BlockquoteElement as BlockquoteElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H1ElementButton as H1ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading1Element as Heading1Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H2ElementButton as H2ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading2Element as Heading2Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H3ElementButton as H3ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading3Element as Heading3Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H4ElementButton as H4ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading4Element as Heading4Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H5ElementButton as H5ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading5Element as Heading5Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { H6ElementButton as H6ElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { Heading6Element as Heading6Element_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { IndentButton as IndentButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { IndentElement as IndentElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { ListItemElement as ListItemElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { LinkButton as LinkButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { LinkElement as LinkElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { WithLinks as WithLinks_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { OLElementButton as OLElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { OrderedListElement as OrderedListElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { RelationshipButton as RelationshipButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { RelationshipElement as RelationshipElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { WithRelationship as WithRelationship_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { TextAlignElementButton as TextAlignElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { ULElementButton as ULElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { UnorderedListElement as UnorderedListElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { UploadElementButton as UploadElementButton_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { UploadElement as UploadElement_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { WithUpload as WithUpload_0b388c087d9de8c4f011dd323a130cfb } from '@payloadcms/richtext-slate/client'
+import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { TreeViewFeatureClient as TreeViewFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { CollectionLivePreviewButton as CollectionLivePreviewButton_cdf8c2f401206aec7d2609afbb1e2f40 } from '/../components/CollectionLivePreviewButton/index.js'
+import { GlobalLivePreviewButton as GlobalLivePreviewButton_cef560d649f896ba95825fe38ff5f91f } from '/../components/GlobalLivePreviewButton/index.js'
+
+export const importMap = {
+  "@payloadcms/richtext-slate/rsc#RscEntrySlateCell": RscEntrySlateCell_0e78253914a550fdacd75626f1dabe17,
+  "@payloadcms/richtext-slate/rsc#RscEntrySlateField": RscEntrySlateField_0e78253914a550fdacd75626f1dabe17,
+  "@payloadcms/richtext-slate/client#BoldLeafButton": BoldLeafButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#BoldLeaf": BoldLeaf_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#CodeLeafButton": CodeLeafButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#CodeLeaf": CodeLeaf_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#ItalicLeafButton": ItalicLeafButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#ItalicLeaf": ItalicLeaf_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#StrikethroughLeafButton": StrikethroughLeafButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#StrikethroughLeaf": StrikethroughLeaf_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#UnderlineLeafButton": UnderlineLeafButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#UnderlineLeaf": UnderlineLeaf_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#BlockquoteElementButton": BlockquoteElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#BlockquoteElement": BlockquoteElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H1ElementButton": H1ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading1Element": Heading1Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H2ElementButton": H2ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading2Element": Heading2Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H3ElementButton": H3ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading3Element": Heading3Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H4ElementButton": H4ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading4Element": Heading4Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H5ElementButton": H5ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading5Element": Heading5Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#H6ElementButton": H6ElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#Heading6Element": Heading6Element_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#IndentButton": IndentButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#IndentElement": IndentElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#ListItemElement": ListItemElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#LinkButton": LinkButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#LinkElement": LinkElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#WithLinks": WithLinks_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#OLElementButton": OLElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#OrderedListElement": OrderedListElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#RelationshipButton": RelationshipButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#RelationshipElement": RelationshipElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#WithRelationship": WithRelationship_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#TextAlignElementButton": TextAlignElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#ULElementButton": ULElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#UnorderedListElement": UnorderedListElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#UploadElementButton": UploadElementButton_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#UploadElement": UploadElement_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-slate/client#WithUpload": WithUpload_0b388c087d9de8c4f011dd323a130cfb,
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#TreeViewFeatureClient": TreeViewFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "/components/CollectionLivePreviewButton/index.js#CollectionLivePreviewButton": CollectionLivePreviewButton_cdf8c2f401206aec7d2609afbb1e2f40,
+  "/components/GlobalLivePreviewButton/index.js#GlobalLivePreviewButton": GlobalLivePreviewButton_cef560d649f896ba95825fe38ff5f91f
+}
diff --git a/test/live-preview/prod/app/(payload)/api/[...slug]/route.ts b/test/live-preview/prod/app/(payload)/api/[...slug]/route.ts
new file mode 100644
index 0000000000..183cf457f6
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/api/[...slug]/route.ts
@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)
diff --git a/test/live-preview/prod/app/(payload)/api/graphql-playground/route.ts b/test/live-preview/prod/app/(payload)/api/graphql-playground/route.ts
new file mode 100644
index 0000000000..dffacb345f
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/api/graphql-playground/route.ts
@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes/index.js'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)
diff --git a/test/live-preview/prod/app/(payload)/api/graphql/route.ts b/test/live-preview/prod/app/(payload)/api/graphql/route.ts
new file mode 100644
index 0000000000..2069ff86b0
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/api/graphql/route.ts
@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)
diff --git a/test/live-preview/prod/app/(payload)/custom.scss b/test/live-preview/prod/app/(payload)/custom.scss
new file mode 100644
index 0000000000..f557cd4277
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/custom.scss
@@ -0,0 +1,7 @@
+#custom-css {
+  font-family: monospace;
+}
+
+#custom-css::after {
+  content: 'custom-css';
+}
diff --git a/test/live-preview/prod/app/(payload)/layout.tsx b/test/live-preview/prod/app/(payload)/layout.tsx
new file mode 100644
index 0000000000..f5f86c762a
--- /dev/null
+++ b/test/live-preview/prod/app/(payload)/layout.tsx
@@ -0,0 +1,32 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { ServerFunctionClient } from 'payload'
+
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout
diff --git a/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.client.tsx b/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.client.tsx
new file mode 100644
index 0000000000..d06ac41e74
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.client.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import React from 'react'
+
+import type { Page as PageType } from '../../../../../payload-types.js'
+
+import { renderedPageTitleID } from '../../../../../shared.js'
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Blocks } from '../../_components/Blocks/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Hero } from '../../_components/Hero/index.js'
+
+export const PageClient: React.FC<{
+  page: PageType
+}> = ({ page: initialPage }) => {
+  const { data } = useLivePreview<PageType>({
+    depth: 2,
+    initialData: initialPage,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <Hero {...data?.hero} />
+      <Blocks
+        blocks={[
+          ...(data?.layout ?? []),
+          {
+            blockName: 'Relationships',
+            blockType: 'relationships',
+            data,
+          },
+        ]}
+        disableTopPadding={
+          !data?.hero || data?.hero?.type === 'none' || data?.hero?.type === 'lowImpact'
+        }
+      />
+      <Gutter>
+        <div id={renderedPageTitleID}>{`For Testing: ${data.title}`}</div>
+      </Gutter>
+    </React.Fragment>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.tsx b/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.tsx
new file mode 100644
index 0000000000..69d394d4d1
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/[slug]/page.tsx
@@ -0,0 +1,41 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { getDoc } from '../../_api/getDoc.js'
+import { getDocs } from '../../_api/getDocs.js'
+import { PageClient } from './page.client.js'
+
+type Args = {
+  params: Promise<{ slug?: string }>
+}
+export default async function Page({ params: paramsPromise }: Args) {
+  const { slug = 'home' } = await paramsPromise
+  let page: null | Page = null
+
+  try {
+    page = await getDoc<Page>({
+      slug,
+      collection: 'pages',
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+
+  if (!page) {
+    return notFound()
+  }
+
+  return <PageClient page={page} />
+}
+
+export async function generateStaticParams() {
+  process.env.PAYLOAD_DROP_DATABASE = 'false'
+  try {
+    const pages = await getDocs<Page>('pages')
+    return pages?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.client.tsx b/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.client.tsx
new file mode 100644
index 0000000000..7da2cc14da
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.client.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import { Gutter } from '@payloadcms/ui'
+import React from 'react'
+
+import type { Post as PostType } from '../../../../../../payload-types.js'
+
+import { postsSlug, renderedPageTitleID } from '../../../../../../shared.js'
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Blocks } from '../../../_components/Blocks/index.js'
+import { PostHero } from '../../../_heros/PostHero/index.js'
+
+export const PostClient: React.FC<{
+  post: PostType
+}> = ({ post: initialPost }) => {
+  const { data } = useLivePreview<PostType>({
+    depth: 2,
+    initialData: initialPost,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <PostHero post={data} />
+      <Blocks blocks={data?.layout} />
+      <Blocks
+        blocks={[
+          {
+            blockName: 'Related Posts',
+            blockType: 'relatedPosts',
+            docs: data?.relatedPosts,
+            introContent: [
+              {
+                type: 'h4',
+                children: [
+                  {
+                    text: 'Related posts',
+                  },
+                ],
+              },
+              {
+                type: 'p',
+                children: [
+                  {
+                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
+                  },
+                  {
+                    type: 'link',
+                    children: [
+                      {
+                        text: 'navigate to the admin dashboard',
+                      },
+                    ],
+                    url: `/admin/collections/posts/${data?.id}`,
+                  },
+                  {
+                    text: '.',
+                  },
+                ],
+              },
+            ],
+            relationTo: postsSlug,
+          },
+        ]}
+        disableTopPadding
+      />
+      <Gutter>
+        <div id={renderedPageTitleID}>{`For Testing: ${data.title}`}</div>
+      </Gutter>
+    </React.Fragment>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.tsx b/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.tsx
new file mode 100644
index 0000000000..4066ef226e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/posts/[slug]/page.tsx
@@ -0,0 +1,45 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Post } from '../../../../../../payload-types.js'
+
+import { postsSlug } from '../../../../../../shared.js'
+import { getDoc } from '../../../_api/getDoc.js'
+import { getDocs } from '../../../_api/getDocs.js'
+import { PostClient } from './page.client.js'
+
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Post({ params: paramsPromise }: Args) {
+  const { slug = '' } = await paramsPromise
+  let post: null | Post = null
+
+  try {
+    post = await getDoc<Post>({
+      slug,
+      collection: postsSlug,
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+
+  if (!post) {
+    notFound()
+  }
+
+  return <PostClient post={post} />
+}
+
+export async function generateStaticParams() {
+  process.env.PAYLOAD_DROP_DATABASE = 'false'
+  try {
+    const ssrPosts = await getDocs<Post>(postsSlug)
+    return ssrPosts?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/RefreshRouteOnSave.tsx b/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/RefreshRouteOnSave.tsx
new file mode 100644
index 0000000000..046ec440b4
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/RefreshRouteOnSave.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
+import { useRouter } from 'next/navigation.js'
+import React from 'react'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+
+export const RefreshRouteOnSave: React.FC = () => {
+  const router = useRouter()
+  return <PayloadLivePreview refresh={() => router.refresh()} serverURL={PAYLOAD_SERVER_URL} />
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx b/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx
new file mode 100644
index 0000000000..ab47d80c95
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx
@@ -0,0 +1,52 @@
+import { Gutter } from '@payloadcms/ui'
+import { notFound } from 'next/navigation.js'
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../../payload-types.js'
+
+import { renderedPageTitleID, ssrAutosavePagesSlug } from '../../../../../../shared.js'
+import { getDoc } from '../../../_api/getDoc.js'
+import { getDocs } from '../../../_api/getDocs.js'
+import { Blocks } from '../../../_components/Blocks/index.js'
+import { Hero } from '../../../_components/Hero/index.js'
+import { RefreshRouteOnSave } from './RefreshRouteOnSave.js'
+
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function SSRAutosavePage({ params: paramsPromise }: Args) {
+  const { slug = '' } = await paramsPromise
+  const data = await getDoc<Page>({
+    slug,
+    collection: ssrAutosavePagesSlug,
+    draft: true,
+  })
+
+  if (!data) {
+    notFound()
+  }
+
+  return (
+    <Fragment>
+      <RefreshRouteOnSave />
+      <Hero {...data?.hero} />
+      <Blocks blocks={data?.layout} />
+      <Gutter>
+        <div id={renderedPageTitleID}>{`For Testing: ${data.title}`}</div>
+      </Gutter>
+    </Fragment>
+  )
+}
+
+export async function generateStaticParams() {
+  process.env.PAYLOAD_DROP_DATABASE = 'false'
+  try {
+    const ssrPages = await getDocs<Page>(ssrAutosavePagesSlug)
+    return ssrPages?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/RefreshRouteOnSave.tsx b/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/RefreshRouteOnSave.tsx
new file mode 100644
index 0000000000..046ec440b4
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/RefreshRouteOnSave.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
+import { useRouter } from 'next/navigation.js'
+import React from 'react'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+
+export const RefreshRouteOnSave: React.FC = () => {
+  const router = useRouter()
+  return <PayloadLivePreview refresh={() => router.refresh()} serverURL={PAYLOAD_SERVER_URL} />
+}
diff --git a/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/page.tsx b/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/page.tsx
new file mode 100644
index 0000000000..b87055e72c
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/(pages)/ssr/[slug]/page.tsx
@@ -0,0 +1,52 @@
+import { Gutter } from '@payloadcms/ui'
+import { notFound } from 'next/navigation.js'
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../../payload-types.js'
+
+import { renderedPageTitleID, ssrPagesSlug } from '../../../../../../shared.js'
+import { getDoc } from '../../../_api/getDoc.js'
+import { getDocs } from '../../../_api/getDocs.js'
+import { Blocks } from '../../../_components/Blocks/index.js'
+import { Hero } from '../../../_components/Hero/index.js'
+import { RefreshRouteOnSave } from './RefreshRouteOnSave.js'
+
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function SSRPage({ params: paramsPromise }: Args) {
+  const { slug = ' ' } = await paramsPromise
+  const data = await getDoc<Page>({
+    slug,
+    collection: ssrPagesSlug,
+    draft: true,
+  })
+
+  if (!data) {
+    notFound()
+  }
+
+  return (
+    <Fragment>
+      <RefreshRouteOnSave />
+      <Hero {...data?.hero} />
+      <Blocks blocks={data?.layout} />
+      <Gutter>
+        <div id={renderedPageTitleID}>{`For Testing: ${data.title}`}</div>
+      </Gutter>
+    </Fragment>
+  )
+}
+
+export async function generateStaticParams() {
+  process.env.PAYLOAD_DROP_DATABASE = 'false'
+  try {
+    const ssrPages = await getDocs<Page>(ssrPagesSlug)
+    return ssrPages?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_api/getDoc.ts b/test/live-preview/prod/app/live-preview/_api/getDoc.ts
new file mode 100644
index 0000000000..2aee9a8c08
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_api/getDoc.ts
@@ -0,0 +1,37 @@
+import type { CollectionSlug, Where } from 'payload'
+
+import config from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities/getPayloadHMR.js'
+
+export const getDoc = async <T>(args: {
+  collection: CollectionSlug
+  depth?: number
+  draft?: boolean
+  slug?: string
+}): Promise<T> => {
+  const payload = await getPayloadHMR({ config })
+  const { slug, collection, depth = 2, draft } = args || {}
+
+  const where: Where = {}
+
+  if (slug) {
+    where.slug = {
+      equals: slug,
+    }
+  }
+
+  try {
+    const { docs } = await payload.find({
+      collection,
+      depth,
+      where,
+      draft,
+    })
+
+    if (docs[0]) return docs[0] as T
+  } catch (err) {
+    console.log('Error getting doc', err)
+  }
+
+  throw new Error('Error getting doc')
+}
diff --git a/test/live-preview/prod/app/live-preview/_api/getDocs.ts b/test/live-preview/prod/app/live-preview/_api/getDocs.ts
new file mode 100644
index 0000000000..d802e7202d
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_api/getDocs.ts
@@ -0,0 +1,20 @@
+import config from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities/getPayloadHMR.js'
+
+export const getDocs = async <T>(collection: string): Promise<T[]> => {
+  const payload = await getPayloadHMR({ config })
+
+  try {
+    const { docs } = await payload.find({
+      collection,
+      depth: 0,
+      limit: 100,
+    })
+
+    return docs as T[]
+  } catch (err) {
+    console.error(err)
+  }
+
+  throw new Error('Error getting docs')
+}
diff --git a/test/live-preview/prod/app/live-preview/_api/getFooter.ts b/test/live-preview/prod/app/live-preview/_api/getFooter.ts
new file mode 100644
index 0000000000..8f4604d056
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_api/getFooter.ts
@@ -0,0 +1,20 @@
+import config from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities/getPayloadHMR.js'
+
+import type { Footer } from '../../../../payload-types.js'
+
+export async function getFooter(): Promise<Footer> {
+  const payload = await getPayloadHMR({ config })
+
+  try {
+    const footer = await payload.findGlobal({
+      slug: 'footer',
+    })
+
+    return footer
+  } catch (err) {
+    console.error(err)
+  }
+
+  throw new Error('Error getting footer.')
+}
diff --git a/test/live-preview/prod/app/live-preview/_api/getHeader.ts b/test/live-preview/prod/app/live-preview/_api/getHeader.ts
new file mode 100644
index 0000000000..717ed7508c
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_api/getHeader.ts
@@ -0,0 +1,20 @@
+import config from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities/getPayloadHMR.js'
+
+import type { Header } from '../../../../payload-types.js'
+
+export async function getHeader(): Promise<Header> {
+  const payload = await getPayloadHMR({ config })
+
+  try {
+    const header = await payload.findGlobal({
+      slug: 'header',
+    })
+
+    return header
+  } catch (err) {
+    console.error(err)
+  }
+
+  throw new Error('Error getting header.')
+}
diff --git a/test/live-preview/prod/app/live-preview/_api/serverURL.ts b/test/live-preview/prod/app/live-preview/_api/serverURL.ts
new file mode 100644
index 0000000000..84de9f1ec3
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_api/serverURL.ts
@@ -0,0 +1 @@
+export const PAYLOAD_SERVER_URL = 'http://localhost:3000'
diff --git a/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.module.scss
new file mode 100644
index 0000000000..8cd8776e7a
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.module.scss
@@ -0,0 +1,13 @@
+@import '../../_css/common';
+
+.archiveBlock {
+  position: relative;
+}
+
+.introContent {
+  margin-bottom: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-bottom: calc(var(--base) * 2);
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.tsx
new file mode 100644
index 0000000000..f81710deb2
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from './types.js'
+
+import { CollectionArchive } from '../../_components/CollectionArchive/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export const ArchiveBlock: React.FC<
+  {
+    id?: string
+  } & ArchiveBlockProps
+> = (props) => {
+  const {
+    id,
+    categories,
+    introContent,
+    limit,
+    populateBy,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    selectedDocs,
+  } = props
+
+  return (
+    <div className={classes.archiveBlock} id={`block-${id}`}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <CollectionArchive
+        categories={categories}
+        limit={limit}
+        populateBy={populateBy}
+        populatedDocs={populatedDocs}
+        populatedDocsTotal={populatedDocsTotal}
+        relationTo={relationTo}
+        selectedDocs={selectedDocs}
+        sort="-publishedDate"
+      />
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/types.ts b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/types.ts
new file mode 100644
index 0000000000..b28c15a1a1
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/ArchiveBlock/types.ts
@@ -0,0 +1,6 @@
+import type { Page } from '../../../../payload-types.js'
+
+export type ArchiveBlockProps = Extract<
+  Exclude<Page['layout'], undefined>[0],
+  { blockType: 'archive' }
+>
diff --git a/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.module.scss
new file mode 100644
index 0000000000..b594e0a74f
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.module.scss
@@ -0,0 +1,47 @@
+@use '../../_css/queries.scss' as *;
+
+$spacer-h: calc(var(--block-padding) / 2);
+
+.callToAction {
+  padding-left: $spacer-h;
+  padding-right: $spacer-h;
+  position: relative;
+  background-color: var(--color-base-100);
+  color: var(--color-base-1000);
+}
+
+.invert {
+  background-color: var(--color-base-1000);
+  color: var(--color-base-0);
+}
+
+.wrap {
+  display: flex;
+  gap: $spacer-h;
+  align-items: center;
+
+  @include mid-break {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.content {
+  flex-grow: 1;
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  flex-shrink: 0;
+
+  > * {
+    margin-bottom: calc(var(--base) / 2);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.tsx
new file mode 100644
index 0000000000..7dbd878985
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/CallToAction/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'cta' }>
+
+export const CallToActionBlock: React.FC<
+  {
+    id?: string
+  } & Props
+> = ({ invertBackground, links, richText }) => {
+  return (
+    <Gutter>
+      <VerticalPadding
+        className={[classes.callToAction, invertBackground && classes.invert]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className={classes.wrap}>
+          <div className={classes.content}>
+            <RichText className={classes.richText} content={richText} />
+          </div>
+          <div className={classes.linkGroup}>
+            {(links || []).map(({ link }, i) => {
+              return <CMSLink key={i} {...link} invert={invertBackground} />
+            })}
+          </div>
+        </div>
+      </VerticalPadding>
+    </Gutter>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/Content/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/Content/index.module.scss
new file mode 100644
index 0000000000..63a93d91b2
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/Content/index.module.scss
@@ -0,0 +1,42 @@
+@import '../../_css/common';
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--base) calc(var(--base) * 2);
+
+  @include mid-break {
+    grid-template-columns: repeat(6, 1fr);
+    gap: var(--base) var(--base);
+  }
+}
+
+.column--oneThird {
+  grid-column-end: span 4;
+}
+
+.column--half {
+  grid-column-end: span 6;
+}
+
+.column--twoThirds {
+  grid-column-end: span 8;
+}
+
+.column--full {
+  grid-column-end: span 12;
+}
+
+.column {
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
+
+.link {
+  margin-top: var(--base);
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/Content/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/Content/index.tsx
new file mode 100644
index 0000000000..9e260609cf
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/Content/index.tsx
@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'content' }>
+
+export const ContentBlock: React.FC<
+  {
+    id?: string
+  } & Props
+> = (props) => {
+  const { columns } = props
+
+  return (
+    <Gutter className={classes.content}>
+      <div className={classes.grid}>
+        {columns && columns.length > 0 ? (
+          <Fragment>
+            {columns.map((col, index) => {
+              const { enableLink, link, richText, size } = col
+
+              return (
+                <div className={[classes.column, classes[`column--${size}`]].join(' ')} key={index}>
+                  <RichText content={richText} />
+                  {enableLink && <CMSLink className={classes.link} {...link} />}
+                </div>
+              )
+            })}
+          </Fragment>
+        ) : null}
+      </div>
+    </Gutter>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.module.scss
new file mode 100644
index 0000000000..5e0d91686d
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.module.scss
@@ -0,0 +1,8 @@
+.mediaBlock {
+  position: relative;
+}
+
+.caption {
+  color: var(--color-base-500);
+  margin-top: var(--base);
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.tsx
new file mode 100644
index 0000000000..f1e5db05de
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/MediaBlock/index.tsx
@@ -0,0 +1,42 @@
+import type { StaticImageData } from 'next/image.js'
+
+import React from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = {
+  id?: string
+  staticImage?: StaticImageData
+} & Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'mediaBlock' }>
+
+export const MediaBlock: React.FC<Props> = (props) => {
+  const { media, position = 'default', staticImage } = props
+
+  let caption
+  if (media && typeof media === 'object') caption = media.caption
+
+  return (
+    <div className={classes.mediaBlock}>
+      {position === 'fullscreen' && (
+        <div className={classes.fullscreen}>
+          <Media resource={media} src={staticImage} />
+        </div>
+      )}
+      {position === 'default' && (
+        <Gutter>
+          <Media resource={media} src={staticImage} />
+        </Gutter>
+      )}
+      {caption && (
+        <Gutter className={classes.caption}>
+          <RichText content={caption} />
+        </Gutter>
+      )}
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.module.scss
new file mode 100644
index 0000000000..39576d74bd
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.module.scss
@@ -0,0 +1,58 @@
+@import '../../_css/common';
+
+.introContent {
+  position: relative;
+  margin-bottom: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--base) 40px;
+
+  @include mid-break {
+    grid-template-columns: repeat(6, 1fr);
+    gap: calc(var(--base) / 2) var(--base);
+  }
+}
+
+.column {
+  grid-column-end: span 12;
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
+
+.cols-half {
+  grid-column-end: span 6;
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
+
+.cols-thirds {
+  grid-column-end: span 3;
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.tsx
new file mode 100644
index 0000000000..25d40c18ab
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/RelatedPosts/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+
+import type { Post } from '../../../../../payload-types.js'
+
+import { Card } from '../../_components/Card/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelatedPostsProps = {
+  blockName: string
+  blockType: 'relatedPosts'
+  docs?: (Post | string)[] | null
+  introContent?: any
+  relationTo: 'posts'
+}
+
+export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
+  const { docs, introContent, relationTo } = props
+
+  return (
+    <div className={classes.relatedPosts}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <Gutter>
+        <div className={classes.grid}>
+          {docs?.map((doc, index) => {
+            if (typeof doc === 'string') return null
+
+            return (
+              <div
+                className={[
+                  classes.column,
+                  docs.length === 2 && classes['cols-half'],
+                  docs.length >= 3 && classes['cols-thirds'],
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key={index}
+              >
+                <Card doc={doc} relationTo={relationTo} showCategories />
+              </div>
+            )
+          })}
+        </div>
+      </Gutter>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.module.scss b/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.module.scss
new file mode 100644
index 0000000000..e049ad360b
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.module.scss
@@ -0,0 +1,17 @@
+@import '../../_css/common';
+
+.relationshipsBlock {
+}
+
+.array {
+  border: 1px solid var(--color-base-100);
+  padding: var(--base);
+
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.tsx b/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.tsx
new file mode 100644
index 0000000000..42e92d6e21
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_blocks/Relationships/index.tsx
@@ -0,0 +1,196 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelationshipsBlockProps = {
+  blockName: string
+  blockType: 'relationships'
+  data: Page
+}
+
+export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) => {
+  const { data } = props
+
+  return (
+    <div className={classes.relationshipsBlock}>
+      <Gutter>
+        <p>
+          This block is for testing purposes only. It renders every possible type of relationship.
+        </p>
+        <p>
+          <b>Rich Text — Slate:</b>
+        </p>
+        {data?.richTextSlate && <RichText content={data.richTextSlate} renderUploadFilenameOnly />}
+        <p>
+          <b>Rich Text — Lexical:</b>
+        </p>
+        {data?.richTextLexical && (
+          <RichText content={data.richTextLexical} renderUploadFilenameOnly serializer="lexical" />
+        )}
+        <p>
+          <b>Upload:</b>
+        </p>
+        {data?.relationshipAsUpload ? (
+          <div>
+            {typeof data?.relationshipAsUpload === 'string'
+              ? data?.relationshipAsUpload
+              : data?.relationshipAsUpload.filename}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has One:</b>
+        </p>
+        {data?.relationshipMonoHasOne ? (
+          <div>
+            {typeof data?.relationshipMonoHasOne === 'string'
+              ? data?.relationshipMonoHasOne
+              : data?.relationshipMonoHasOne.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has Many:</b>
+        </p>
+        {data?.relationshipMonoHasMany ? (
+          <Fragment>
+            {data?.relationshipMonoHasMany.length
+              ? data?.relationshipMonoHasMany?.map((item, index) =>
+                  item ? (
+                    <div key={index}>{typeof item === 'string' ? item : item.title}</div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has One:</b>
+        </p>
+        {data?.relationshipPolyHasOne ? (
+          <div>
+            {typeof data?.relationshipPolyHasOne.value === 'string'
+              ? data?.relationshipPolyHasOne.value
+              : data?.relationshipPolyHasOne.value.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has Many:</b>
+        </p>
+        {data?.relationshipPolyHasMany ? (
+          <Fragment>
+            {data?.relationshipPolyHasMany.length
+              ? data?.relationshipPolyHasMany?.map((item, index) =>
+                  item.value ? (
+                    <div key={index}>
+                      {typeof item.value === 'string' ? item.value : item.value.title}
+                    </div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Array of Relationships:</b>
+        </p>
+        {data?.arrayOfRelationships?.map((item, index) => (
+          <div className={classes.array} key={index}>
+            <p>
+              <b>Rich Text:</b>
+            </p>
+            {item?.richTextInArray && <RichText content={item.richTextInArray} />}
+            <p>
+              <b>Upload:</b>
+            </p>
+            {item?.uploadInArray ? (
+              <div>
+                {typeof item?.uploadInArray === 'string'
+                  ? item?.uploadInArray
+                  : item?.uploadInArray.filename}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayMonoHasOne === 'string'
+                  ? item?.relationshipInArrayMonoHasOne
+                  : item?.relationshipInArrayMonoHasOne.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayMonoHasMany.length
+                  ? item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
+                      rel ? (
+                        <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayPolyHasOne.value === 'string'
+                  ? item?.relationshipInArrayPolyHasOne.value
+                  : item?.relationshipInArrayPolyHasOne.value.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayPolyHasMany.length
+                  ? item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
+                      rel.value ? (
+                        <div key={relIndex}>
+                          {typeof rel.value === 'string' ? rel.value : rel.value.title}
+                        </div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+          </div>
+        ))}
+      </Gutter>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.module.scss b/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.module.scss
new file mode 100644
index 0000000000..b373761c1f
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.module.scss
@@ -0,0 +1,3 @@
+.invert {
+  background-color: var(--color-base-750);
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.tsx b/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.tsx
new file mode 100644
index 0000000000..3994c5cca6
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/BackgroundColor/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children?: React.ReactNode
+  className?: string
+  id?: string
+  invert?: boolean | null
+}
+
+export const BackgroundColor: React.FC<Props> = (props) => {
+  const { id, children, className, invert } = props
+
+  return (
+    <div className={[invert && classes.invert, className].filter(Boolean).join(' ')} id={id}>
+      {children}
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Blocks/index.tsx b/test/live-preview/prod/app/live-preview/_components/Blocks/index.tsx
new file mode 100644
index 0000000000..881ba7b3b7
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Blocks/index.tsx
@@ -0,0 +1,88 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+import type { RelationshipsBlockProps } from '../../_blocks/Relationships/index.js'
+import type { VerticalPaddingOptions } from '../VerticalPadding/index.js'
+
+import { ArchiveBlock } from '../../_blocks/ArchiveBlock/index.js'
+import { CallToActionBlock } from '../../_blocks/CallToAction/index.js'
+import { ContentBlock } from '../../_blocks/Content/index.js'
+import { MediaBlock } from '../../_blocks/MediaBlock/index.js'
+import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts/index.js'
+import { RelationshipsBlock } from '../../_blocks/Relationships/index.js'
+import { toKebabCase } from '../../_utilities/toKebabCase.js'
+import { BackgroundColor } from '../BackgroundColor/index.js'
+import { VerticalPadding } from '../VerticalPadding/index.js'
+
+const blockComponents = {
+  archive: ArchiveBlock,
+  content: ContentBlock,
+  cta: CallToActionBlock,
+  mediaBlock: MediaBlock,
+  relatedPosts: RelatedPosts,
+  relationships: RelationshipsBlock,
+}
+
+type Block = NonNullable<Page['layout']>[number]
+
+export const Blocks: React.FC<{
+  blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
+  disableTopPadding?: boolean
+}> = (props) => {
+  const { blocks, disableTopPadding } = props
+
+  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+  if (hasBlocks) {
+    return (
+      <Fragment>
+        {blocks.map((block, index) => {
+          const { blockName, blockType } = block
+
+          if (blockType && blockType in blockComponents) {
+            const Block = blockComponents[blockType]
+
+            // the cta block is containerized, so we don't consider it to be inverted at the block-level
+            const blockIsInverted =
+              'invertBackground' in block && blockType !== 'cta' ? block.invertBackground : false
+            const prevBlock = blocks[index - 1]
+
+            const prevBlockInverted =
+              prevBlock && 'invertBackground' in prevBlock && prevBlock?.invertBackground
+
+            const isPrevSame = Boolean(blockIsInverted) === Boolean(prevBlockInverted)
+
+            let paddingTop: VerticalPaddingOptions = 'large'
+            let paddingBottom: VerticalPaddingOptions = 'large'
+
+            if (prevBlock && isPrevSame) {
+              paddingTop = 'none'
+            }
+
+            if (index === blocks.length - 1) {
+              paddingBottom = 'large'
+            }
+
+            if (disableTopPadding && index === 0) {
+              paddingTop = 'none'
+            }
+
+            if (Block) {
+              return (
+                <BackgroundColor invert={blockIsInverted} key={index}>
+                  <VerticalPadding bottom={paddingBottom} top={paddingTop}>
+                    {/* @ts-expect-error */}
+                    <Block id={toKebabCase(blockName)} {...block} />
+                  </VerticalPadding>
+                </BackgroundColor>
+              )
+            }
+          }
+          return null
+        })}
+      </Fragment>
+    )
+  }
+
+  return null
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Button/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Button/index.module.scss
new file mode 100644
index 0000000000..46491c177e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Button/index.module.scss
@@ -0,0 +1,72 @@
+@import '../../_css/type.scss';
+
+.button {
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  background-color: transparent;
+  text-decoration: none;
+  display: inline-flex;
+  padding: 12px 24px;
+  font-family: inherit;
+  line-height: inherit;
+  font-size: inherit;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  svg {
+    margin-right: calc(var(--base) / 2);
+    width: var(--base);
+    height: var(--base);
+  }
+}
+
+.label {
+  @extend %label;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
+.appearance--primary {
+  background-color: var(--color-base-1000);
+  color: var(--color-base-0);
+}
+
+.appearance--secondary {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-base-1000);
+}
+
+.primary--invert {
+  background-color: var(--color-base-0);
+  color: var(--color-base-1000);
+}
+
+.secondary--invert {
+  background-color: var(--color-base-1000);
+  box-shadow: inset 0 0 0 1px var(--color-base-0);
+}
+
+.appearance--default {
+  padding: 0;
+  color: var(--theme-text);
+}
+
+.appearance--none {
+  padding: 0;
+  color: var(--theme-text);
+
+  &:local() {
+    .label {
+      text-transform: none;
+      line-height: inherit;
+      font-size: inherit;
+    }
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Button/index.tsx b/test/live-preview/prod/app/live-preview/_components/Button/index.tsx
new file mode 100644
index 0000000000..241e9bd3f5
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Button/index.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import type { ElementType } from 'react'
+
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export type Props = {
+  appearance?: 'default' | 'none' | 'primary' | 'secondary'
+  className?: string
+  disabled?: boolean
+  el?: 'a' | 'button' | 'link'
+  href?: string
+  invert?: boolean
+  label?: string
+  newTab?: boolean
+  onClick?: () => void
+  type?: 'button' | 'submit'
+}
+
+export const Button: React.FC<Props> = ({
+  type = 'button',
+  appearance,
+  className: classNameFromProps,
+  disabled,
+  el: elFromProps = 'link',
+  href,
+  invert,
+  label,
+  newTab,
+  onClick,
+}) => {
+  let el = elFromProps
+
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  const className = [
+    classes.button,
+    classNameFromProps,
+    classes[`appearance--${appearance}`],
+    invert && classes[`${appearance}--invert`],
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const content = (
+    <div className={classes.content}>
+      <span className={classes.label}>{label}</span>
+    </div>
+  )
+
+  if (onClick || type === 'submit') el = 'button'
+
+  if (el === 'link') {
+    return (
+      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
+        {content}
+      </Link>
+    )
+  }
+
+  const Element: ElementType = el
+
+  return (
+    <Element
+      className={className}
+      href={href}
+      type={type}
+      {...newTabProps}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {content}
+    </Element>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Card/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Card/index.module.scss
new file mode 100644
index 0000000000..da2f9e440e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Card/index.module.scss
@@ -0,0 +1,106 @@
+@import '../../_css/common';
+
+.card {
+  border: 1px var(--color-base-200) solid;
+  border-radius: 4px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.horizontal {
+  flex-direction: row;
+
+  &:local() {
+    .mediaWrapper {
+      width: 150px;
+
+      @include mid-break {
+        width: 100%;
+      }
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+  }
+}
+
+.content {
+  padding: var(--base);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
+
+  @include small-break {
+    padding: calc(var(--base) / 2);
+    gap: calc(var(--base) / 4);
+  }
+}
+
+.title {
+  margin: 0;
+}
+
+.titleLink {
+  text-decoration: none;
+}
+
+.centerAlign {
+  align-items: center;
+}
+
+.body {
+  flex-grow: 1;
+}
+
+.leader {
+  @extend %label;
+  display: flex;
+  gap: var(--base);
+}
+
+.description {
+  margin: 0;
+}
+
+.hideImageOnMobile {
+  @include mid-break {
+    display: none;
+  }
+}
+
+.mediaWrapper {
+  text-decoration: none;
+  display: block;
+  position: relative;
+  aspect-ratio: 16 / 9;
+}
+
+.image {
+  object-fit: cover;
+}
+
+.placeholder {
+  background-color: var(--color-base-50);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+
+  @include mid-break {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Card/index.tsx b/test/live-preview/prod/app/live-preview/_components/Card/index.tsx
new file mode 100644
index 0000000000..5cdc765f88
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Card/index.tsx
@@ -0,0 +1,88 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../../payload-types.js'
+
+import { Media } from '../Media/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const Card: React.FC<{
+  alignItems?: 'center'
+  className?: string
+  doc?: Post
+  hideImagesOnMobile?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  relationTo?: 'posts'
+  showCategories?: boolean
+  title?: string
+}> = (props) => {
+  const {
+    className,
+    doc,
+    orientation = 'vertical',
+    relationTo,
+    showCategories,
+    title: titleFromProps,
+  } = props
+
+  const { slug, categories, meta, title } = doc || {}
+  const { description, image: metaImage } = meta || {}
+
+  const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+  const titleToUse = titleFromProps || title
+  const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+  const href = `/live-preview/${relationTo}/${slug}`
+
+  return (
+    <div
+      className={[classes.card, className, orientation && classes[orientation]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <Link className={classes.mediaWrapper} href={href}>
+        {!metaImage && <div className={classes.placeholder}>No image</div>}
+        {metaImage && typeof metaImage !== 'string' && (
+          <Media fill imgClassName={classes.image} resource={metaImage} />
+        )}
+      </Link>
+      <div className={classes.content}>
+        {showCategories && hasCategories && (
+          <div className={classes.leader}>
+            {showCategories && hasCategories && (
+              <div>
+                {categories?.map((category, index) => {
+                  const titleFromCategory = typeof category === 'string' ? category : category.title
+
+                  const categoryTitle = titleFromCategory || 'Untitled category'
+
+                  const isLast = index === categories.length - 1
+
+                  return (
+                    <Fragment key={index}>
+                      {categoryTitle}
+                      {!isLast && <Fragment>, &nbsp;</Fragment>}
+                    </Fragment>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {titleToUse && (
+          <h4 className={classes.title}>
+            <Link className={classes.titleLink} href={href}>
+              {titleToUse}
+            </Link>
+          </h4>
+        )}
+        {description && (
+          <div className={classes.body}>
+            {description && <p className={classes.description}>{sanitizedDescription}</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Chevron/index.tsx b/test/live-preview/prod/app/live-preview/_components/Chevron/index.tsx
new file mode 100644
index 0000000000..4364a211f3
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Chevron/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export const Chevron: React.FC<{
+  className?: string
+  rotate?: number
+}> = ({ className, rotate }) => {
+  return (
+    <svg
+      className={className}
+      height="100%"
+      style={{
+        transform: typeof rotate === 'number' ? `rotate(${rotate || 0}deg)` : undefined,
+      }}
+      viewBox="0 0 24 24"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"
+        fill="none"
+        stroke="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.module.scss b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.module.scss
new file mode 100644
index 0000000000..82950dbe3d
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.module.scss
@@ -0,0 +1,73 @@
+@import '../../../_css/common';
+
+// this is to make up for the space taken by the fixed header, since the scroll method does not accept an offset parameter
+.scrollRef {
+  position: absolute;
+  left: 0;
+  top: calc(var(--base) * -5);
+  @include mid-break {
+    top: calc(var(--base) * -2);
+  }
+}
+
+.introContent {
+  position: relative;
+  margin-bottom: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+  }
+}
+
+.resultCountWrapper {
+  display: flex;
+  margin-bottom: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+  }
+}
+
+.pageRange {
+  margin-bottom: var(--base);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+  }
+}
+
+.list {
+  position: relative;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--base) 40px;
+
+  @include mid-break {
+    grid-template-columns: repeat(6, 1fr);
+    gap: calc(var(--base) / 2) var(--base);
+  }
+}
+
+.column {
+  grid-column-end: span 4;
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
+
+.pagination {
+  margin-top: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-top: var(--base);
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx
new file mode 100644
index 0000000000..f6d976f87c
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import * as qs from 'qs-esm'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+
+import type { Post } from '../../../../../../payload-types.js'
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import { PageRange } from '../../PageRange/index.js'
+import { Pagination } from '../../Pagination/index.js'
+import classes from './index.module.scss'
+
+type Result = {
+  docs: (Post | string)[]
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  nextPage: number
+  page: number
+  prevPage: number
+  totalDocs: number
+  totalPages: number
+}
+
+export type Props = {
+  className?: string
+  onResultChange?: (result: Result) => void
+  showPageRange?: boolean
+  sort?: string
+} & Omit<ArchiveBlockProps, 'blockType'>
+
+export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
+  const {
+    categories: catsFromProps,
+    className,
+    limit = 10,
+    onResultChange,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    showPageRange,
+    sort = '-createdAt',
+  } = props
+
+  const [results, setResults] = useState<Result>({
+    docs: populatedDocs?.map((doc) => doc.value) || [],
+    hasNextPage: false,
+    hasPrevPage: false,
+    nextPage: 1,
+    page: 1,
+    prevPage: 1,
+    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
+    totalPages: 1,
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const hasHydrated = useRef(false)
+  const [page, setPage] = useState(1)
+
+  const scrollToRef = useCallback(() => {
+    const { current } = scrollRef
+    if (current) {
+      // current.scrollIntoView({
+      //   behavior: 'smooth',
+      // })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isLoading && typeof results.page !== 'undefined') {
+      // scrollToRef()
+    }
+  }, [isLoading, scrollToRef, results])
+
+  useEffect(() => {
+    // hydrate the block with fresh content after first render
+    // don't show loader unless the request takes longer than x ms
+    // and don't show it during initial hydration
+    const timer = setTimeout(() => {
+      if (hasHydrated) {
+        setIsLoading(true)
+      }
+    }, 500)
+
+    const searchQuery = qs.stringify(
+      {
+        depth: 1,
+        limit,
+        page,
+        sort,
+        where: {
+          ...(catsFromProps && catsFromProps?.length > 0
+            ? {
+                categories: {
+                  in:
+                    typeof catsFromProps === 'string'
+                      ? [catsFromProps]
+                      : catsFromProps
+                          .map((cat) => (typeof cat === 'object' && cat !== null ? cat.id : cat))
+                          .join(','),
+                },
+              }
+            : {}),
+        },
+      },
+      { encode: false },
+    )
+
+    const makeRequest = async () => {
+      try {
+        const req = await fetch(`${PAYLOAD_SERVER_URL}/api/${relationTo}?${searchQuery}`)
+        const json = await req.json()
+        clearTimeout(timer)
+        hasHydrated.current = true
+
+        const { docs } = json as { docs: Post[] }
+
+        if (docs && Array.isArray(docs)) {
+          setResults(json)
+          setIsLoading(false)
+          if (typeof onResultChange === 'function') {
+            onResultChange(json)
+          }
+        }
+      } catch (err) {
+        console.warn(err) // eslint-disable-line no-console
+        setIsLoading(false)
+        setError(`Unable to load "${relationTo} archive" data at this time.`)
+      }
+    }
+
+    void makeRequest()
+
+    return () => {
+      if (timer) clearTimeout(timer)
+    }
+  }, [page, catsFromProps, relationTo, onResultChange, sort, limit])
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <div className={classes.scrollRef} ref={scrollRef} />
+      {!isLoading && error && <Gutter>{error}</Gutter>}
+      <Fragment>
+        {showPageRange !== false && (
+          <Gutter>
+            <div className={classes.pageRange}>
+              <PageRange
+                collection={relationTo}
+                currentPage={results.page}
+                limit={limit}
+                totalDocs={results.totalDocs}
+              />
+            </div>
+          </Gutter>
+        )}
+        <Gutter>
+          <div className={classes.grid}>
+            {results.docs?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+          {results.totalPages > 1 && (
+            <Pagination
+              className={classes.pagination}
+              onClick={setPage}
+              page={results.page}
+              totalPages={results.totalPages}
+            />
+          )}
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.module.scss b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.module.scss
new file mode 100644
index 0000000000..cd65ddd2c8
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.module.scss
@@ -0,0 +1,25 @@
+@import '../../../_css/common';
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--base) 40px;
+
+  @include mid-break {
+    grid-template-columns: repeat(6, 1fr);
+    gap: calc(var(--base) / 2) var(--base);
+  }
+}
+
+.column {
+  grid-column-end: span 4;
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 6;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx
new file mode 100644
index 0000000000..7c5b86d7c4
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import React, { Fragment } from 'react'
+
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import classes from './index.module.scss'
+
+export type Props = {
+  className?: string
+  selectedDocs?: ArchiveBlockProps['selectedDocs']
+}
+
+export const CollectionArchiveBySelection: React.FC<Props> = (props) => {
+  const { className, selectedDocs } = props
+
+  const result = selectedDocs?.map((doc) => doc.value)
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <Fragment>
+        <Gutter>
+          <div className={classes.grid}>
+            {result?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/CollectionArchive/index.tsx b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/index.tsx
new file mode 100644
index 0000000000..c137febdc1
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/CollectionArchive/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types.js'
+
+import { CollectionArchiveByCollection } from './PopulateByCollection/index.js'
+import { CollectionArchiveBySelection } from './PopulateBySelection/index.js'
+
+export type Props = {
+  className?: string
+  sort?: string
+} & Omit<ArchiveBlockProps, 'blockType'>
+
+export const CollectionArchive: React.FC<Props> = (props) => {
+  const { className, populateBy, selectedDocs } = props
+
+  if (populateBy === 'selection') {
+    return <CollectionArchiveBySelection className={className} selectedDocs={selectedDocs} />
+  }
+
+  if (populateBy === 'collection') {
+    return <CollectionArchiveByCollection {...props} className={className} />
+  }
+
+  return null
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Footer/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Footer/index.module.scss
new file mode 100644
index 0000000000..f42dc2080e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Footer/index.module.scss
@@ -0,0 +1,36 @@
+@use '../../_css/queries.scss' as *;
+
+.footer {
+  padding: calc(var(--base) * 4) 0;
+  background-color: var(--color-base-1000);
+  color: var(--color-base-0);
+
+  @include small-break {
+    padding: calc(var(--base) * 2) 0;
+  }
+}
+
+.wrap {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: calc(var(--base) / 2) var(--base);
+}
+
+.logo {
+  width: 150px;
+}
+
+.nav {
+  display: flex;
+  gap: calc(var(--base) / 4) var(--base);
+  align-items: center;
+  flex-wrap: wrap;
+  opacity: 1;
+  transition: opacity 100ms linear;
+  visibility: visible;
+
+  > * {
+    text-decoration: none;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Footer/index.tsx b/test/live-preview/prod/app/live-preview/_components/Footer/index.tsx
new file mode 100644
index 0000000000..32a96b2432
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Footer/index.tsx
@@ -0,0 +1,41 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { getFooter } from '../../_api/getFooter.js'
+import { Gutter } from '../Gutter/index.js'
+import { CMSLink } from '../Link/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Footer() {
+  const footer = await getFooter()
+
+  const navItems = footer?.navItems || []
+
+  return (
+    <footer className={classes.footer}>
+      <Gutter className={classes.wrap}>
+        <Link href="/">
+          <picture>
+            <img
+              alt="Payload Logo"
+              className={classes.logo}
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+            />
+          </picture>
+        </Link>
+        <nav className={classes.nav}>
+          {navItems.map(({ link }, i) => {
+            return <CMSLink key={i} {...link} />
+          })}
+          <Link href="/admin">Admin</Link>
+          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
+            Source Code
+          </Link>
+          <Link href="https://github.com/payloadcms/payload">Payload</Link>
+        </nav>
+      </Gutter>
+    </footer>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Gutter/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Gutter/index.module.scss
new file mode 100644
index 0000000000..be9e377a78
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Gutter/index.module.scss
@@ -0,0 +1,13 @@
+.gutter {
+  max-width: 1920px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.gutterLeft {
+  padding-left: var(--gutter-h);
+}
+
+.gutterRight {
+  padding-right: var(--gutter-h);
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx b/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx
new file mode 100644
index 0000000000..3845a1a62f
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx
@@ -0,0 +1,35 @@
+import type { Ref } from 'react'
+
+import React, { forwardRef } from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+  left?: boolean
+  ref?: Ref<HTMLDivElement>
+  right?: boolean
+}
+
+export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { children, className, left = true, right = true } = props
+
+  return (
+    <div
+      className={[
+        classes.gutter,
+        left && classes.gutterLeft,
+        right && classes.gutterRight,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+Gutter.displayName = 'Gutter'
diff --git a/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.module.scss
new file mode 100644
index 0000000000..0086e28f96
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.module.scss
@@ -0,0 +1,12 @@
+@use '../../../_css/queries.scss' as *;
+
+.nav {
+  display: flex;
+  gap: calc(var(--base) / 4) var(--base);
+  align-items: center;
+  flex-wrap: wrap;
+
+  > * {
+    text-decoration: none;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.tsx b/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.tsx
new file mode 100644
index 0000000000..29145b3716
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Header/Nav/index.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+
+import type { Header as HeaderType } from '../../../../../../payload-types.js'
+
+import { CMSLink } from '../../Link/index.js'
+import classes from './index.module.scss'
+
+export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
+  const navItems = header?.navItems || []
+
+  return (
+    <nav className={classes.nav}>
+      {navItems.map(({ link }, i) => {
+        return <CMSLink key={i} {...link} />
+      })}
+    </nav>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Header/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Header/index.module.scss
new file mode 100644
index 0000000000..c61bc787b1
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Header/index.module.scss
@@ -0,0 +1,16 @@
+@use '../../_css/queries.scss' as *;
+
+.header {
+  padding: var(--base) 0;
+}
+
+.wrap {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: calc(var(--base) / 2) var(--base);
+}
+
+.logo {
+  width: 150px;
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Header/index.tsx b/test/live-preview/prod/app/live-preview/_components/Header/index.tsx
new file mode 100644
index 0000000000..d0066daeaf
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Header/index.tsx
@@ -0,0 +1,28 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { getHeader } from '../../_api/getHeader.js'
+import { Gutter } from '../Gutter/index.js'
+import { HeaderNav } from './Nav/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Header() {
+  const header = await getHeader()
+
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link href="/live-preview">
+          <img
+            alt="Payload Logo"
+            className={classes.logo}
+            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
+          />
+        </Link>
+        <HeaderNav header={header} />
+      </Gutter>
+    </header>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Hero/index.tsx b/test/live-preview/prod/app/live-preview/_components/Hero/index.tsx
new file mode 100644
index 0000000000..2b323cf0c2
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Hero/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { HighImpactHero } from '../../_heros/HighImpact/index.js'
+import { LowImpactHero } from '../../_heros/LowImpact/index.js'
+
+const heroes = {
+  highImpact: HighImpactHero,
+  lowImpact: LowImpactHero,
+}
+
+export const Hero: React.FC<Page['hero']> = (props) => {
+  const { type } = props || {}
+
+  if (!type || type === 'none') return null
+
+  const HeroToRender = heroes[type]
+
+  if (!HeroToRender) return null
+
+  return <HeroToRender {...props} />
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Link/index.tsx b/test/live-preview/prod/app/live-preview/_components/Link/index.tsx
new file mode 100644
index 0000000000..25ae59b673
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Link/index.tsx
@@ -0,0 +1,67 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import type { Page, Post } from '../../../../../payload-types.js'
+import type { Props as ButtonProps } from '../Button/index.js'
+
+import { Button } from '../Button/index.js'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+type CMSLinkType = {
+  appearance?: ButtonProps['appearance']
+  children?: React.ReactNode
+  className?: string
+  invert?: ButtonProps['invert']
+  label?: string
+  newTab?: boolean
+  reference?: {
+    relationTo: 'pages' | 'posts'
+    value: Page | Post | string
+  }
+  type?: 'custom' | 'reference'
+  url?: string
+}
+
+export const CMSLink: React.FC<CMSLinkType> = ({
+  type,
+  appearance,
+  children,
+  className,
+  invert,
+  label,
+  newTab,
+  reference,
+  url,
+}) => {
+  const href =
+    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
+      ? `/${reference.value.slug}`
+      : url
+
+  if (!href) return null
+
+  if (!appearance) {
+    const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+    if (href || url) {
+      return (
+        <Link {...newTabProps} className={className} href={href || url || ''}>
+          {label && label}
+          {children && children}
+        </Link>
+      )
+    }
+  }
+
+  return (
+    <Button
+      appearance={appearance}
+      className={className}
+      href={href}
+      invert={invert}
+      label={label}
+      newTab={newTab}
+    />
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/Image/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Media/Image/index.module.scss
new file mode 100644
index 0000000000..7c1a25d03e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/Image/index.module.scss
@@ -0,0 +1,7 @@
+.placeholder-color-light {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.placeholder {
+  background-color: var(--color-base-50);
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/Image/index.tsx b/test/live-preview/prod/app/live-preview/_components/Media/Image/index.tsx
new file mode 100644
index 0000000000..495aac0e80
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/Image/index.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import type { StaticImageData } from 'next/image.js'
+
+import NextImageWithDefault from 'next/image.js'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import cssVariables from '../../../cssVariables.js'
+import classes from './index.module.scss'
+
+const { breakpoints } = cssVariables
+
+const NextImage = (NextImageWithDefault.default ||
+  NextImageWithDefault) as typeof NextImageWithDefault.default
+
+export const Image: React.FC<MediaProps> = (props) => {
+  const {
+    alt: altFromProps,
+    fill,
+    imgClassName,
+    onClick,
+    onLoad: onLoadFromProps,
+    priority,
+    resource,
+    src: srcFromProps,
+  } = props
+
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  let width: number | undefined
+  let height: number | undefined
+  let alt = altFromProps
+  let src: StaticImageData | string = srcFromProps || ''
+
+  if (!src && resource && typeof resource !== 'string') {
+    const {
+      alt: altFromResource,
+      filename: fullFilename,
+      height: fullHeight,
+      width: fullWidth,
+    } = resource
+
+    width = fullWidth || undefined
+    height = fullHeight || undefined
+    alt = altFromResource
+
+    const filename = fullFilename
+
+    src = `${PAYLOAD_SERVER_URL}/api/media/file/${filename}`
+  }
+
+  // NOTE: this is used by the browser to determine which image to download at different screen sizes
+  const sizes = Object.entries(breakpoints)
+    .map(([, value]) => `(max-width: ${value}px) ${value}px`)
+    .join(', ')
+
+  return (
+    <NextImage
+      alt={alt || ''}
+      className={[isLoading && classes.placeholder, classes.image, imgClassName]
+        .filter(Boolean)
+        .join(' ')}
+      fill={fill}
+      height={!fill ? height : undefined}
+      onClick={onClick}
+      onLoad={() => {
+        setIsLoading(false)
+        if (typeof onLoadFromProps === 'function') {
+          onLoadFromProps()
+        }
+      }}
+      priority={priority}
+      sizes={sizes}
+      src={src}
+      width={!fill ? width : undefined}
+    />
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/Video/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Media/Video/index.module.scss
new file mode 100644
index 0000000000..e76c05d766
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/Video/index.module.scss
@@ -0,0 +1,11 @@
+.video {
+  max-width: 100%;
+  width: 100%;
+  background-color: var(--color-base-50);
+}
+
+.cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/Video/index.tsx b/test/live-preview/prod/app/live-preview/_components/Media/Video/index.tsx
new file mode 100644
index 0000000000..1f1d95b5fc
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/Video/index.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import classes from './index.module.scss'
+
+export const Video: React.FC<MediaProps> = (props) => {
+  const { onClick, resource, videoClassName } = props
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+  // const [showFallback] = useState<boolean>()
+
+  useEffect(() => {
+    const { current: video } = videoRef
+    if (video) {
+      video.addEventListener('suspend', () => {
+        // setShowFallback(true);
+        // console.warn('Video was suspended, rendering fallback image.')
+      })
+    }
+  }, [])
+
+  if (resource && typeof resource !== 'string') {
+    const { filename } = resource
+
+    return (
+      <video
+        autoPlay
+        className={[classes.video, videoClassName].filter(Boolean).join(' ')}
+        controls={false}
+        loop
+        muted
+        onClick={onClick}
+        playsInline
+        ref={videoRef}
+      >
+        <source src={`${PAYLOAD_SERVER_URL}/media/${filename}`} />
+      </video>
+    )
+  }
+
+  return null
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/index.tsx b/test/live-preview/prod/app/live-preview/_components/Media/index.tsx
new file mode 100644
index 0000000000..8a6082c0f6
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/index.tsx
@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react'
+
+import type { Props } from './types.js'
+
+import { Image } from './Image/index.js'
+import { Video } from './Video/index.js'
+
+export const Media: React.FC<Props> = (props) => {
+  const { className, htmlElement = 'div', resource } = props
+
+  const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
+  const Tag = htmlElement || Fragment
+
+  return (
+    <Tag
+      {...(htmlElement !== null
+        ? {
+            className,
+          }
+        : {})}
+    >
+      {isVideo ? <Video {...props} /> : <Image {...props} />}
+    </Tag>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Media/types.ts b/test/live-preview/prod/app/live-preview/_components/Media/types.ts
new file mode 100644
index 0000000000..3d8b25d492
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Media/types.ts
@@ -0,0 +1,20 @@
+import type { StaticImageData } from 'next/image.js'
+import type { ElementType, Ref } from 'react'
+
+import type { Media as MediaType } from '../../../../../payload-types.js'
+
+export interface Props {
+  alt?: string
+  className?: string
+  fill?: boolean // for NextImage only
+  htmlElement?: ElementType | null
+  imgClassName?: string
+  onClick?: () => void
+  onLoad?: () => void
+  priority?: boolean // for NextImage only
+  ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
+  resource?: MediaType | string // for Payload media
+  size?: string // for NextImage only
+  src?: StaticImageData // for static media
+  videoClassName?: string
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/PageRange/index.module.scss b/test/live-preview/prod/app/live-preview/_components/PageRange/index.module.scss
new file mode 100644
index 0000000000..a4dcbadeba
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/PageRange/index.module.scss
@@ -0,0 +1,21 @@
+@import '../../_css/common';
+
+.pageRange {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--base(0.5));
+}
+
+.divider {
+  margin: 0 2px;
+}
+
+.hyperlink {
+  display: flex;
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/PageRange/index.tsx b/test/live-preview/prod/app/live-preview/_components/PageRange/index.tsx
new file mode 100644
index 0000000000..2e2e28a090
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/PageRange/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const defaultLabels = {
+  plural: 'Docs',
+  singular: 'Doc',
+}
+
+const defaultCollectionLabels = {
+  products: {
+    plural: 'Products',
+    singular: 'Product',
+  },
+}
+
+export const PageRange: React.FC<{
+  className?: string
+  collection?: string
+  collectionLabels?: {
+    plural?: string
+    singular?: string
+  }
+  currentPage?: number
+  limit?: number
+  totalDocs?: number
+}> = (props) => {
+  const {
+    className,
+    collection,
+    collectionLabels: collectionLabelsFromProps,
+    currentPage,
+    limit,
+    totalDocs,
+  } = props
+
+  const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
+  let indexEnd = (currentPage || 1) * (limit || 1)
+  if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
+
+  const { plural, singular } =
+    collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
+
+  return (
+    <div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
+      {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
+      {typeof totalDocs !== 'undefined' &&
+        totalDocs > 0 &&
+        `Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Pagination/index.module.scss b/test/live-preview/prod/app/live-preview/_components/Pagination/index.module.scss
new file mode 100644
index 0000000000..4521fa407f
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Pagination/index.module.scss
@@ -0,0 +1,29 @@
+@import '../../_css/type.scss';
+
+.pagination {
+  @extend %label;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) / 2);
+}
+
+.button {
+  all: unset;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  padding: calc(var(--base) / 2);
+  color: var(--color-base-500);
+  border: 1px solid var(--color-base-200);
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--color-base-200);
+    border-color: var(--color-base-150);
+  }
+}
+
+.icon {
+  width: calc(var(--base) / 2);
+  height: calc(var(--base) / 2);
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Pagination/index.tsx b/test/live-preview/prod/app/live-preview/_components/Pagination/index.tsx
new file mode 100644
index 0000000000..b1cad39b75
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/Pagination/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Chevron } from '../Chevron/index.js'
+import classes from './index.module.scss'
+
+export const Pagination: React.FC<{
+  className?: string
+  onClick: (page: number) => void
+  page: number
+  totalPages: number
+}> = (props) => {
+  const { className, onClick, page, totalPages } = props
+  const hasNextPage = page < totalPages
+  const hasPrevPage = page > 1
+
+  return (
+    <div className={[classes.pagination, className].filter(Boolean).join(' ')}>
+      <button
+        className={classes.button}
+        disabled={!hasPrevPage}
+        onClick={() => {
+          onClick(page - 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={90} />
+      </button>
+      <div className={classes.pageRange}>
+        <span className={classes.pageRangeLabel}>
+          Page {page} of {totalPages}
+        </span>
+      </div>
+      <button
+        className={classes.button}
+        disabled={!hasNextPage}
+        onClick={() => {
+          onClick(page + 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={-90} />
+      </button>
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/RichText/index.module.scss b/test/live-preview/prod/app/live-preview/_components/RichText/index.module.scss
new file mode 100644
index 0000000000..3468728902
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/RichText/index.module.scss
@@ -0,0 +1,9 @@
+.richText {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/RichText/index.tsx b/test/live-preview/prod/app/live-preview/_components/RichText/index.tsx
new file mode 100644
index 0000000000..58af86a39e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/RichText/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+import serializeLexical from './serializeLexical.js'
+import serializeSlate from './serializeSlate.js'
+
+const RichText: React.FC<{
+  className?: string
+  content: any
+  renderUploadFilenameOnly?: boolean
+  serializer?: 'lexical' | 'slate'
+}> = ({ className, content, renderUploadFilenameOnly, serializer = 'slate' }) => {
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
+      {serializer === 'slate'
+        ? serializeSlate(content, renderUploadFilenameOnly)
+        : serializeLexical(content, renderUploadFilenameOnly)}
+    </div>
+  )
+}
+
+export default RichText
diff --git a/test/live-preview/prod/app/live-preview/_components/RichText/serializeLexical.tsx b/test/live-preview/prod/app/live-preview/_components/RichText/serializeLexical.tsx
new file mode 100644
index 0000000000..36196040f2
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/RichText/serializeLexical.tsx
@@ -0,0 +1,92 @@
+import type { SerializedEditorState } from 'lexical'
+
+import React from 'react'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
+
+const serializer = (
+  content?: SerializedEditorState['root']['children'],
+  renderUploadFilenameOnly?: boolean,
+): React.ReactNode | React.ReactNode[] =>
+  content?.map((node, i) => {
+    switch (node.type) {
+      case 'h1':
+        return <h1 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h1>
+
+      case 'h2':
+        return <h2 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h2>
+
+      case 'h3':
+        return <h3 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h3>
+
+      case 'h4':
+        return <h4 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h4>
+
+      case 'h5':
+        return <h5 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h5>
+
+      case 'h6':
+        return <h6 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h6>
+
+      case 'quote':
+        return (
+          <blockquote key={i}>
+            {serializeLexical(node?.children, renderUploadFilenameOnly)}
+          </blockquote>
+        )
+
+      case 'ul':
+        return <ul key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</ul>
+
+      case 'ol':
+        return <ol key={i}>{serializeLexical(node.children, renderUploadFilenameOnly)}</ol>
+
+      case 'li':
+        return <li key={i}>{serializeLexical(node.children, renderUploadFilenameOnly)}</li>
+
+      case 'relationship':
+        return (
+          <span key={i}>
+            {node.value && typeof node.value === 'object'
+              ? node.value.title || node.value.id
+              : node.value}
+          </span>
+        )
+
+      case 'link':
+        return (
+          <CMSLink
+            key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
+            type={node.linkType === 'internal' ? 'reference' : 'custom'}
+            url={node.url}
+          >
+            {serializer(node?.children, renderUploadFilenameOnly)}
+          </CMSLink>
+        )
+
+      case 'upload':
+        if (renderUploadFilenameOnly) {
+          return <span key={i}>{node.value.filename}</span>
+        }
+
+        return <Media key={i} resource={node?.value} />
+
+      case 'paragraph':
+        return <p key={i}>{serializer(node?.children, renderUploadFilenameOnly)}</p>
+
+      case 'text':
+        return <span key={i}>{node.text}</span>
+    }
+  })
+
+const serializeLexical = (
+  content?: SerializedEditorState,
+  renderUploadFilenameOnly?: boolean,
+): React.ReactNode | React.ReactNode[] => {
+  return serializer(content?.root?.children, renderUploadFilenameOnly)
+}
+
+export default serializeLexical
diff --git a/test/live-preview/prod/app/live-preview/_components/RichText/serializeSlate.tsx b/test/live-preview/prod/app/live-preview/_components/RichText/serializeSlate.tsx
new file mode 100644
index 0000000000..ab6b69fd08
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/RichText/serializeSlate.tsx
@@ -0,0 +1,130 @@
+import escapeHTML from 'escape-html'
+import React, { Fragment } from 'react'
+import { Text } from 'slate'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
+
+type Children = Leaf[]
+
+type Leaf = {
+  [key: string]: unknown
+  children?: Children
+  type: string
+  url?: string
+  value?: any
+}
+
+const serializeSlate = (
+  children?: Children,
+  renderUploadFilenameOnly?: boolean,
+): React.ReactNode[] =>
+  children?.map((node, i) => {
+    if (Text.isText(node)) {
+      let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
+
+      if (node.bold) {
+        text = <strong key={i}>{text}</strong>
+      }
+
+      if (node.code) {
+        text = <code key={i}>{text}</code>
+      }
+
+      if (node.italic) {
+        text = <em key={i}>{text}</em>
+      }
+
+      if (node.underline) {
+        text = (
+          <span key={i} style={{ textDecoration: 'underline' }}>
+            {text}
+          </span>
+        )
+      }
+
+      if (node.strikethrough) {
+        text = (
+          <span key={i} style={{ textDecoration: 'line-through' }}>
+            {text}
+          </span>
+        )
+      }
+
+      return <Fragment key={i}>{text}</Fragment>
+    }
+
+    if (!node) {
+      return null
+    }
+
+    switch (node.type) {
+      case 'h1':
+        return <h1 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h1>
+
+      case 'h2':
+        return <h2 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h2>
+
+      case 'h3':
+        return <h3 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h3>
+
+      case 'h4':
+        return <h4 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h4>
+
+      case 'h5':
+        return <h5 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h5>
+
+      case 'h6':
+        return <h6 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h6>
+
+      case 'quote':
+        return (
+          <blockquote key={i}>
+            {serializeSlate(node?.children, renderUploadFilenameOnly)}
+          </blockquote>
+        )
+
+      case 'ul':
+        return <ul key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</ul>
+
+      case 'ol':
+        return <ol key={i}>{serializeSlate(node.children, renderUploadFilenameOnly)}</ol>
+
+      case 'li':
+        return <li key={i}>{serializeSlate(node.children, renderUploadFilenameOnly)}</li>
+
+      case 'relationship':
+        return (
+          <span key={i}>
+            {node.value && typeof node.value === 'object'
+              ? node.value.title || node.value.id
+              : node.value}
+          </span>
+        )
+
+      case 'link':
+        return (
+          <CMSLink
+            key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
+            type={node.linkType === 'internal' ? 'reference' : 'custom'}
+            url={node.url}
+          >
+            {serializeSlate(node?.children, renderUploadFilenameOnly)}
+          </CMSLink>
+        )
+
+      case 'upload':
+        if (renderUploadFilenameOnly) {
+          return <span key={i}>{node.value.filename}</span>
+        }
+
+        return <Media key={i} resource={node?.value} />
+
+      default:
+        return <p key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</p>
+    }
+  }) || []
+
+export default serializeSlate
diff --git a/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.module.scss b/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.module.scss
new file mode 100644
index 0000000000..a9db566e8c
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.module.scss
@@ -0,0 +1,15 @@
+.top-large {
+  padding-top: var(--block-padding);
+}
+
+.top-medium {
+  padding-top: calc(var(--block-padding) / 2);
+}
+
+.bottom-large {
+  padding-bottom: var(--block-padding);
+}
+
+.bottom-medium {
+  padding-bottom: calc(var(--block-padding) / 2);
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.tsx b/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.tsx
new file mode 100644
index 0000000000..d17a341b11
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_components/VerticalPadding/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
+
+type Props = {
+  bottom?: VerticalPaddingOptions
+  children: React.ReactNode
+  className?: string
+  top?: VerticalPaddingOptions
+}
+
+export const VerticalPadding: React.FC<Props> = ({
+  bottom = 'medium',
+  children,
+  className,
+  top = 'medium',
+}) => {
+  return (
+    <div
+      className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_css/app.scss b/test/live-preview/prod/app/live-preview/_css/app.scss
new file mode 100644
index 0000000000..79c3831109
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_css/app.scss
@@ -0,0 +1,121 @@
+@use './queries.scss' as *;
+@use './colors.scss' as *;
+@use './type.scss' as *;
+
+:root {
+  --base: 24px;
+  --font-body: system-ui;
+  --font-mono: 'Roboto Mono', monospace;
+
+  --gutter-h: 180px;
+  --block-padding: 120px;
+
+  --theme-text: var(--color-base-750);
+
+  @include large-break {
+    --gutter-h: 144px;
+    --block-padding: 96px;
+  }
+
+  @include mid-break {
+    --gutter-h: 24px;
+    --block-padding: 60px;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  margin: 0;
+  color: var(--theme-text);
+}
+
+::selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+::-moz-selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+#page-title {
+  @extend %h6;
+}
+
+ul,
+ol {
+  padding-left: var(--base);
+  margin: 0 0 var(--base);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
diff --git a/test/live-preview/prod/app/live-preview/_css/colors.scss b/test/live-preview/prod/app/live-preview/_css/colors.scss
new file mode 100644
index 0000000000..ce7655db30
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_css/colors.scss
@@ -0,0 +1,105 @@
+// Keep these in sync with the colors exported in '../cssVariables.js'
+
+:root {
+  --color-base-0: rgb(255, 255, 255);
+  --color-base-50: rgb(245, 245, 245);
+  --color-base-100: rgb(235, 235, 235);
+  --color-base-150: rgb(221, 221, 221);
+  --color-base-200: rgb(208, 208, 208);
+  --color-base-250: rgb(195, 195, 195);
+  --color-base-300: rgb(181, 181, 181);
+  --color-base-350: rgb(168, 168, 168);
+  --color-base-400: rgb(154, 154, 154);
+  --color-base-450: rgb(141, 141, 141);
+  --color-base-500: rgb(128, 128, 128);
+  --color-base-550: rgb(114, 114, 114);
+  --color-base-600: rgb(101, 101, 101);
+  --color-base-650: rgb(87, 87, 87);
+  --color-base-700: rgb(74, 74, 74);
+  --color-base-750: rgb(60, 60, 60);
+  --color-base-800: rgb(47, 47, 47);
+  --color-base-850: rgb(34, 34, 34);
+  --color-base-900: rgb(20, 20, 20);
+  --color-base-950: rgb(7, 7, 7);
+  --color-base-1000: rgb(0, 0, 0);
+
+  --color-success-50: rgb(237, 245, 249);
+  --color-success-100: rgb(218, 237, 248);
+  --color-success-150: rgb(188, 225, 248);
+  --color-success-200: rgb(156, 216, 253);
+  --color-success-250: rgb(125, 204, 248);
+  --color-success-300: rgb(97, 190, 241);
+  --color-success-350: rgb(65, 178, 236);
+  --color-success-400: rgb(36, 164, 223);
+  --color-success-450: rgb(18, 148, 204);
+  --color-success-500: rgb(21, 135, 186);
+  --color-success-550: rgb(12, 121, 168);
+  --color-success-600: rgb(11, 110, 153);
+  --color-success-650: rgb(11, 97, 135);
+  --color-success-700: rgb(17, 88, 121);
+  --color-success-750: rgb(17, 76, 105);
+  --color-success-800: rgb(18, 66, 90);
+  --color-success-850: rgb(18, 56, 76);
+  --color-success-900: rgb(19, 44, 58);
+  --color-success-950: rgb(22, 33, 39);
+
+  --color-error-50: rgb(250, 241, 240);
+  --color-error-100: rgb(252, 229, 227);
+  --color-error-150: rgb(247, 208, 204);
+  --color-error-200: rgb(254, 193, 188);
+  --color-error-250: rgb(253, 177, 170);
+  --color-error-300: rgb(253, 154, 146);
+  --color-error-350: rgb(253, 131, 123);
+  --color-error-400: rgb(246, 109, 103);
+  --color-error-450: rgb(234, 90, 86);
+  --color-error-500: rgb(218, 75, 72);
+  --color-error-550: rgb(200, 62, 61);
+  --color-error-600: rgb(182, 54, 54);
+  --color-error-650: rgb(161, 47, 47);
+  --color-error-700: rgb(144, 44, 43);
+  --color-error-750: rgb(123, 41, 39);
+  --color-error-800: rgb(105, 39, 37);
+  --color-error-850: rgb(86, 36, 33);
+  --color-error-900: rgb(64, 32, 29);
+  --color-error-950: rgb(44, 26, 24);
+
+  --color-warning-50: rgb(249, 242, 237);
+  --color-warning-100: rgb(248, 232, 219);
+  --color-warning-150: rgb(243, 212, 186);
+  --color-warning-200: rgb(243, 200, 162);
+  --color-warning-250: rgb(240, 185, 136);
+  --color-warning-300: rgb(238, 166, 98);
+  --color-warning-350: rgb(234, 148, 58);
+  --color-warning-400: rgb(223, 132, 17);
+  --color-warning-450: rgb(204, 120, 15);
+  --color-warning-500: rgb(185, 108, 13);
+  --color-warning-550: rgb(167, 97, 10);
+  --color-warning-600: rgb(150, 87, 11);
+  --color-warning-650: rgb(134, 78, 11);
+  --color-warning-700: rgb(120, 70, 13);
+  --color-warning-750: rgb(105, 61, 13);
+  --color-warning-800: rgb(90, 55, 19);
+  --color-warning-850: rgb(73, 47, 21);
+  --color-warning-900: rgb(56, 38, 20);
+  --color-warning-950: rgb(38, 29, 21);
+
+  --color-blue-50: rgb(237, 245, 249);
+  --color-blue-100: rgb(218, 237, 248);
+  --color-blue-150: rgb(188, 225, 248);
+  --color-blue-200: rgb(156, 216, 253);
+  --color-blue-250: rgb(125, 204, 248);
+  --color-blue-300: rgb(97, 190, 241);
+  --color-blue-350: rgb(65, 178, 236);
+  --color-blue-400: rgb(36, 164, 223);
+  --color-blue-450: rgb(18, 148, 204);
+  --color-blue-500: rgb(21, 135, 186);
+  --color-blue-550: rgb(12, 121, 168);
+  --color-blue-600: rgb(11, 110, 153);
+  --color-blue-650: rgb(11, 97, 135);
+  --color-blue-700: rgb(17, 88, 121);
+  --color-blue-750: rgb(17, 76, 105);
+  --color-blue-800: rgb(18, 66, 90);
+  --color-blue-850: rgb(18, 56, 76);
+  --color-blue-900: rgb(19, 44, 58);
+  --color-blue-950: rgb(22, 33, 39);
+}
diff --git a/test/live-preview/prod/app/live-preview/_css/common.scss b/test/live-preview/prod/app/live-preview/_css/common.scss
new file mode 100644
index 0000000000..e66be0183d
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_css/common.scss
@@ -0,0 +1,2 @@
+@forward './queries.scss';
+@forward './type.scss';
diff --git a/test/live-preview/prod/app/live-preview/_css/queries.scss b/test/live-preview/prod/app/live-preview/_css/queries.scss
new file mode 100644
index 0000000000..b5f8c282cd
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_css/queries.scss
@@ -0,0 +1,30 @@
+// Keep these in sync with the breakpoints exported in '../cssVariables.js'
+
+$breakpoint-xs-width: 400px;
+$breakpoint-s-width: 768px;
+$breakpoint-m-width: 1024px;
+$breakpoint-l-width: 1440px;
+
+@mixin extra-small-break {
+  @media (max-width: #{$breakpoint-xs-width}) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: #{$breakpoint-s-width}) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: #{$breakpoint-m-width}) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: #{$breakpoint-l-width}) {
+    @content;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_css/type.scss b/test/live-preview/prod/app/live-preview/_css/type.scss
new file mode 100644
index 0000000000..f8d1d07162
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_css/type.scss
@@ -0,0 +1,110 @@
+@use 'queries' as *;
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-weight: 700;
+}
+
+%h1 {
+  margin: 40px 0;
+  font-size: 64px;
+  line-height: 70px;
+  font-weight: bold;
+
+  @include mid-break {
+    margin: 24px 0;
+    font-size: 42px;
+    line-height: 42px;
+  }
+}
+
+%h2 {
+  margin: 28px 0;
+  font-size: 48px;
+  line-height: 54px;
+  font-weight: bold;
+
+  @include mid-break {
+    margin: 22px 0;
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+
+%h3 {
+  margin: 24px 0;
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: bold;
+
+  @include mid-break {
+    margin: 20px 0;
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+
+%h4 {
+  margin: 20px 0;
+  font-size: 26px;
+  line-height: 32px;
+  font-weight: bold;
+
+  @include mid-break {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+%h5 {
+  margin: 20px 0;
+  font-size: 22px;
+  line-height: 30px;
+  font-weight: bold;
+
+  @include mid-break {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+
+%h6 {
+  margin: 20px 0;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: bold;
+}
+
+%body {
+  font-size: 18px;
+  line-height: 32px;
+
+  @include mid-break {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
+%large-body {
+  font-size: 25px;
+  line-height: 32px;
+
+  @include mid-break {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+%label {
+  font-size: 16px;
+  line-height: 24px;
+  text-transform: uppercase;
+
+  @include mid-break {
+    font-size: 13px;
+  }
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.module.scss b/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.module.scss
new file mode 100644
index 0000000000..5fceec60ea
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.module.scss
@@ -0,0 +1,55 @@
+@import '../../_css/queries.scss';
+
+.hero {
+  padding-top: calc(var(--base) * 2);
+  position: relative;
+  overflow: hidden;
+
+  @include large-break {
+    padding-top: var(--base);
+  }
+}
+
+.media {
+  width: calc(100% + var(--gutter-h));
+  left: calc(var(--gutter-h) / -2);
+  margin-top: calc(var(--base) * 3);
+  position: relative;
+
+  @include mid-break {
+    left: 0;
+    margin-top: var(--base);
+    margin-left: calc(var(--gutter-h) * -1);
+    width: calc(100% + var(--gutter-h) * 2);
+  }
+}
+
+.links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  padding-top: var(--base);
+  flex-wrap: wrap;
+  margin: calc(var(--base) * -0.5);
+
+  & > * {
+    margin: calc(var(--base) / 2);
+  }
+}
+
+.caption {
+  margin-top: var(--base);
+  color: var(--color-base-500);
+  left: calc(var(--gutter-h) / 2);
+  width: calc(100% - var(--gutter-h));
+  position: relative;
+
+  @include mid-break {
+    left: var(--gutter-h);
+  }
+}
+
+.content {
+  position: relative;
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.tsx b/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.tsx
new file mode 100644
index 0000000000..885da24d3a
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/HighImpact/index.tsx
@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export const HighImpactHero: React.FC<Page['hero']> = ({ media, richText }) => {
+  return (
+    <Gutter className={classes.hero}>
+      <div className={classes.content}>
+        <RichText content={richText} />
+      </div>
+      <div className={classes.media}>
+        {typeof media === 'object' && media !== null && (
+          <Fragment>
+            <Media
+              // fill
+              imgClassName={classes.image}
+              priority
+              resource={media}
+            />
+            {media?.caption && <RichText className={classes.caption} content={media.caption} />}
+          </Fragment>
+        )}
+      </div>
+    </Gutter>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.module.scss b/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.module.scss
new file mode 100644
index 0000000000..6b6fbea13d
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.module.scss
@@ -0,0 +1,4 @@
+@use '../../_css/type.scss' as *;
+
+.lowImpactHero {
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.tsx b/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.tsx
new file mode 100644
index 0000000000..3c15b73aa8
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/LowImpact/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import type { Page } from '../../../../../payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
+  return (
+    <Gutter className={classes.lowImpactHero}>
+      <div className={classes.content}>
+        <VerticalPadding>
+          <RichText className={classes.richText} content={richText} />
+        </VerticalPadding>
+      </div>
+    </Gutter>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/PostHero/index.module.scss b/test/live-preview/prod/app/live-preview/_heros/PostHero/index.module.scss
new file mode 100644
index 0000000000..813094a3af
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/PostHero/index.module.scss
@@ -0,0 +1,76 @@
+@use '../../_css/common.scss' as *;
+
+.postHero {
+  display: flex;
+  gap: calc(var(--base) * 2);
+
+  @include mid-break {
+    flex-direction: column;
+    gap: var(--base);
+  }
+}
+
+.content {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--base);
+
+  @include mid-break {
+    width: 100%;
+    gap: calc(var(--base) / 2);
+  }
+}
+
+.warning {
+  margin-bottom: calc(var(--base) * 1.5);
+}
+
+.meta {
+  margin: 0;
+}
+
+.description {
+  margin: 0;
+}
+
+.media {
+  width: 50%;
+
+  @include mid-break {
+    width: 100%;
+  }
+}
+
+.mediaWrapper {
+  text-decoration: none;
+  display: block;
+  position: relative;
+  aspect-ratio: 5 / 4;
+  margin-bottom: calc(var(--base) / 2);
+  width: calc(100% + calc(var(--gutter-h) / 2));
+
+  @include mid-break {
+    margin-left: calc(var(--gutter-h) * -1);
+    width: calc(100% + var(--gutter-h) * 2);
+  }
+}
+
+.image {
+  object-fit: cover;
+}
+
+.placeholder {
+  background-color: var(--color-base-50);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.caption {
+  color: var(--color-base-500);
+}
diff --git a/test/live-preview/prod/app/live-preview/_heros/PostHero/index.tsx b/test/live-preview/prod/app/live-preview/_heros/PostHero/index.tsx
new file mode 100644
index 0000000000..67cb767b81
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_heros/PostHero/index.tsx
@@ -0,0 +1,57 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../../payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { formatDateTime } from '../../_utilities/formatDateTime.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const PostHero: React.FC<{
+  post: Post
+}> = ({ post }) => {
+  const { id, createdAt, meta: { description, image: metaImage } = {} } = post
+
+  return (
+    <Fragment>
+      <Gutter className={classes.postHero}>
+        <div className={classes.content}>
+          <RichText className={classes.richText} content={post?.hero?.richText} />
+          <p className={classes.meta}>
+            {createdAt && (
+              <Fragment>
+                {'Created on '}
+                {formatDateTime(createdAt)}
+              </Fragment>
+            )}
+          </p>
+          <div>
+            <p className={classes.description}>
+              {`${description ? `${description} ` : ''}To edit this post, `}
+              <Link href={`${PAYLOAD_SERVER_URL}/admin/collections/posts/${id}`}>
+                navigate to the admin dashboard
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+        <div className={classes.media}>
+          <div className={classes.mediaWrapper}>
+            {!metaImage && <div className={classes.placeholder}>No image</div>}
+            {metaImage && typeof metaImage !== 'string' && (
+              <Media fill imgClassName={classes.image} resource={metaImage} />
+            )}
+          </div>
+          {metaImage && typeof metaImage !== 'string' && metaImage?.caption && (
+            <RichText className={classes.caption} content={metaImage.caption} />
+          )}
+        </div>
+      </Gutter>
+    </Fragment>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/_utilities/formatDateTime.ts b/test/live-preview/prod/app/live-preview/_utilities/formatDateTime.ts
new file mode 100644
index 0000000000..ea684885b9
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_utilities/formatDateTime.ts
@@ -0,0 +1,20 @@
+export const formatDateTime = (timestamp: string): string => {
+  const now = new Date()
+  let date = now
+  if (timestamp) date = new Date(timestamp)
+  const months = date.getMonth()
+  const days = date.getDate()
+  // const hours = date.getHours();
+  // const minutes = date.getMinutes();
+  // const seconds = date.getSeconds();
+
+  const MM = months + 1 < 10 ? `0${months + 1}` : months + 1
+  const DD = days < 10 ? `0${days}` : days
+  const YYYY = date.getFullYear()
+  // const AMPM = hours < 12 ? 'AM' : 'PM';
+  // const HH = hours > 12 ? hours - 12 : hours;
+  // const MinMin = (minutes < 10) ? `0${minutes}` : minutes;
+  // const SS = (seconds < 10) ? `0${seconds}` : seconds;
+
+  return `${MM}/${DD}/${YYYY}`
+}
diff --git a/test/live-preview/prod/app/live-preview/_utilities/toKebabCase.ts b/test/live-preview/prod/app/live-preview/_utilities/toKebabCase.ts
new file mode 100644
index 0000000000..228865f123
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/_utilities/toKebabCase.ts
@@ -0,0 +1,5 @@
+export const toKebabCase = (string: string): string =>
+  string
+    ?.replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase()
diff --git a/test/live-preview/prod/app/live-preview/cssVariables.js b/test/live-preview/prod/app/live-preview/cssVariables.js
new file mode 100644
index 0000000000..3091b012b7
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/cssVariables.js
@@ -0,0 +1,16 @@
+// Keep these in sync with the CSS variables in the `_css` directory
+export default {
+  breakpoints: {
+    s: 768,
+    m: 1024,
+    l: 1440,
+  },
+  colors: {
+    base0: 'rgb(255, 255, 255)',
+    base100: 'rgb(235, 235, 235)',
+    base500: 'rgb(128, 128, 128)',
+    base850: 'rgb(34, 34, 34)',
+    base1000: 'rgb(0, 0, 0)',
+    error500: 'rgb(255, 111, 118)',
+  },
+}
diff --git a/test/live-preview/prod/app/live-preview/layout.tsx b/test/live-preview/prod/app/live-preview/layout.tsx
new file mode 100644
index 0000000000..b63d2dfa5e
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+
+import React from 'react'
+
+import { Footer } from './_components/Footer/index.js'
+import { Header } from './_components/Header/index.js'
+import './_css/app.scss'
+
+export const metadata: Metadata = {
+  description: 'Payload Live Preview',
+  title: 'Payload Live Preview',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/not-found.tsx b/test/live-preview/prod/app/live-preview/not-found.tsx
new file mode 100644
index 0000000000..352bf7f8a5
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/not-found.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import React from 'react'
+
+import { Gutter } from './_components/Gutter/index.js'
+import { VerticalPadding } from './_components/VerticalPadding/index.js'
+
+export default function NotFound() {
+  return (
+    <main>
+      <VerticalPadding bottom="medium" top="none">
+        <Gutter>
+          <h1>404</h1>
+          <p>This page could not be found.</p>
+        </Gutter>
+      </VerticalPadding>
+    </main>
+  )
+}
diff --git a/test/live-preview/prod/app/live-preview/page.tsx b/test/live-preview/prod/app/live-preview/page.tsx
new file mode 100644
index 0000000000..fcb612bf88
--- /dev/null
+++ b/test/live-preview/prod/app/live-preview/page.tsx
@@ -0,0 +1,3 @@
+import PageTemplate from './(pages)/[slug]/page.js'
+
+export default PageTemplate
diff --git a/test/live-preview/prod/next-env.d.ts b/test/live-preview/prod/next-env.d.ts
new file mode 100644
index 0000000000..40c3d68096
--- /dev/null
+++ b/test/live-preview/prod/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/test/live-preview/prod/next.config.mjs b/test/live-preview/prod/next.config.mjs
new file mode 100644
index 0000000000..f2e6bedd51
--- /dev/null
+++ b/test/live-preview/prod/next.config.mjs
@@ -0,0 +1,15 @@
+import nextConfig from '../../../next.config.mjs'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(__filename)
+
+export default {
+  ...nextConfig,
+  env: {
+    PAYLOAD_CORE_DEV: 'true',
+    ROOT_DIR: path.resolve(dirname),
+  },
+}
diff --git a/test/live-preview/prod/tsconfig.json b/test/live-preview/prod/tsconfig.json
new file mode 100644
index 0000000000..99cf2391f9
--- /dev/null
+++ b/test/live-preview/prod/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@payload-config": ["../config.ts"],
+      "@payloadcms/ui/assets": ["../../../packages/ui/src/assets/index.ts"],
+      "@payloadcms/ui/elements/*": ["../../../packages/ui/src/elements/*/index.tsx"],
+      "@payloadcms/ui/fields/*": ["../../../packages/ui/src/fields/*/index.tsx"],
+      "@payloadcms/ui/forms/*": ["../../../packages/ui/src/forms/*/index.tsx"],
+      "@payloadcms/ui/graphics/*": ["../../../packages/ui/src/graphics/*/index.tsx"],
+      "@payloadcms/ui/hooks/*": ["../../../packages/ui/src/hooks/*.ts"],
+      "@payloadcms/ui/icons/*": ["../../../packages/ui/src/icons/*/index.tsx"],
+      "@payloadcms/ui/providers/*": ["../../../packages/ui/src/providers/*/index.tsx"],
+      "@payloadcms/ui/templates/*": ["../../../packages/ui/src/templates/*/index.tsx"],
+      "@payloadcms/ui/utilities/*": ["../../../packages/ui/src/utilities/*.ts"],
+      "@payloadcms/ui/scss": ["../../../packages/ui/src/scss.scss"],
+      "@payloadcms/ui/scss/app.scss": ["../../../packages/ui/src/scss/app.scss"],
+      "payload/types": ["../../../packages/payload/src/exports/types.ts"],
+      "@payloadcms/next/*": ["../../../packages/next/src/*"],
+      "@payloadcms/next": ["../../../packages/next/src/exports/*"]
+    }
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}