diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx
index 67e3cc50970..e68f9c1874f 100644
--- a/dotcom-rendering/src/components/ArticleHeadline.tsx
+++ b/dotcom-rendering/src/components/ArticleHeadline.tsx
@@ -966,10 +966,13 @@ export const ArticleHeadline = ({
 				case ArticleDesign.Picture:
 					return (
 						<div
-							css={decideBottomPadding({
-								format,
-								hasAvatar,
-							})}
+							css={[
+								decideBottomPadding({
+									format,
+									hasAvatar,
+								}),
+								maxWidth,
+							]}
 						>
 							<DesignTag format={format} />
 							<h1
diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx
index 5d356323691..45f46ec79e8 100644
--- a/dotcom-rendering/src/components/DecideLines.tsx
+++ b/dotcom-rendering/src/components/DecideLines.tsx
@@ -10,6 +10,7 @@ import {
 type Props = {
 	format: ArticleFormat;
 	color?: string;
+	displayingAvatar?: boolean;
 };
 
 type DottedLinesProps = { color?: string; count: number };
@@ -40,12 +41,24 @@ const DottedLines = ({
 	></div>
 );
 
-export const DecideLines = ({ format, color }: Props) => {
-	const count = format.design === ArticleDesign.Comment ? 8 : 4;
+export const DecideLines = ({ format, color, displayingAvatar }: Props) => {
+	const count =
+		format.design === ArticleDesign.Comment || displayingAvatar ? 8 : 4;
 
 	switch (format.theme) {
 		case Pillar.Sport:
-			return <DottedLines count={count} color={color} />;
+			if (format.design !== ArticleDesign.Picture) {
+				return <DottedLines count={count} color={color} />;
+			}
+			return (
+				<StraightLines
+					cssOverrides={css`
+						display: block;
+					`}
+					count={count}
+					color={color}
+				/>
+			);
 		default:
 			return (
 				<StraightLines
diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx
index 3a2d30e23f5..153ab6563dd 100644
--- a/dotcom-rendering/src/components/MainMedia.tsx
+++ b/dotcom-rendering/src/components/MainMedia.tsx
@@ -77,6 +77,13 @@ const chooseWrapper = (format: ArticleFormat) => {
 					return noGutters;
 			}
 		}
+		case ArticleDisplay.Showcase:
+			switch (format.design) {
+				case ArticleDesign.Picture:
+					return '';
+				default:
+					return noGutters;
+			}
 		default:
 			return noGutters;
 	}
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index fa41ad65ca6..f7a64d55a6f 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -17,7 +17,6 @@ import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
-import { PictureLayout } from './PictureLayout';
 import { StandardLayout } from './StandardLayout';
 
 interface BaseProps {
@@ -101,15 +100,6 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 							serverTime={serverTime}
 						/>
 					);
-				case ArticleDesign.Picture:
-					return (
-						<PictureLayout
-							article={article.frontendData}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
 				default:
 					return (
 						<StandardLayout
@@ -289,16 +279,6 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 							serverTime={serverTime}
 						/>
 					);
-				case ArticleDesign.Picture:
-					return (
-						<PictureLayout
-							article={article.frontendData}
-							NAV={NAV}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
 				default:
 					return (
 						<StandardLayout
diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
deleted file mode 100644
index f4e3f55728c..00000000000
--- a/dotcom-rendering/src/layouts/PictureLayout.tsx
+++ /dev/null
@@ -1,786 +0,0 @@
-import { css } 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 { AdPortals } from '../components/AdPortals.island';
-import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AppsFooter } from '../components/AppsFooter.island';
-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 { ContributorAvatar } from '../components/ContributorAvatar';
-import { DecideLines } from '../components/DecideLines';
-import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
-import { DiscussionLayout } from '../components/DiscussionLayout';
-import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
-import { HeaderAdSlot } from '../components/HeaderAdSlot';
-import { Island } from '../components/Island';
-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 { Standfirst } from '../components/Standfirst';
-import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
-import { SubMeta } from '../components/SubMeta';
-import { SubNav } from '../components/SubNav.island';
-import type { ArticleFormat } from '../lib/articleFormat';
-import { getSoleContributor } from '../lib/byline';
-import { canRenderAds } from '../lib/canRenderAds';
-import { getContributionsServiceUrl } from '../lib/contributions';
-import { decideStoryPackageTrails } from '../lib/decideTrail';
-import { decideLanguage, decideLanguageDirection } from '../lib/lang';
-import { worldCupTagId } from '../lib/worldCup2026';
-import type { NavType } from '../model/extract-nav';
-import { palette as themePalette } from '../palette';
-import type { ArticleDeprecated } from '../types/article';
-import type { RenderingTarget } from '../types/renderingTarget';
-import { BannerWrapper, Stuck } from './lib/stickiness';
-
-const PictureGrid = ({ children }: { children: React.ReactNode }) => (
-	<div
-		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
-					Right Column
-
-					Duplicate lines are required to ensure the left column does not have extra vertical space.
-				*/
-				${from.wide} {
-					grid-template-columns: 219px 1px 1020px;
-					grid-template-areas:
-						'title  border  headline'
-						'.      border  standfirst'
-						'meta   border  media'
-						'meta   border  submeta';
-				}
-
-				${until.wide} {
-					grid-template-columns: 140px 1px 620px 0 300px;
-					grid-template-areas:
-						'title  border  headline    headline   headline'
-						'.      border  standfirst  standfirst standfirst'
-						'meta   border  media       media      media'
-						'meta   border  submeta     submeta    submeta';
-				}
-
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Main content
-					Right Column
-				*/
-				${until.leftCol} {
-					grid-column-gap: 0px;
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title     '
-						'headline  '
-						'meta      '
-						'standfirst'
-						'media     '
-						'submeta   '
-						'.         ';
-				}
-
-				${until.desktop} {
-					grid-column-gap: 0px;
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'meta'
-						'standfirst'
-						'media'
-						'submeta';
-				}
-
-				${until.tablet} {
-					grid-column-gap: 0px;
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'meta'
-						'standfirst'
-						'media'
-						'submeta';
-				}
-			}
-		`}
-	>
-		{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;
-	}
-`;
-
-const mainMediaWrapper = (displayAvatarUrl: boolean) => css`
-	position: relative;
-	${until.phablet} {
-		margin-left: 20px;
-		margin-right: 20px;
-	}
-	${until.mobileLandscape} {
-		margin-left: 10px;
-		margin-right: 10px;
-	}
-	${displayAvatarUrl
-		? css`
-				margin-top: 8px;
-			`
-		: ``}
-`;
-
-const avatarHeadlineWrapper = css`
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-`;
-
-// This styling taken from the similar approach in CommentLayout.tsx
-// If in mobile increase the margin top and margin right deficit
-const avatarPositionStyles = css`
-	display: flex;
-	justify-content: flex-end;
-	position: relative;
-	margin-bottom: -29px;
-	pointer-events: none;
-	${from.desktop} {
-		margin-top: -50px;
-	}
-	${until.tablet} {
-		overflow: hidden;
-	}
-
-	/*  Why target img element?
-
-        Because only in this context, where we have overflow: hidden
-        and the margin-bottom and margin-top of avatarPositionStyles
-        do we also want to apply our margin-right. These styles
-        are tightly coupled in this context, and so it does not
-        make sense to move them to the avatar component.
-
-        It's imperfect from the perspective of DCR, the alternative is to bust
-        the combined elements into a separate component (with the
-        relevant stories) and couple them that way, which might be what
-        you want to do if you find yourself adding more styles
-        to this section. For now, this works without making me 🤢.
-    */
-
-	${from.mobile} {
-		img {
-			margin-right: -1.85rem;
-		}
-	}
-	${from.mobileLandscape} {
-		img {
-			margin-right: -1.25rem;
-		}
-	}
-`;
-
-const LeftColLines = (displayAvatarUrl: boolean) => css`
-	margin-bottom: 4px;
-	${displayAvatarUrl
-		? css`
-				margin-top: -29px;
-			`
-		: ''}
-`;
-
-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 PictureLayout = (props: WebProps | AppsProps) => {
-	const { article, format, renderingTarget, serverTime } = props;
-
-	const {
-		config: { isPaidContent, host, hasSurveyAd },
-	} = article;
-
-	const isWeb = renderingTarget === 'Web';
-	const isApps = renderingTarget === 'Apps';
-
-	// 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;
-
-	const { branding } = article.commercialProperties[article.editionId];
-
-	const contributionsServiceUrl = getContributionsServiceUrl(article);
-
-	const renderAds = canRenderAds(article);
-
-	const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId);
-
-	const avatarUrl = getSoleContributor(
-		article.tags,
-		article.byline,
-	)?.bylineLargeImageUrl;
-
-	const displayAvatarUrl = avatarUrl ? true : false;
-
-	return (
-		<>
-			{isWeb && (
-				<div>
-					{renderAds && (
-						<Stuck>
-							<Section
-								fullWidth={true}
-								showTopBorder={false}
-								showSideBorders={false}
-								padSides={false}
-								shouldCenter={false}
-							>
-								<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={!isWorldCup2026}
-						showSlimNav={false}
-						hasPageSkin={false}
-						hasPageSkinContentSelfConstrain={false}
-						pageId={article.pageId}
-						tagIds={article.tags.map((tag) => tag.id)}
-						sectionId={article.config.section}
-						contentType={article.contentType}
-					/>
-				</div>
-			)}
-
-			{isWeb && renderAds && hasSurveyAd && (
-				<AdSlot position="survey" display={format.display} />
-			)}
-
-			<main
-				data-layout="PictureLayout"
-				id="maincontent"
-				lang={decideLanguage(article.lang)}
-				dir={decideLanguageDirection(article.isRightToLeftLang)}
-			>
-				{isApps && renderAds && (
-					<Island priority="critical">
-						<AdPortals />
-					</Island>
-				)}
-				<DirectoryPageNavIsland
-					pageTags={article.tags}
-					pageId={article.pageId}
-				/>
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					element="article"
-					borderColour={themePalette('--straight-lines')}
-				>
-					<PictureGrid>
-						<GridItem area="title" element="aside">
-							<ArticleTitle
-								format={format}
-								tags={article.tags}
-								sectionLabel={article.sectionLabel}
-								sectionUrl={article.sectionUrl}
-								guardianBaseURL={article.guardianBaseURL}
-							/>
-						</GridItem>
-						<GridItem area="border">
-							<Border />
-						</GridItem>
-
-						{displayAvatarUrl ? (
-							<GridItem area="headline">
-								<div css={avatarHeadlineWrapper}>
-									<div css={maxWidth}>
-										<ArticleHeadline
-											format={format}
-											headlineString={article.headline}
-											tags={article.tags}
-											byline={article.byline}
-											webPublicationDateDeprecated={
-												article.webPublicationDateDeprecated
-											}
-											hasAvatar={displayAvatarUrl}
-											starRating={article.starRating}
-										/>
-									</div>
-
-									<div>
-										{!!avatarUrl && (
-											<div css={avatarPositionStyles}>
-												<ContributorAvatar
-													imageSrc={avatarUrl}
-													imageAlt={
-														article.byline ?? ''
-													}
-												/>
-											</div>
-										)}
-										<StraightLines
-											count={8}
-											cssOverrides={css`
-												display: block;
-											`}
-											color={themePalette(
-												'--straight-lines',
-											)}
-										/>
-									</div>
-								</div>
-							</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="media">
-							<div css={mainMediaWrapper(displayAvatarUrl)}>
-								<MainMedia
-									format={format}
-									elements={article.mainMediaElements}
-									host={host}
-									pageId={article.pageId}
-									webTitle={article.webTitle}
-									ajaxUrl={article.config.ajaxUrl}
-									switches={article.config.switches}
-									isAdFreeUser={article.isAdFreeUser}
-									isSensitive={article.config.isSensitive}
-									editionId={article.editionId}
-									shouldHideAds={article.shouldHideAds}
-								/>
-							</div>
-						</GridItem>
-						<GridItem area="meta" element="aside">
-							<div
-								css={[
-									LeftColLines(displayAvatarUrl),
-									isApps && stretchLines,
-								]}
-							>
-								<StraightLines
-									count={displayAvatarUrl ? 8 : 4}
-									cssOverrides={css`
-										display: block;
-									`}
-									color={themePalette('--straight-lines')}
-								/>
-							</div>
-							<div>
-								{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="submeta">
-							<ArticleContainer format={format}>
-								<DecideLines
-									color={themePalette('--straight-lines')}
-									format={format}
-								/>
-								<SubMeta
-									format={format}
-									subMetaKeywordLinks={
-										article.subMetaKeywordLinks
-									}
-									subMetaSectionLinks={
-										article.subMetaSectionLinks
-									}
-									pageId={article.pageId}
-									webUrl={article.webURL}
-									webTitle={article.webTitle}
-									showBottomSocialButtons={
-										article.showBottomSocialButtons && isWeb
-									}
-								/>
-							</ArticleContainer>
-						</GridItem>
-					</PictureGrid>
-				</Section>
-
-				{isWeb && renderAds && (
-					<Section
-						fullWidth={true}
-						padSides={false}
-						showTopBorder={false}
-						showSideBorders={false}
-						backgroundColour={themePalette('--ad-background')}
-						element="aside"
-					>
-						<AdSlot
-							position="merchandising-high"
-							display={format.display}
-						/>
-					</Section>
-				)}
-
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						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>
-				)}
-
-				{isWeb && (
-					<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>
-						<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}
-								host={host}
-							/>
-						</Island>
-					</BannerWrapper>
-					{renderAds && (
-						<MobileStickyContainer data-print-layout="hide" />
-					)}
-				</>
-			)}
-			{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/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index cd5abdf5f3d..cb5aa7a660c 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -228,28 +228,32 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					</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>
+				{!(format.design === ArticleDesign.Picture && isApps) && (
+					<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}
diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
index 1dd6909df4c..d093d406940 100644
--- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
@@ -12,6 +12,7 @@ import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Caption } from '../components/Caption';
+import { ContributorAvatar } from '../components/ContributorAvatar';
 import { DecideLines } from '../components/DecideLines';
 import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island';
 import { GuardianLabsLines } from '../components/GuardianLabsLines';
@@ -31,6 +32,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getSoleContributor } from '../lib/byline';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideMainMediaCaption } from '../lib/decide-caption';
 import { getZIndex } from '../lib/getZIndex';
@@ -58,6 +60,50 @@ const stretchLines = css`
 	}
 `;
 
+const avatarHeadlineWrapper = css`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`;
+
+// This styling taken from the similar approach in CommentLayout.tsx
+// If in mobile increase the margin top and margin right deficit
+const avatarPositionStyles = css`
+	display: flex;
+	justify-content: flex-end;
+	position: relative;
+	margin-bottom: -29px;
+	pointer-events: none;
+	${from.desktop} {
+		margin-top: -50px;
+	}
+	${until.tablet} {
+		overflow: hidden;
+	}
+
+	/*  Why target img element?
+
+        Because only in this context, where we have overflow: hidden
+        and the margin-bottom and margin-top of avatarPositionStyles
+        do we also want to apply our margin-right. These styles
+        are tightly coupled in this context, and so it does not
+        make sense to move them to the avatar component.
+
+        It's imperfect from the perspective of DCR, the alternative is to bust
+        the combined elements into a separate component (with the
+        relevant stories) and couple them that way, which might be what
+        you want to do if you find yourself adding more styles
+        to this section. For now, this works without making me 🤢.
+    */
+
+	${from.mobile} {
+		img {
+			margin-right: -1.85rem;
+		}
+	}
+	${from.mobileLandscape} {
+		img {
+			margin-right: -1.25rem;
 const immersiveMediaBelowDesktop = (
 	headlineBackground: string,
 	isMainMediaImage: boolean,
@@ -173,6 +219,7 @@ export const StandardLayoutArticleGrid = ({
 	const isShowcase = format.display === ArticleDisplay.Showcase;
 	const isImmersive = format.display === ArticleDisplay.Immersive;
 	const isFeature = format.design === ArticleDesign.Feature;
+	const isPicture = format.design === ArticleDesign.Picture;
 	const headlineBackground = themePalette('--headline-background');
 
 	const isFootballMatchReport =
@@ -203,6 +250,7 @@ export const StandardLayoutArticleGrid = ({
 		isFeature,
 		orientation: mainMediaOrientation,
 		isMedia,
+		isPicture,
 		isShowcase,
 	});
 	const contentLayoutName = `${ArticleDisplay[format.display]}Layout`;
@@ -229,6 +277,22 @@ export const StandardLayoutArticleGrid = ({
 		article.webPublicationDateDeprecated,
 	);
 
+	const avatarUrl = getSoleContributor(
+		article.tags,
+		article.byline,
+	)?.bylineLargeImageUrl;
+
+	const displayAvatarUrl = avatarUrl ? true : false;
+
+	const pictureLeftColLines = (showingAvatar: boolean) => css`
+		margin-bottom: 4px;
+		${showingAvatar
+			? css`
+					margin-top: -29px;
+				`
+			: ''}
+	`;
+
 	return (
 		<article
 			css={[
@@ -285,7 +349,7 @@ export const StandardLayoutArticleGrid = ({
 			<GridItem
 				area="media"
 				layoutType={layoutType}
-				css={
+				css={[
 					isImmersive
 						? css`
 								${from.desktop} {
@@ -304,8 +368,13 @@ export const StandardLayoutArticleGrid = ({
 									isMainMediaImage,
 								)}
 							`
-						: undefined
-				}
+						: undefined,
+					displayAvatarUrl && isPicture
+						? css`
+								margin-top: ${space[2]}px;
+							`
+						: undefined,
+				]}
 			>
 				<div>
 					<MainMedia
@@ -356,6 +425,12 @@ export const StandardLayoutArticleGrid = ({
 								margin-bottom: 2px;
 							}
 						`,
+					isPicture &&
+						css`
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+						`,
 				]}
 			>
 				<ArticleTitle
@@ -401,17 +476,52 @@ export const StandardLayoutArticleGrid = ({
 						`,
 				]}
 			>
-				<ArticleHeadline
-					format={format}
-					layoutType={layoutType}
-					headlineString={article.headline}
-					tags={article.tags}
-					byline={article.byline}
-					webPublicationDateDeprecated={
-						article.webPublicationDateDeprecated
-					}
-					starRating={article.starRating}
-				/>
+				{displayAvatarUrl && isPicture ? (
+					<div css={avatarHeadlineWrapper}>
+						<ArticleHeadline
+							format={format}
+							layoutType={layoutType}
+							headlineString={article.headline}
+							tags={article.tags}
+							byline={article.byline}
+							webPublicationDateDeprecated={
+								article.webPublicationDateDeprecated
+							}
+							hasAvatar={true}
+							starRating={article.starRating}
+						/>
+
+						{!!avatarUrl && isPicture && (
+							<>
+								<div css={avatarPositionStyles}>
+									<ContributorAvatar
+										imageSrc={avatarUrl}
+										imageAlt={article.byline ?? ''}
+									/>
+								</div>
+								<StraightLines
+									count={8}
+									cssOverrides={css`
+										display: block;
+									`}
+									color={themePalette('--straight-lines')}
+								/>
+							</>
+						)}
+					</div>
+				) : (
+					<ArticleHeadline
+						format={format}
+						layoutType={layoutType}
+						headlineString={article.headline}
+						tags={article.tags}
+						byline={article.byline}
+						webPublicationDateDeprecated={
+							article.webPublicationDateDeprecated
+						}
+						starRating={article.starRating}
+					/>
+				)}
 			</GridItem>
 			<GridItem
 				area="standfirst"
@@ -482,7 +592,13 @@ export const StandardLayoutArticleGrid = ({
 				{format.display !== ArticleDisplay.Immersive &&
 					format.design !== ArticleDesign.Audio &&
 					layoutType !== 'immersivePortraitDefault' && (
-						<div css={stretchLines}>
+						<div
+							css={[
+								isPicture &&
+									pictureLeftColLines(displayAvatarUrl),
+								stretchLines,
+							]}
+						>
 							{isWeb &&
 							format.theme === ArticleSpecial.Labs &&
 							format.design !== ArticleDesign.Video ? (
@@ -491,6 +607,9 @@ export const StandardLayoutArticleGrid = ({
 								<DecideLines
 									format={format}
 									color={themePalette('--article-border')}
+									displayingAvatar={
+										displayAvatarUrl && isPicture
+									}
 								/>
 							)}
 						</div>
@@ -697,30 +816,32 @@ export const StandardLayoutArticleGrid = ({
 					}
 				`}
 			>
-				<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
-							}
-							shouldHideMostViewed={
-								format.design === ArticleDesign.Audio
-							}
-						/>
-					</Island>
-				</Hide>
+				{!isPicture && (
+					<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
+								}
+								shouldHideMostViewed={
+									format.design === ArticleDesign.Audio
+								}
+							/>
+						</Island>
+					</Hide>
+				)}
 			</GridItem>
 		</article>
 	);
diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts
index 25481511bb6..a40b8a5a5ec 100644
--- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts
+++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts
@@ -6,6 +6,7 @@ export type LayoutType =
 	| 'standard'
 	| 'showcase'
 	| 'media'
+	| 'picture'
 	| 'immersiveLandscapeDefault'
 	| 'immersiveLandscapeFeature'
 	| 'immersivePortraitDefault'
@@ -165,6 +166,42 @@ const mediaCss: LayoutCssMap = {
 	},
 };
 
+const pictureCss: LayoutCssMap = {
+	title: {
+		mobile: 'grid-row: 1;',
+		tablet: 'grid-row: 1;',
+		leftCol: grid.column.left,
+	},
+	headline: {
+		mobile: 'grid-row: 2;',
+		tablet: 'grid-row: 2;',
+		desktop: grid.between('centre-column-start', 'right-column-end'),
+		leftCol: 'grid-row: 1;',
+	},
+	standfirst: {
+		mobile: 'grid-row: 4;',
+		tablet: 'grid-row: 4;',
+		leftCol: 'grid-row: 2;',
+	},
+	media: {
+		mobile: 'grid-row: 5;',
+		tablet: 'grid-row: 5;',
+		desktop: grid.between('centre-column-start', 'right-column-end'),
+		leftCol: `grid-row: 3;`,
+	},
+	meta: {
+		mobile: 'grid-row: 3;',
+		tablet: 'grid-row: 3;',
+		desktop: grid.between('centre-column-start', 'right-column-end'),
+		leftCol: `grid-row: 3 / span 2; ${grid.column.left};`,
+	},
+	body: {
+		tablet: 'grid-row: 6;',
+		desktop: grid.between('centre-column-start', 'right-column-end'),
+		leftCol: `grid-row: 5;`,
+	},
+};
+
 const immersivePortraitDefaultCss: LayoutCssMap = {
 	title: {
 		belowDesktop: `${grid.column.all} grid-row: 2;`,
@@ -328,6 +365,7 @@ const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
 	standard: standardCss,
 	showcase: showcaseCss,
 	media: mediaCss,
+	picture: pictureCss,
 	immersiveLandscapeDefault: immersiveLandscapeDefaultCss,
 	immersiveLandscapeFeature: immersiveLandscapeFeatureCss,
 	immersivePortraitDefault: immersivePortraitDefaultCss,
@@ -383,12 +421,14 @@ export const getLayoutType = ({
 	isFeature,
 	orientation,
 	isMedia,
+	isPicture,
 	isShowcase,
 }: {
 	isImmersive: boolean;
 	isFeature: boolean;
 	orientation: 'portrait' | 'landscape' | 'square';
 	isMedia: boolean;
+	isPicture: boolean;
 	isShowcase: boolean;
 }): LayoutType => {
 	if (isImmersive) {
@@ -403,6 +443,7 @@ export const getLayoutType = ({
 			: 'immersiveLandscapeDefault';
 	}
 	if (isMedia) return 'media';
+	if (isPicture) return 'picture';
 	if (isShowcase) return 'showcase';
 	return 'standard';
 };