diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx
index 380c74b692a..7b4af5ed594 100644
--- a/dotcom-rendering/src/components/ArticleBody.tsx
+++ b/dotcom-rendering/src/components/ArticleBody.tsx
@@ -58,6 +58,7 @@ type Props = {
 	serverTime?: number;
 	idApiUrl?: string;
 	accentColor?: string;
+	isOldInteractive?: boolean;
 };
 
 const globalOlStyles = () => css`
@@ -165,6 +166,7 @@ export const ArticleBody = ({
 	serverTime,
 	idApiUrl,
 	accentColor,
+	isOldInteractive = false,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -292,6 +294,7 @@ export const ArticleBody = ({
 					contributionsServiceUrl={contributionsServiceUrl}
 					shouldHideAds={shouldHideAds}
 					idApiUrl={idApiUrl}
+					isOldInteractive={isOldInteractive}
 				/>
 			</div>
 			{hasObserverPublicationTag && <ObserverFooter />}
diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx
index ccb113fb4b1..d69c3414b1b 100644
--- a/dotcom-rendering/src/components/Figure.tsx
+++ b/dotcom-rendering/src/components/Figure.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, space, until } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { FEElement, RoleType } from '../types/content';
 
@@ -74,47 +74,7 @@ const roleCss = {
 		margin-top: ${space[3]}px;
 		margin-bottom: ${space[3]}px;
 
-		${until.tablet} {
-			margin-left: -20px;
-			margin-right: -20px;
-		}
-		${until.mobileLandscape} {
-			margin-left: -10px;
-			margin-right: -10px;
-		}
-		${from.tablet} {
-			--scrollbar-width-fallback: 15px;
-			--half-scrollbar-width-fallback: 7.5px;
-
-			width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-			max-width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-
-			--grid-container-max-width: 740px;
-			--grid-container-left-margin: calc(
-				((-100vw + (var(--grid-container-max-width) - 42px)) / 2) +
-					var(
-						--half-scrollbar-width,
-						var(--half-scrollbar-width-fallback)
-					)
-			);
-
-			margin-left: var(--grid-container-left-margin);
-		}
-		${from.desktop} {
-			--grid-container-max-width: ${breakpoints.desktop}px;
-		}
-		${from.leftCol} {
-			--grid-container-max-width: ${breakpoints.leftCol}px;
-			--grid-left-col-width: 140px;
-		}
-		${from.wide} {
-			--grid-container-max-width: ${breakpoints.wide}px;
-			--grid-left-col-width: 219px;
-		}
+		grid-column: 1 / -1;
 	`,
 
 	showcase: css`
diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx
index 24d1b24196a..8f594eab135 100644
--- a/dotcom-rendering/src/components/SubMeta.tsx
+++ b/dotcom-rendering/src/components/SubMeta.tsx
@@ -129,6 +129,7 @@ type Props = {
 	webUrl: string;
 	webTitle: string;
 	showBottomSocialButtons: boolean;
+	isDeprecatedInteractiveLayout?: boolean;
 };
 
 const syndicationButtonOverrides = css`
@@ -204,6 +205,7 @@ export const SubMeta = ({
 	webUrl,
 	webTitle,
 	showBottomSocialButtons,
+	isDeprecatedInteractiveLayout = false,
 }: Props) => {
 	const createLinks = () => {
 		const links: BaseLinkType[] = [];
@@ -228,9 +230,7 @@ export const SubMeta = ({
 		<div
 			data-print-layout="hide"
 			css={[
-				format.design === ArticleDesign.Interactive
-					? setMetaWidth
-					: undefined,
+				isDeprecatedInteractiveLayout ? setMetaWidth : undefined,
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index cfbc4ebc083..63cd2351233 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -12,6 +12,7 @@ import { HostedGalleryLayout } from './HostedGalleryLayout';
 import { HostedVideoLayout } from './HostedVideoLayout';
 import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
+import { InteractiveLayoutDeprecated } from './InteractiveLayoutDeprecated';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
 import { PictureLayout } from './PictureLayout';
@@ -34,6 +35,8 @@ interface WebProps extends BaseProps {
 
 export type Props = WebProps | AppProps;
 
+export const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z');
+
 const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 	const notSupported = <pre>Not supported</pre>;
 	const format = {
@@ -43,6 +46,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 	};
 
 	const serverTime = article.serverTime;
+	const publicationDate = new Date(article.frontendData.webPublicationDate);
 
 	switch (article.display) {
 		case ArticleDisplay.Immersive: {
@@ -116,15 +120,24 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 		default: {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
-					return (
-						<InteractiveLayout
-							article={article.frontendData}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
-
+					if (publicationDate < interactiveLayoutSwitchoverDate) {
+						return (
+							<InteractiveLayoutDeprecated
+								article={article.frontendData}
+								format={format}
+								renderingTarget={renderingTarget}
+								serverTime={serverTime}
+							/>
+						);
+					} else {
+						return (
+							<InteractiveLayout
+								article={article.frontendData}
+								format={format}
+								renderingTarget={renderingTarget}
+							/>
+						);
+					}
 				case ArticleDesign.FullPageInteractive: {
 					return (
 						<FullPageInteractiveLayout
@@ -214,6 +227,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 	};
 
 	const serverTime = article.serverTime;
+	const publicationDate = new Date(article.frontendData.webPublicationDate);
 
 	switch (article.display) {
 		case ArticleDisplay.Immersive: {
@@ -293,15 +307,26 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 		default: {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
-					return (
-						<InteractiveLayout
-							article={article.frontendData}
-							NAV={NAV}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
+					if (publicationDate < interactiveLayoutSwitchoverDate) {
+						return (
+							<InteractiveLayoutDeprecated
+								article={article.frontendData}
+								NAV={NAV}
+								format={format}
+								renderingTarget={renderingTarget}
+								serverTime={serverTime}
+							/>
+						);
+					} else {
+						return (
+							<InteractiveLayout
+								article={article.frontendData}
+								NAV={NAV}
+								format={format}
+								renderingTarget={renderingTarget}
+							/>
+						);
+					}
 				case ArticleDesign.FullPageInteractive: {
 					return (
 						<FullPageInteractiveLayout
diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
index ee2db3e4b95..973c9a52ba7 100644
--- a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
@@ -27,7 +27,7 @@ import type { ArticleDeprecated } from '../types/article';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { temporaryBodyCopyColourOverride } from './InteractiveLayout';
+import { temporaryBodyCopyColourOverride } from './InteractiveLayoutDeprecated';
 import { interactiveGlobalStyles } from './lib/interactiveLegacyStyling';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index c2f9f24deee..8fdb9318e5b 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -1,13 +1,15 @@
-import { css, Global } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 import {
-	from,
 	palette as sourcePalette,
+	space,
 	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import type React from 'react';
+import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
+import { AppsEpic } from '../components/AppsEpic.island';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -15,23 +17,23 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
-import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.island';
 import { DecideLines } from '../components/DecideLines';
 import { DirectoryPageNav } from '../components/DirectoryPageNav';
 import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
+import { GuardianLabsLines } from '../components/GuardianLabsLines';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island';
 import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island';
-import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
+import { ListenToArticle } from '../components/ListenToArticle.island';
 import { MainMedia } from '../components/MainMedia';
 import { Masthead } from '../components/Masthead/Masthead';
 import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
+import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island';
 import { OnwardsUpper } from '../components/OnwardsUpper.island';
 import { Section } from '../components/Section';
 import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
@@ -39,137 +41,27 @@ import { Standfirst } from '../components/Standfirst';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.island';
-import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
+import { grid } from '../grid';
+import {
+	ArticleDesign,
+	type ArticleFormat,
+	ArticleSpecial,
+} from '../lib/articleFormat';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
+import { parse } from '../lib/slot-machine-flags';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
-import type { RoleType } from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
 import {
-	interactiveGlobalStyles,
-	interactiveLegacyClasses,
-} from './lib/interactiveLegacyStyling';
+	type Area,
+	gridItemCss,
+	type LayoutType,
+} from './lib/furnitureArrangements';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
-const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
-	<div
-		className={interactiveLegacyClasses.contentInteractiveGrid}
-		css={css`
-			/* IE Fallback */
-			display: flex;
-			flex-direction: column;
-			${until.leftCol} {
-				margin-left: 0px;
-			}
-			${from.leftCol} {
-				margin-left: 151px;
-			}
-			${from.wide} {
-				margin-left: 230px;
-			}
-
-			@supports (display: grid) {
-				display: grid;
-				width: 100%;
-				margin-left: 0;
-
-				grid-column-gap: 10px;
-
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column (220 - 1px border)
-					Vertical grey border
-					Main content
-				*/
-				${from.wide} {
-					grid-template-columns: 219px 1px 1020px;
-
-					grid-template-areas:
-						'title  border  headline'
-						'.      border  standfirst'
-						'.      border  media'
-						'.      border  media'
-						'.      border  lines'
-						'.      border  meta'
-						'body   body    body'
-						'.      .       .';
-				}
-
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column (220 - 1px border)
-					Vertical grey border
-					Main content
-				*/
-				${until.wide} {
-					grid-template-columns: 140px 1px 940px;
-
-					grid-template-areas:
-						'title  border  headline'
-						'.      border  standfirst'
-						'.      border  media'
-						'.      border  media'
-						'.      border  lines'
-						'.      border  meta'
-						'body   body    body'
-						'.      .       .';
-				}
-
-				${until.leftCol} {
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'standfirst'
-						'media'
-						'lines'
-						'meta'
-						'body'
-						'.';
-				}
-
-				${until.desktop} {
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'standfirst'
-						'media'
-						'lines'
-						'meta'
-						'body';
-				}
-
-				${until.tablet} {
-					grid-column-gap: 0px;
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'media'
-						'title'
-						'headline'
-						'standfirst'
-						'lines'
-						'meta'
-						'body';
-				}
-			}
-		`}
-	>
-		{children}
-	</div>
-);
-
-const maxWidth = css`
-	${from.desktop} {
-		max-width: 620px;
-	}
-`;
-
 const stretchLines = css`
 	${until.phablet} {
 		margin-left: -20px;
@@ -181,38 +73,63 @@ const stretchLines = css`
 	}
 `;
 
-export const temporaryBodyCopyColourOverride = css`
-	.content__main-column--interactive p {
-		/* stylelint-disable-next-line declaration-no-important */
-		color: ${themePalette('--article-text')} !important;
-	}
-`;
+interface GridItemProps {
+	area: Area;
+	layoutType: LayoutType;
+	element?: 'div' | 'aside';
+	customCss?: SerializedStyles;
+	children: React.ReactNode;
+}
 
-interface CommonProps {
+const GridItem = ({
+	area,
+	layoutType,
+	element: Element = 'div',
+	customCss,
+	children,
+}: GridItemProps) => (
+	<Element
+		data-gu-name={area}
+		css={[gridItemCss(area, layoutType), customCss]}
+	>
+		{children}
+	</Element>
+);
+
+interface Props {
 	article: ArticleDeprecated;
 	format: ArticleFormat;
 	renderingTarget: RenderingTarget;
 	serverTime?: number;
 }
 
-interface WebProps extends CommonProps {
+interface WebProps extends Props {
 	NAV: NavType;
 	renderingTarget: 'Web';
 }
 
-interface AppsProps extends CommonProps {
+interface AppProps extends Props {
 	renderingTarget: 'Apps';
 }
 
-export const InteractiveLayout = (props: WebProps | AppsProps) => {
+export const InteractiveLayout = (props: WebProps | AppProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 	const {
 		config: { isPaidContent, host, hasSurveyAd },
 		editionId,
 	} = article;
 
-	const isApps = renderingTarget === 'Apps';
 	const isWeb = renderingTarget === 'Web';
+	const isApps = renderingTarget === 'Apps';
+
+	const showBodyEndSlot =
+		isWeb &&
+		(parse(article.slotMachineFlags ?? '').showBodyEnd ||
+			article.config.switches.slotBodyEnd);
+
+	// TODO:
+	// 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render
+	// 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false.
 
 	const showComments = article.isCommentable && !isPaidContent;
 
@@ -222,23 +139,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 
 	const renderAds = canRenderAds(article);
 
-	const includesFullWidthElement = article.blocks.some((block) =>
-		block.elements.some((element) => {
-			const role =
-				'role' in element
-					? (element.role as RoleType | 'fullWidth' | undefined)
-					: undefined;
-			return role === 'fullWidth';
-		}),
-	);
-
 	return (
 		<>
-			{includesFullWidthElement && (
-				<Island priority="critical">
-					<InteractivesScrollbarWidth />
-				</Island>
-			)}
 			{isApps && (
 				<>
 					<Island priority="critical">
@@ -247,367 +149,401 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					<Island priority="critical">
 						<InteractivesDisableArticleSwipe />
 					</Island>
-					<Global styles={temporaryBodyCopyColourOverride} />
 				</>
 			)}
-			{article.isLegacyInteractive && (
-				<Global styles={interactiveGlobalStyles} />
-			)}
 			{isWeb && (
-				<>
-					<div>
-						{renderAds && (
-							<Stuck>
-								<div data-print-layout="hide">
-									<Section
-										fullWidth={true}
-										showTopBorder={false}
-										showSideBorders={false}
-										padSides={false}
-										shouldCenter={false}
-									>
-										<HeaderAdSlot />
-									</Section>
-								</div>
-							</Stuck>
-						)}
-
-						<Masthead
-							nav={props.NAV}
-							editionId={article.editionId}
-							idUrl={article.config.idUrl}
-							mmaUrl={article.config.mmaUrl}
-							discussionApiUrl={article.config.discussionApiUrl}
-							idApiUrl={article.config.idApiUrl}
-							contributionsServiceUrl={contributionsServiceUrl}
-							showSlimNav={true}
-							showSubNav={false}
-							hasPageSkin={false}
-							hasPageSkinContentSelfConstrain={false}
-							pageId={article.pageId}
-							tagIds={article.tags.map((tag) => tag.id)}
-							sectionId={article.config.section}
-							contentType={article.contentType}
-						/>
-					</div>
-
-					{format.theme === ArticleSpecial.Labs && (
-						<Stuck zIndex="subNavBanner">
+				<div data-print-layout="hide" id="bannerandheader">
+					{renderAds && (
+						<Stuck>
 							<Section
 								fullWidth={true}
 								showTopBorder={false}
-								backgroundColour={sourcePalette.labs[400]}
-								borderColour={sourcePalette.neutral[60]}
-								sectionId="labs-header"
+								showSideBorders={false}
+								padSides={false}
+								shouldCenter={false}
 							>
-								<LabsHeader editionId={editionId} />
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
+					<Masthead
+						nav={props.NAV}
+						editionId={article.editionId}
+						idUrl={article.config.idUrl}
+						mmaUrl={article.config.mmaUrl}
+						discussionApiUrl={article.config.discussionApiUrl}
+						idApiUrl={article.config.idApiUrl}
+						contributionsServiceUrl={contributionsServiceUrl}
+						showSubNav={true}
+						showSlimNav={false}
+						hasPageSkinContentSelfConstrain={true}
+						pageId={article.pageId}
+						tagIds={article.tags.map((tag) => tag.id)}
+						sectionId={article.config.section}
+						contentType={article.contentType}
+					/>
+				</div>
+			)}
 
-					{renderAds && hasSurveyAd && (
-						<AdSlot position="survey" display={format.display} />
-					)}
-				</>
+			{format.theme === ArticleSpecial.Labs && (
+				<Stuck zIndex="subNavBanner">
+					<Section
+						fullWidth={true}
+						showTopBorder={false}
+						backgroundColour={sourcePalette.labs[400]}
+						borderColour={sourcePalette.neutral[60]}
+						sectionId="labs-header"
+						element="aside"
+					>
+						<LabsHeader editionId={editionId} />
+					</Section>
+				</Stuck>
+			)}
+
+			{isWeb && renderAds && hasSurveyAd && (
+				<AdSlot position="survey" display={format.display} />
 			)}
+
 			<main data-layout="InteractiveLayout">
+				{isApps && renderAds && (
+					<Island priority="critical">
+						<AdPortals />
+					</Island>
+				)}
 				<DirectoryPageNav
 					pageId={article.pageId}
 					pageTags={article.tags}
 				/>
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					borderColour={themePalette('--article-border')}
-					element="article"
-					className={interactiveLegacyClasses.contentInteractive}
+				{/* GridItem order matters — mobile layout relies on DOM order for grid placement.
+    See furnitureArrangements.ts if reordering. */}
+				<article
+					css={[
+						css`
+							background-color: ${themePalette(
+								'--article-background',
+							)};
+						`,
+						grid.container,
+						grid.verticalRules({
+							centre: true,
+						}),
+					]}
 				>
-					<div
-						className={interactiveLegacyClasses.contentInteractive}
+					<GridItem area="media" layoutType="standard">
+						<MainMedia
+							format={format}
+							elements={article.mainMediaElements}
+							host={host}
+							pageId={article.pageId}
+							webTitle={article.webTitle}
+							ajaxUrl={article.config.ajaxUrl}
+							abTests={article.config.abTests}
+							switches={article.config.switches}
+							isAdFreeUser={article.isAdFreeUser}
+							isSensitive={article.config.isSensitive}
+							editionId={article.editionId}
+							hideCaption={false}
+							shouldHideAds={article.shouldHideAds}
+							contentType={article.contentType}
+							contentLayout="InteractiveLayout"
+						/>
+					</GridItem>
+					<GridItem
+						area="title"
+						layoutType="standard"
+						element="aside"
 					>
-						<InteractiveGrid>
-							<GridItem area="media">
-								<div css={maxWidth}>
-									<MainMedia
-										format={format}
-										elements={article.mainMediaElements}
-										host={host}
-										pageId={article.pageId}
-										webTitle={article.webTitle}
-										ajaxUrl={article.config.ajaxUrl}
-										abTests={article.config.abTests}
-										switches={article.config.switches}
-										isAdFreeUser={article.isAdFreeUser}
-										isSensitive={article.config.isSensitive}
-										editionId={article.editionId}
-										shouldHideAds={article.shouldHideAds}
-									/>
-								</div>
-							</GridItem>
-							<GridItem area="title" element="aside">
-								<div
-									className={`${interactiveLegacyClasses.contentLabels} ${interactiveLegacyClasses.contentLabelsNotImmersive}`}
-								>
-									<ArticleTitle
+						<ArticleTitle
+							format={format}
+							tags={article.tags}
+							sectionLabel={article.sectionLabel}
+							sectionUrl={article.sectionUrl}
+							guardianBaseURL={article.guardianBaseURL}
+							isMatch={false}
+						/>
+					</GridItem>
+					<GridItem area="headline" layoutType="standard">
+						<ArticleHeadline
+							format={format}
+							headlineString={article.headline}
+							tags={article.tags}
+							byline={article.byline}
+							webPublicationDateDeprecated={
+								article.webPublicationDateDeprecated
+							}
+							starRating={article.starRating}
+						/>
+					</GridItem>
+					<GridItem area="standfirst" layoutType="standard">
+						<Standfirst
+							format={format}
+							standfirst={article.standfirst}
+						/>
+					</GridItem>
+					<GridItem
+						area="meta"
+						layoutType="standard"
+						element="aside"
+						customCss={css`
+							z-index: 5;
+						`}
+					>
+						<div css={stretchLines}>
+							{isWeb &&
+							format.theme === ArticleSpecial.Labs &&
+							format.design !== ArticleDesign.Video ? (
+								<GuardianLabsLines />
+							) : (
+								<DecideLines
+									format={format}
+									color={themePalette('--article-border')}
+								/>
+							)}
+						</div>
+						{isApps ? (
+							<>
+								<Hide from="leftCol">
+									<ArticleMetaApps
+										branding={branding}
 										format={format}
+										byline={article.byline}
 										tags={article.tags}
-										sectionLabel={article.sectionLabel}
-										sectionUrl={article.sectionUrl}
-										guardianBaseURL={
-											article.guardianBaseURL
+										primaryDateline={
+											article.webPublicationDateDisplay
 										}
-									/>
-								</div>
-							</GridItem>
-							<GridItem area="border">
-								{format.theme === ArticleSpecial.Labs ? (
-									<></>
-								) : (
-									<Border />
-								)}
-							</GridItem>
-							<GridItem area="headline">
-								<div css={maxWidth}>
-									<ArticleHeadline
-										format={format}
-										headlineString={article.headline}
-										tags={article.tags}
-										byline={article.byline}
-										webPublicationDateDeprecated={
-											article.webPublicationDateDeprecated
+										secondaryDateline={
+											article.webPublicationSecondaryDateDisplay
 										}
-										starRating={article.starRating}
-									/>
-								</div>
-							</GridItem>
-							<GridItem area="standfirst">
-								<Standfirst
-									format={format}
-									standfirst={article.standfirst}
-								/>
-							</GridItem>
-							<GridItem area="lines">
-								<div css={maxWidth}>
-									<div css={stretchLines}>
-										<DecideLines
-											format={format}
-											color={themePalette(
-												'--article-meta-lines',
-											)}
-										/>
-									</div>
-								</div>
-							</GridItem>
-							<GridItem area="meta" element="aside">
-								<div css={maxWidth}>
-									{isApps ? (
-										<>
-											<Hide from="leftCol">
-												<ArticleMetaApps
-													branding={branding}
-													format={format}
-													byline={article.byline}
-													tags={article.tags}
-													primaryDateline={
-														article.webPublicationDateDisplay
-													}
-													secondaryDateline={
-														article.webPublicationSecondaryDateDisplay
-													}
-													isCommentable={
-														article.isCommentable
-													}
-													discussionApiUrl={
-														article.config
-															.discussionApiUrl
-													}
-													shortUrlId={
-														article.config
-															.shortUrlId
-													}
-													pageId={
-														article.config.pageId
-													}
-												></ArticleMetaApps>
-											</Hide>
-											<Hide until="leftCol">
-												<ArticleMeta
-													branding={branding}
-													format={format}
-													pageId={article.pageId}
-													webTitle={article.webTitle}
-													byline={article.byline}
-													tags={article.tags}
-													primaryDateline={
-														article.webPublicationDateDisplay
-													}
-													secondaryDateline={
-														article.webPublicationSecondaryDateDisplay
-													}
-													isCommentable={
-														article.isCommentable
-													}
-													discussionApiUrl={
-														article.config
-															.discussionApiUrl
-													}
-													shortUrlId={
-														article.config
-															.shortUrlId
-													}
-												/>
-											</Hide>
-										</>
-									) : (
-										<ArticleMeta
-											branding={branding}
-											format={format}
-											pageId={article.pageId}
-											webTitle={article.webTitle}
-											byline={article.byline}
-											tags={article.tags}
-											primaryDateline={
-												article.webPublicationDateDisplay
-											}
-											secondaryDateline={
-												article.webPublicationSecondaryDateDisplay
-											}
-											isCommentable={
-												article.isCommentable
-											}
-											discussionApiUrl={
-												article.config.discussionApiUrl
-											}
-											shortUrlId={
-												article.config.shortUrlId
-											}
-										/>
-									)}
-								</div>
-							</GridItem>
-							<GridItem area="body" element="article">
-								<ArticleContainer format={format}>
-									<ArticleBody
+										isCommentable={article.isCommentable}
+										discussionApiUrl={
+											article.config.discussionApiUrl
+										}
+										shortUrlId={article.config.shortUrlId}
+										pageId={article.config.pageId}
+									></ArticleMetaApps>
+								</Hide>
+								<Hide until="leftCol">
+									<ArticleMeta
+										branding={branding}
 										format={format}
-										blocks={article.blocks}
-										host={host}
 										pageId={article.pageId}
 										webTitle={article.webTitle}
-										ajaxUrl={article.config.ajaxUrl}
-										abTests={article.config.abTests}
-										switches={article.config.switches}
-										isSensitive={article.config.isSensitive}
-										isAdFreeUser={article.isAdFreeUser}
-										sectionId={article.config.section}
-										shouldHideReaderRevenue={
-											article.shouldHideReaderRevenue
-										}
+										byline={article.byline}
+										source={article.config.source}
 										tags={article.tags}
-										isPaidContent={
-											!!article.config.isPaidContent
+										primaryDateline={
+											article.webPublicationDateDisplay
 										}
-										contributionsServiceUrl={
-											contributionsServiceUrl
+										secondaryDateline={
+											article.webPublicationSecondaryDateDisplay
 										}
-										contentType={article.contentType}
-										isPreview={article.config.isPreview}
-										idUrl={article.config.idUrl ?? ''}
-										isDev={!!article.config.isDev}
-										keywordIds={article.config.keywordIds}
-										tableOfContents={
-											article.tableOfContents
+										isCommentable={article.isCommentable}
+										discussionApiUrl={
+											article.config.discussionApiUrl
 										}
-										lang={article.lang}
-										isRightToLeftLang={
-											article.isRightToLeftLang
+										shortUrlId={article.config.shortUrlId}
+										mainMediaElements={
+											article.mainMediaElements
 										}
-										editionId={article.editionId}
-										shouldHideAds={article.shouldHideAds}
-										idApiUrl={article.config.idApiUrl}
 									/>
-								</ArticleContainer>
-							</GridItem>
-						</InteractiveGrid>
-					</div>
-				</Section>
-
-				<Section
-					stretchRight={false}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					borderColour={themePalette('--article-border')}
-					fontColour={themePalette('--article-section-title')}
-					padContent={false}
-					verticalMargins={false}
-				>
-					<div
-						css={css`
-							max-width: 620px;
-						`}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<SlotBodyEnd
-								contentType={article.contentType}
-								contributionsServiceUrl={
-									contributionsServiceUrl
+									{!!article.affiliateLinksDisclaimer && (
+										<AffiliateDisclaimer />
+									)}
+								</Hide>
+							</>
+						) : (
+							<ArticleMeta
+								branding={branding}
+								format={format}
+								pageId={article.pageId}
+								webTitle={article.webTitle}
+								byline={article.byline}
+								source={article.config.source}
+								tags={article.tags}
+								primaryDateline={
+									article.webPublicationDateDisplay
 								}
-								idApiUrl={article.config.idApiUrl}
-								isMinuteArticle={
-									article.pageType.isMinuteArticle
+								secondaryDateline={
+									article.webPublicationSecondaryDateDisplay
 								}
-								isPaidContent={article.pageType.isPaidContent}
+								isCommentable={article.isCommentable}
+								discussionApiUrl={
+									article.config.discussionApiUrl
+								}
+								shortUrlId={article.config.shortUrlId}
+								mainMediaElements={article.mainMediaElements}
+							/>
+						)}
+					</GridItem>
+					<GridItem area="body" layoutType="standard">
+						{/* Only show Listen to Article button on App landscape views */}
+						{isApps && (
+							<Hide until="leftCol">
+								<div
+									css={css`
+										margin-top: ${space[2]}px;
+									`}
+								>
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<ListenToArticle
+											articleId={article.pageId}
+										/>
+									</Island>
+								</div>
+							</Hide>
+						)}
+						<ArticleContainer format={format}>
+							<ArticleBody
+								format={format}
+								blocks={article.blocks}
+								pinnedPost={article.pinnedPost}
+								host={host}
 								pageId={article.pageId}
+								webTitle={article.webTitle}
+								ajaxUrl={article.config.ajaxUrl}
+								switches={article.config.switches}
+								isSensitive={article.config.isSensitive}
+								isAdFreeUser={article.isAdFreeUser}
 								sectionId={article.config.section}
 								shouldHideReaderRevenue={
 									article.shouldHideReaderRevenue
 								}
 								tags={article.tags}
-								renderAds={isWeb && renderAds}
-								isLabs={false}
-								articleEndSlot={
-									!!article.config.switches.articleEndSlot
+								isPaidContent={!!article.config.isPaidContent}
+								contributionsServiceUrl={
+									contributionsServiceUrl
 								}
-								isSensitive={article.config.isSensitive}
+								contentType={article.contentType}
+								isPreview={article.config.isPreview}
+								idUrl={article.config.idUrl ?? ''}
+								isDev={!!article.config.isDev}
+								keywordIds={article.config.keywordIds}
+								abTests={article.config.abTests}
+								tableOfContents={article.tableOfContents}
+								lang={article.lang}
+								isRightToLeftLang={article.isRightToLeftLang}
+								editionId={article.editionId}
+								shouldHideAds={article.shouldHideAds}
+								idApiUrl={article.config.idApiUrl}
 							/>
-						</Island>
-					</div>
-				</Section>
 
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					padSides={false}
-					backgroundColour={themePalette('--article-background')}
-				>
-					<StraightLines
-						count={4}
-						data-print-layout="hide"
-						color={themePalette('--straight-lines')}
-						cssOverrides={css`
-							display: block;
+							{isApps && (
+								<Island
+									priority="critical"
+									defer={{ until: 'visible' }}
+								>
+									<AppsEpic />
+								</Island>
+							)}
+
+							{showBodyEndSlot && (
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<SlotBodyEnd
+										contentType={article.contentType}
+										contributionsServiceUrl={
+											contributionsServiceUrl
+										}
+										idApiUrl={article.config.idApiUrl}
+										isMinuteArticle={
+											article.pageType.isMinuteArticle
+										}
+										isPaidContent={
+											article.pageType.isPaidContent
+										}
+										pageId={article.pageId}
+										sectionId={article.config.section}
+										shouldHideReaderRevenue={
+											article.shouldHideReaderRevenue
+										}
+										tags={article.tags}
+										renderAds={renderAds}
+										isLabs={false}
+										articleEndSlot={
+											!!article.config.switches
+												.articleEndSlot
+										}
+										isSensitive={article.config.isSensitive}
+									/>
+								</Island>
+							)}
+							<div
+								css={css`
+									${grid.container}
+								`}
+							>
+								<div
+									css={css`
+										${grid.column.centre}
+									`}
+								>
+									<StraightLines
+										data-print-layout="hide"
+										count={4}
+										cssOverrides={css`
+											display: block;
+										`}
+										color={themePalette('--straight-lines')}
+									/>
+									<SubMeta
+										format={format}
+										subMetaKeywordLinks={
+											article.subMetaKeywordLinks
+										}
+										subMetaSectionLinks={
+											article.subMetaSectionLinks
+										}
+										pageId={article.pageId}
+										webUrl={article.webURL}
+										webTitle={article.webTitle}
+										showBottomSocialButtons={
+											article.showBottomSocialButtons &&
+											renderingTarget === 'Web'
+										}
+									/>
+								</div>
+							</div>
+						</ArticleContainer>
+					</GridItem>
+					<GridItem
+						area="right-column"
+						layoutType="standard"
+						customCss={css`
+							padding-top: 6px;
+							padding-bottom: 0px;
+							z-index: 5;
 						`}
-					/>
-				</Section>
-
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-				>
-					<SubMeta
-						format={format}
-						subMetaKeywordLinks={article.subMetaKeywordLinks}
-						subMetaSectionLinks={article.subMetaSectionLinks}
-						pageId={article.pageId}
-						webUrl={article.webURL}
-						webTitle={article.webTitle}
-						showBottomSocialButtons={
-							article.showBottomSocialButtons &&
-							renderingTarget === 'Web'
-						}
-					/>
-				</Section>
+					>
+						<Hide until="desktop">
+							<Island
+								priority="feature"
+								defer={{
+									until: 'visible',
+									// Provide a much higher value for the top margin for the intersection observer
+									// This is because the most viewed would otherwise only be lazy loaded when the
+									// bottom of the container intersects with the viewport
+									rootMargin: '700px 100px',
+								}}
+							>
+								<MostViewedRightWithAd
+									format={format}
+									isPaidContent={
+										article.pageType.isPaidContent
+									}
+									renderAds={isWeb && renderAds}
+									shouldHideReaderRevenue={
+										!!article.config.shouldHideReaderRevenue
+									}
+								/>
+							</Island>
+						</Hide>
+					</GridItem>
+				</article>
 
 				{isWeb && renderAds && (
 					<Section
@@ -629,7 +565,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 				{article.storyPackage && (
 					<Section
 						fullWidth={true}
-						showTopBorder={false}
 						backgroundColour={themePalette(
 							'--article-section-background',
 						)}
@@ -677,7 +612,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 						webURL={article.webURL}
 					/>
 				</Island>
-
 				{showComments && (
 					<Section
 						fullWidth={true}
@@ -719,7 +653,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 							'--article-section-background',
 						)}
 						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
 					>
 						<MostViewedFooterLayout renderAds={isWeb && renderAds}>
 							<Island
@@ -752,21 +685,26 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 			</main>
-
-			{isWeb && props.NAV.subNavSections && (
-				<Section fullWidth={true} padSides={false} element="aside">
-					<Island priority="enhancement" defer={{ until: 'visible' }}>
-						<SubNav
-							subNavSections={props.NAV.subNavSections}
-							currentNavLink={props.NAV.currentNavLink}
-							position="footer"
-						/>
-					</Island>
-				</Section>
-			)}
-
 			{isWeb && (
 				<>
+					{props.NAV.subNavSections && (
+						<Section
+							fullWidth={true}
+							padSides={false}
+							element="aside"
+						>
+							<Island
+								priority="enhancement"
+								defer={{ until: 'visible' }}
+							>
+								<SubNav
+									subNavSections={props.NAV.subNavSections}
+									currentNavLink={props.NAV.currentNavLink}
+									position="footer"
+								/>
+							</Island>
+						</Section>
+					)}
 					<Section
 						fullWidth={true}
 						padSides={false}
@@ -783,7 +721,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 							editionId={article.editionId}
 						/>
 					</Section>
-
 					<BannerWrapper data-print-layout="hide">
 						<Island priority="feature" defer={{ until: 'idle' }}>
 							<StickyBottomBanner
@@ -807,6 +744,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 									!!article.config.switches.remoteBanner
 								}
 								tags={article.tags}
+								host={host}
 							/>
 						</Island>
 					</BannerWrapper>
@@ -817,19 +755,22 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					/>
 				</>
 			)}
+
 			{isApps && (
-				<Section
-					fullWidth={true}
-					backgroundColour={themePalette('--apps-footer-background')}
-					borderColour={themePalette('--article-border')}
-					padSides={false}
-					showSideBorders={false}
-					element="footer"
-				>
-					<Island priority="critical">
-						<AppsFooter />
-					</Island>
-				</Section>
+				<>
+					<Section
+						fullWidth={true}
+						backgroundColour={themePalette('--ad-background')}
+						borderColour={themePalette('--article-border')}
+						padSides={false}
+						showSideBorders={false}
+						element="footer"
+					>
+						<Island priority="critical">
+							<AppsFooter />
+						</Island>
+					</Section>
+				</>
 			)}
 		</>
 	);
diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx
new file mode 100644
index 00000000000..6141e64a78a
--- /dev/null
+++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx
@@ -0,0 +1,838 @@
+import { css, Global } from '@emotion/react';
+import {
+	from,
+	palette as sourcePalette,
+	until,
+} from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import type React from 'react';
+import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AppsFooter } from '../components/AppsFooter.island';
+import { ArticleBody } from '../components/ArticleBody';
+import { ArticleContainer } from '../components/ArticleContainer';
+import { ArticleHeadline } from '../components/ArticleHeadline';
+import { ArticleMetaApps } from '../components/ArticleMeta.apps';
+import { ArticleMeta } from '../components/ArticleMeta.web';
+import { ArticleTitle } from '../components/ArticleTitle';
+import { Border } from '../components/Border';
+import { Carousel } from '../components/Carousel.island';
+import { DecideLines } from '../components/DecideLines';
+import { DirectoryPageNav } from '../components/DirectoryPageNav';
+import { DiscussionLayout } from '../components/DiscussionLayout';
+import { Footer } from '../components/Footer';
+import { GridItem } from '../components/GridItem';
+import { HeaderAdSlot } from '../components/HeaderAdSlot';
+import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island';
+import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island';
+import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island';
+import { Island } from '../components/Island';
+import { LabsHeader } from '../components/LabsHeader';
+import { MainMedia } from '../components/MainMedia';
+import { Masthead } from '../components/Masthead/Masthead';
+import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
+import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
+import { OnwardsUpper } from '../components/OnwardsUpper.island';
+import { Section } from '../components/Section';
+import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
+import { Standfirst } from '../components/Standfirst';
+import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
+import { SubMeta } from '../components/SubMeta';
+import { SubNav } from '../components/SubNav.island';
+import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
+import { canRenderAds } from '../lib/canRenderAds';
+import { getContributionsServiceUrl } from '../lib/contributions';
+import { decideStoryPackageTrails } from '../lib/decideTrail';
+import type { NavType } from '../model/extract-nav';
+import { palette as themePalette } from '../palette';
+import type { ArticleDeprecated } from '../types/article';
+import type { RoleType } from '../types/content';
+import type { RenderingTarget } from '../types/renderingTarget';
+import {
+	interactiveGlobalStyles,
+	interactiveLegacyClasses,
+} from './lib/interactiveLegacyStyling';
+import { BannerWrapper, Stuck } from './lib/stickiness';
+
+const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
+	<div
+		className={interactiveLegacyClasses.contentInteractiveGrid}
+		css={css`
+			/* IE Fallback */
+			display: flex;
+			flex-direction: column;
+			${until.leftCol} {
+				margin-left: 0px;
+			}
+			${from.leftCol} {
+				margin-left: 151px;
+			}
+			${from.wide} {
+				margin-left: 230px;
+			}
+
+			@supports (display: grid) {
+				display: grid;
+				width: 100%;
+				margin-left: 0;
+
+				grid-column-gap: 10px;
+
+				/*
+					Explanation of each unit of grid-template-columns
+
+					Left Column (220 - 1px border)
+					Vertical grey border
+					Main content
+				*/
+				${from.wide} {
+					grid-template-columns: 219px 1px 1020px;
+
+					grid-template-areas:
+						'title  border  headline'
+						'.      border  standfirst'
+						'.      border  media'
+						'.      border  media'
+						'.      border  lines'
+						'.      border  meta'
+						'body   body    body'
+						'.      .       .';
+				}
+
+				/*
+					Explanation of each unit of grid-template-columns
+
+					Left Column (220 - 1px border)
+					Vertical grey border
+					Main content
+				*/
+				${until.wide} {
+					grid-template-columns: 140px 1px 940px;
+
+					grid-template-areas:
+						'title  border  headline'
+						'.      border  standfirst'
+						'.      border  media'
+						'.      border  media'
+						'.      border  lines'
+						'.      border  meta'
+						'body   body    body'
+						'.      .       .';
+				}
+
+				${until.leftCol} {
+					grid-template-columns: 100%; /* Main content */
+					grid-template-areas:
+						'title'
+						'headline'
+						'standfirst'
+						'media'
+						'lines'
+						'meta'
+						'body'
+						'.';
+				}
+
+				${until.desktop} {
+					grid-template-columns: 100%; /* Main content */
+					grid-template-areas:
+						'title'
+						'headline'
+						'standfirst'
+						'media'
+						'lines'
+						'meta'
+						'body';
+				}
+
+				${until.tablet} {
+					grid-column-gap: 0px;
+					grid-template-columns: 100%; /* Main content */
+					grid-template-areas:
+						'media'
+						'title'
+						'headline'
+						'standfirst'
+						'lines'
+						'meta'
+						'body';
+				}
+			}
+		`}
+	>
+		{children}
+	</div>
+);
+
+const maxWidth = css`
+	${from.desktop} {
+		max-width: 620px;
+	}
+`;
+
+const stretchLines = css`
+	${until.phablet} {
+		margin-left: -20px;
+		margin-right: -20px;
+	}
+	${until.mobileLandscape} {
+		margin-left: -10px;
+		margin-right: -10px;
+	}
+`;
+
+export const temporaryBodyCopyColourOverride = css`
+	.content__main-column--interactive p {
+		/* stylelint-disable-next-line declaration-no-important */
+		color: ${themePalette('--article-text')} !important;
+	}
+`;
+
+interface CommonProps {
+	article: ArticleDeprecated;
+	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
+	serverTime?: number;
+}
+
+interface WebProps extends CommonProps {
+	NAV: NavType;
+	renderingTarget: 'Web';
+}
+
+interface AppsProps extends CommonProps {
+	renderingTarget: 'Apps';
+}
+
+export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => {
+	const { article, format, renderingTarget, serverTime } = props;
+	const {
+		config: { isPaidContent, host, hasSurveyAd },
+		editionId,
+	} = article;
+
+	const isApps = renderingTarget === 'Apps';
+	const isWeb = renderingTarget === 'Web';
+
+	const showComments = article.isCommentable && !isPaidContent;
+
+	const { branding } = article.commercialProperties[article.editionId];
+
+	const contributionsServiceUrl = getContributionsServiceUrl(article);
+
+	const renderAds = canRenderAds(article);
+
+	const includesFullWidthElement = article.blocks.some((block) =>
+		block.elements.some((element) => {
+			const role =
+				'role' in element
+					? (element.role as RoleType | 'fullWidth' | undefined)
+					: undefined;
+			return role === 'fullWidth';
+		}),
+	);
+
+	return (
+		<>
+			{includesFullWidthElement && (
+				<Island priority="critical">
+					<InteractivesScrollbarWidth />
+				</Island>
+			)}
+			{isApps && (
+				<>
+					<Island priority="critical">
+						<InteractivesNativePlatformWrapper />
+					</Island>
+					<Island priority="critical">
+						<InteractivesDisableArticleSwipe />
+					</Island>
+					<Global styles={temporaryBodyCopyColourOverride} />
+				</>
+			)}
+			{article.isLegacyInteractive && (
+				<Global styles={interactiveGlobalStyles} />
+			)}
+			{isWeb && (
+				<>
+					<div>
+						{renderAds && (
+							<Stuck>
+								<div data-print-layout="hide">
+									<Section
+										fullWidth={true}
+										showTopBorder={false}
+										showSideBorders={false}
+										padSides={false}
+										shouldCenter={false}
+									>
+										<HeaderAdSlot />
+									</Section>
+								</div>
+							</Stuck>
+						)}
+
+						<Masthead
+							nav={props.NAV}
+							editionId={article.editionId}
+							idUrl={article.config.idUrl}
+							mmaUrl={article.config.mmaUrl}
+							discussionApiUrl={article.config.discussionApiUrl}
+							idApiUrl={article.config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
+							showSlimNav={true}
+							showSubNav={false}
+							hasPageSkin={false}
+							hasPageSkinContentSelfConstrain={false}
+							pageId={article.pageId}
+							tagIds={article.tags.map((tag) => tag.id)}
+							sectionId={article.config.section}
+							contentType={article.contentType}
+						/>
+					</div>
+
+					{format.theme === ArticleSpecial.Labs && (
+						<Stuck zIndex="subNavBanner">
+							<Section
+								fullWidth={true}
+								showTopBorder={false}
+								backgroundColour={sourcePalette.labs[400]}
+								borderColour={sourcePalette.neutral[60]}
+								sectionId="labs-header"
+							>
+								<LabsHeader editionId={editionId} />
+							</Section>
+						</Stuck>
+					)}
+
+					{renderAds && hasSurveyAd && (
+						<AdSlot position="survey" display={format.display} />
+					)}
+				</>
+			)}
+			<main data-layout="InteractiveLayout">
+				<DirectoryPageNav
+					pageId={article.pageId}
+					pageTags={article.tags}
+				/>
+				<Section
+					fullWidth={true}
+					showTopBorder={false}
+					backgroundColour={themePalette('--article-background')}
+					borderColour={themePalette('--article-border')}
+					element="article"
+					className={interactiveLegacyClasses.contentInteractive}
+				>
+					<div
+						className={interactiveLegacyClasses.contentInteractive}
+					>
+						<InteractiveGrid>
+							<GridItem area="media">
+								<div css={maxWidth}>
+									<MainMedia
+										format={format}
+										elements={article.mainMediaElements}
+										host={host}
+										pageId={article.pageId}
+										webTitle={article.webTitle}
+										ajaxUrl={article.config.ajaxUrl}
+										abTests={article.config.abTests}
+										switches={article.config.switches}
+										isAdFreeUser={article.isAdFreeUser}
+										isSensitive={article.config.isSensitive}
+										editionId={article.editionId}
+										shouldHideAds={article.shouldHideAds}
+									/>
+								</div>
+							</GridItem>
+							<GridItem area="title" element="aside">
+								<div
+									className={`${interactiveLegacyClasses.contentLabels} ${interactiveLegacyClasses.contentLabelsNotImmersive}`}
+								>
+									<ArticleTitle
+										format={format}
+										tags={article.tags}
+										sectionLabel={article.sectionLabel}
+										sectionUrl={article.sectionUrl}
+										guardianBaseURL={
+											article.guardianBaseURL
+										}
+									/>
+								</div>
+							</GridItem>
+							<GridItem area="border">
+								{format.theme === ArticleSpecial.Labs ? (
+									<></>
+								) : (
+									<Border />
+								)}
+							</GridItem>
+							<GridItem area="headline">
+								<div css={maxWidth}>
+									<ArticleHeadline
+										format={format}
+										headlineString={article.headline}
+										tags={article.tags}
+										byline={article.byline}
+										webPublicationDateDeprecated={
+											article.webPublicationDateDeprecated
+										}
+										starRating={article.starRating}
+									/>
+								</div>
+							</GridItem>
+							<GridItem area="standfirst">
+								<Standfirst
+									format={format}
+									standfirst={article.standfirst}
+								/>
+							</GridItem>
+							<GridItem area="lines">
+								<div css={maxWidth}>
+									<div css={stretchLines}>
+										<DecideLines
+											format={format}
+											color={themePalette(
+												'--article-meta-lines',
+											)}
+										/>
+									</div>
+								</div>
+							</GridItem>
+							<GridItem area="meta" element="aside">
+								<div css={maxWidth}>
+									{isApps ? (
+										<>
+											<Hide from="leftCol">
+												<ArticleMetaApps
+													branding={branding}
+													format={format}
+													byline={article.byline}
+													tags={article.tags}
+													primaryDateline={
+														article.webPublicationDateDisplay
+													}
+													secondaryDateline={
+														article.webPublicationSecondaryDateDisplay
+													}
+													isCommentable={
+														article.isCommentable
+													}
+													discussionApiUrl={
+														article.config
+															.discussionApiUrl
+													}
+													shortUrlId={
+														article.config
+															.shortUrlId
+													}
+													pageId={
+														article.config.pageId
+													}
+												></ArticleMetaApps>
+											</Hide>
+											<Hide until="leftCol">
+												<ArticleMeta
+													branding={branding}
+													format={format}
+													pageId={article.pageId}
+													webTitle={article.webTitle}
+													byline={article.byline}
+													tags={article.tags}
+													primaryDateline={
+														article.webPublicationDateDisplay
+													}
+													secondaryDateline={
+														article.webPublicationSecondaryDateDisplay
+													}
+													isCommentable={
+														article.isCommentable
+													}
+													discussionApiUrl={
+														article.config
+															.discussionApiUrl
+													}
+													shortUrlId={
+														article.config
+															.shortUrlId
+													}
+												/>
+											</Hide>
+										</>
+									) : (
+										<ArticleMeta
+											branding={branding}
+											format={format}
+											pageId={article.pageId}
+											webTitle={article.webTitle}
+											byline={article.byline}
+											tags={article.tags}
+											primaryDateline={
+												article.webPublicationDateDisplay
+											}
+											secondaryDateline={
+												article.webPublicationSecondaryDateDisplay
+											}
+											isCommentable={
+												article.isCommentable
+											}
+											discussionApiUrl={
+												article.config.discussionApiUrl
+											}
+											shortUrlId={
+												article.config.shortUrlId
+											}
+										/>
+									)}
+								</div>
+							</GridItem>
+							<GridItem area="body" element="article">
+								<ArticleContainer format={format}>
+									<ArticleBody
+										format={format}
+										blocks={article.blocks}
+										host={host}
+										pageId={article.pageId}
+										webTitle={article.webTitle}
+										ajaxUrl={article.config.ajaxUrl}
+										abTests={article.config.abTests}
+										switches={article.config.switches}
+										isSensitive={article.config.isSensitive}
+										isAdFreeUser={article.isAdFreeUser}
+										sectionId={article.config.section}
+										shouldHideReaderRevenue={
+											article.shouldHideReaderRevenue
+										}
+										tags={article.tags}
+										isPaidContent={
+											!!article.config.isPaidContent
+										}
+										contributionsServiceUrl={
+											contributionsServiceUrl
+										}
+										contentType={article.contentType}
+										isPreview={article.config.isPreview}
+										idUrl={article.config.idUrl ?? ''}
+										isDev={!!article.config.isDev}
+										keywordIds={article.config.keywordIds}
+										tableOfContents={
+											article.tableOfContents
+										}
+										lang={article.lang}
+										isRightToLeftLang={
+											article.isRightToLeftLang
+										}
+										editionId={article.editionId}
+										shouldHideAds={article.shouldHideAds}
+										idApiUrl={article.config.idApiUrl}
+										isOldInteractive={true}
+									/>
+								</ArticleContainer>
+							</GridItem>
+						</InteractiveGrid>
+					</div>
+				</Section>
+
+				<Section
+					stretchRight={false}
+					showTopBorder={false}
+					backgroundColour={themePalette('--article-background')}
+					borderColour={themePalette('--article-border')}
+					fontColour={themePalette('--article-section-title')}
+					padContent={false}
+					verticalMargins={false}
+				>
+					<div
+						css={css`
+							max-width: 620px;
+						`}
+					>
+						<Island priority="feature" defer={{ until: 'visible' }}>
+							<SlotBodyEnd
+								contentType={article.contentType}
+								contributionsServiceUrl={
+									contributionsServiceUrl
+								}
+								idApiUrl={article.config.idApiUrl}
+								isMinuteArticle={
+									article.pageType.isMinuteArticle
+								}
+								isPaidContent={article.pageType.isPaidContent}
+								pageId={article.pageId}
+								sectionId={article.config.section}
+								shouldHideReaderRevenue={
+									article.shouldHideReaderRevenue
+								}
+								tags={article.tags}
+								renderAds={isWeb && renderAds}
+								isLabs={false}
+								articleEndSlot={
+									!!article.config.switches.articleEndSlot
+								}
+								isSensitive={article.config.isSensitive}
+							/>
+						</Island>
+					</div>
+				</Section>
+
+				<Section
+					fullWidth={true}
+					showTopBorder={false}
+					padSides={false}
+					backgroundColour={themePalette('--article-background')}
+				>
+					<StraightLines
+						count={4}
+						data-print-layout="hide"
+						color={themePalette('--straight-lines')}
+						cssOverrides={css`
+							display: block;
+						`}
+					/>
+				</Section>
+
+				<Section
+					fullWidth={true}
+					showTopBorder={false}
+					backgroundColour={themePalette('--article-background')}
+				>
+					<SubMeta
+						format={format}
+						subMetaKeywordLinks={article.subMetaKeywordLinks}
+						subMetaSectionLinks={article.subMetaSectionLinks}
+						pageId={article.pageId}
+						webUrl={article.webURL}
+						webTitle={article.webTitle}
+						showBottomSocialButtons={
+							article.showBottomSocialButtons &&
+							renderingTarget === 'Web'
+						}
+						isDeprecatedInteractiveLayout={true}
+					/>
+				</Section>
+
+				{isWeb && renderAds && (
+					<Section
+						fullWidth={true}
+						padSides={false}
+						showTopBorder={false}
+						showSideBorders={false}
+						backgroundColour={themePalette('--ad-background')}
+						element="aside"
+					>
+						<AdSlot
+							data-print-layout="hide"
+							position="merchandising-high"
+							display={format.display}
+						/>
+					</Section>
+				)}
+
+				{article.storyPackage && (
+					<Section
+						fullWidth={true}
+						showTopBorder={false}
+						backgroundColour={themePalette(
+							'--article-section-background',
+						)}
+						borderColour={themePalette('--article-border')}
+					>
+						<Island priority="feature" defer={{ until: 'visible' }}>
+							<Carousel
+								heading={article.storyPackage.heading}
+								trails={decideStoryPackageTrails(
+									article.storyPackage.trails,
+									article.webURL,
+								)}
+								onwardsSource="more-on-this-story"
+								format={format}
+								leftColSize={'compact'}
+								discussionApiUrl={
+									article.config.discussionApiUrl
+								}
+								serverTime={serverTime}
+								renderingTarget={renderingTarget}
+							/>
+						</Island>
+					</Section>
+				)}
+
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<OnwardsUpper
+						ajaxUrl={article.config.ajaxUrl}
+						hasRelated={article.hasRelated}
+						hasStoryPackage={article.hasStoryPackage}
+						isAdFreeUser={article.isAdFreeUser}
+						pageId={article.pageId}
+						isPaidContent={!!article.config.isPaidContent}
+						showRelatedContent={article.config.showRelatedContent}
+						keywordIds={article.config.keywordIds}
+						contentType={article.contentType}
+						tags={article.tags}
+						format={format}
+						pillar={format.theme}
+						editionId={article.editionId}
+						shortUrlId={article.config.shortUrlId}
+						discussionApiUrl={article.config.discussionApiUrl}
+						serverTime={serverTime}
+						renderingTarget={renderingTarget}
+						webURL={article.webURL}
+					/>
+				</Island>
+
+				{showComments && (
+					<Section
+						fullWidth={true}
+						sectionId="comments"
+						element="section"
+						backgroundColour={themePalette(
+							'--discussion-section-background',
+						)}
+						borderColour={themePalette('--article-border')}
+						fontColour={themePalette('--discussion-text')}
+					>
+						<DiscussionLayout
+							discussionApiUrl={article.config.discussionApiUrl}
+							shortUrlId={article.config.shortUrlId}
+							format={format}
+							discussionD2Uid={article.config.discussionD2Uid}
+							discussionApiClientHeader={
+								article.config.discussionApiClientHeader
+							}
+							enableDiscussionSwitch={
+								!!article.config.switches.enableDiscussionSwitch
+							}
+							isAdFreeUser={article.isAdFreeUser}
+							shouldHideAds={article.shouldHideAds}
+							idApiUrl={article.config.idApiUrl}
+						/>
+					</Section>
+				)}
+
+				{!isPaidContent && (
+					<Section
+						title="Most viewed"
+						padContent={false}
+						verticalMargins={false}
+						element="aside"
+						data-link-name="most-popular"
+						data-component="most-popular"
+						backgroundColour={themePalette(
+							'--article-section-background',
+						)}
+						borderColour={themePalette('--article-border')}
+						fontColour={themePalette('--article-section-title')}
+					>
+						<MostViewedFooterLayout renderAds={isWeb && renderAds}>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<MostViewedFooterData
+									sectionId={article.config.section}
+									ajaxUrl={article.config.ajaxUrl}
+									edition={article.editionId}
+								/>
+							</Island>
+						</MostViewedFooterLayout>
+					</Section>
+				)}
+
+				{isWeb && renderAds && (
+					<Section
+						fullWidth={true}
+						padSides={false}
+						showTopBorder={false}
+						showSideBorders={false}
+						backgroundColour={themePalette('--ad-background')}
+						element="aside"
+					>
+						<AdSlot
+							position="merchandising"
+							display={format.display}
+						/>
+					</Section>
+				)}
+			</main>
+
+			{isWeb && props.NAV.subNavSections && (
+				<Section fullWidth={true} padSides={false} element="aside">
+					<Island priority="enhancement" defer={{ until: 'visible' }}>
+						<SubNav
+							subNavSections={props.NAV.subNavSections}
+							currentNavLink={props.NAV.currentNavLink}
+							position="footer"
+						/>
+					</Island>
+				</Section>
+			)}
+
+			{isWeb && (
+				<>
+					<Section
+						fullWidth={true}
+						padSides={false}
+						backgroundColour={sourcePalette.brand[400]}
+						borderColour={sourcePalette.brand[600]}
+						showSideBorders={false}
+						element="footer"
+					>
+						<Footer
+							pageFooter={article.pageFooter}
+							selectedPillar={props.NAV.selectedPillar}
+							pillars={props.NAV.pillars}
+							urls={article.nav.readerRevenueLinks.footer}
+							editionId={article.editionId}
+						/>
+					</Section>
+
+					<BannerWrapper data-print-layout="hide">
+						<Island priority="feature" defer={{ until: 'idle' }}>
+							<StickyBottomBanner
+								contentType={article.contentType}
+								contributionsServiceUrl={
+									contributionsServiceUrl
+								}
+								idApiUrl={article.config.idApiUrl}
+								isMinuteArticle={
+									article.pageType.isMinuteArticle
+								}
+								isPaidContent={article.pageType.isPaidContent}
+								isPreview={!!article.config.isPreview}
+								isSensitive={article.config.isSensitive}
+								pageId={article.pageId}
+								sectionId={article.config.section}
+								shouldHideReaderRevenue={
+									article.shouldHideReaderRevenue
+								}
+								remoteBannerSwitch={
+									!!article.config.switches.remoteBanner
+								}
+								tags={article.tags}
+							/>
+						</Island>
+					</BannerWrapper>
+					<MobileStickyContainer
+						data-print-layout="hide"
+						contentType={article.contentType}
+						pageId={article.pageId}
+					/>
+				</>
+			)}
+			{isApps && (
+				<Section
+					fullWidth={true}
+					backgroundColour={themePalette('--apps-footer-background')}
+					borderColour={themePalette('--article-border')}
+					padSides={false}
+					showSideBorders={false}
+					element="footer"
+				>
+					<Island priority="critical">
+						<AppsFooter />
+					</Island>
+				</Section>
+			)}
+		</>
+	);
+};
diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
new file mode 100644
index 00000000000..229d620e6f7
--- /dev/null
+++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
@@ -0,0 +1,108 @@
+import { css, type SerializedStyles } from '@emotion/react';
+import { from, until } from '@guardian/source/foundations';
+import { grid } from '../../grid';
+
+export type LayoutType = 'standard';
+
+export type Area =
+	| 'title'
+	| 'headline'
+	| 'standfirst'
+	| 'media'
+	| 'meta'
+	| 'body'
+	| 'right-column';
+
+type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
+
+const breakpointQueries: Record<Breakpoint, string> = {
+	mobile: until.tablet,
+	tablet: from.tablet,
+	desktop: from.desktop,
+	leftCol: from.leftCol,
+};
+
+// Raw CSS overrides per area per breakpoint. Entries are only needed when an area
+// deviates from the default: centre column, single-column mobile layout with areas
+// in DOM order (media → title → headline → standfirst → meta → body → right-column).
+
+type AreaCss = Partial<Record<Breakpoint, string>>;
+type LayoutCssMap = Partial<Record<Area, AreaCss>>;
+
+const standardCss: LayoutCssMap = {
+	title: {
+		tablet: 'grid-row: 1;',
+		leftCol:
+			'grid-row: 1; grid-column: left-column-start / left-column-end;',
+	},
+	headline: {
+		tablet: 'grid-row: 2;',
+		leftCol: 'grid-row: 1;',
+	},
+	standfirst: {
+		tablet: 'grid-row: 3;',
+		leftCol: 'grid-row: 2;',
+	},
+	media: {
+		tablet: 'grid-row: 4;',
+		leftCol: 'grid-row: 3;',
+	},
+	meta: {
+		tablet: 'grid-row: 5;',
+		leftCol:
+			'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;',
+	},
+	body: {
+		mobile: grid.column.all,
+		tablet: `grid-row: 6; ${grid.column.all}`,
+		leftCol: 'grid-row: 4;',
+	},
+	'right-column': {
+		desktop:
+			'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;',
+		leftCol:
+			'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;',
+	},
+};
+
+const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
+	standard: standardCss,
+};
+
+/**
+ * Returns the Emotion CSS needed to position a single grid item — its
+ * default column, its row at each breakpoint, and any column overrides.
+ * The grid item _must_ be inside a {@link grid} module container.
+ *
+ * All items default to the centre column. Per-breakpoint overrides for
+ * `grid-row` and `grid-column` are applied on top via media queries,
+ * looked up from the plain CSS maps defined in this file.
+ *
+ * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`).
+ * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups.
+ *
+ * @example
+ * // In a React component:
+ * <div css={gridItemCss('headline', 'standard')} />
+ */
+export const gridItemCss = (
+	area: Area,
+	layoutType: LayoutType,
+): SerializedStyles => {
+	const areaOverrides = layoutCssMaps[layoutType][area] ?? {};
+
+	const breakpointCss = Object.entries(areaOverrides).map(
+		([bp, styles]) => css`
+			${breakpointQueries[bp as Breakpoint]} {
+				${styles}
+			}
+		`,
+	);
+
+	// All items default to the centre column; breakpoint entries above
+	// override grid-row and grid-column as needed.
+	return css`
+		grid-column: centre-column-start / centre-column-end;
+		${breakpointCss}
+	`;
+};
diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx
index 20cc9d78058..b6f36284f39 100644
--- a/dotcom-rendering/src/lib/ArticleRenderer.tsx
+++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { useConfig } from '../components/ConfigContext';
+import { grid } from '../grid';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
@@ -37,6 +38,7 @@ type Props = {
 	contributionsServiceUrl: string;
 	shouldHideAds: boolean;
 	idApiUrl?: string;
+	isOldInteractive?: boolean;
 };
 
 export const ArticleRenderer = ({
@@ -61,6 +63,7 @@ export const ArticleRenderer = ({
 	contributionsServiceUrl,
 	shouldHideAds,
 	idApiUrl,
+	isOldInteractive = false,
 }: Props) => {
 	const isSectionedMiniProfilesArticle =
 		elements.filter(
@@ -106,6 +109,13 @@ export const ArticleRenderer = ({
 	// ^^ Until we decide where to do the "isomorphism split" in this this code is not safe here.
 	//    But should be soon.
 
+	const interactiveLayoutCSS = css`
+		${grid.container}
+		> * {
+			${grid.column.centre}
+		}
+	`;
+
 	return (
 		<div
 			className={[
@@ -114,11 +124,16 @@ export const ArticleRenderer = ({
 
 				// Note, this class MUST be on the *direct parent* of the
 				// elements for some legacy interactive styling to work.
-				format.design === ArticleDesign.Interactive
+				format.design === ArticleDesign.Interactive && isOldInteractive
 					? interactiveLegacyClasses.contentMainColumn
 					: '',
 			].join(' ')}
-			css={[commercialPosition, spacefinderAdStyles]}
+			// TODO: Conditionally apply grid for interactives?
+			css={[
+				commercialPosition,
+				spacefinderAdStyles,
+				!isOldInteractive && interactiveLayoutCSS,
+			]}
 		>
 			{renderingTarget === 'Apps'
 				? renderedElements