diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx
index a5ede6a2323..89041c1a0e3 100644
--- a/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx
+++ b/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx
@@ -39,3 +39,25 @@ export const Default = meta.story({
 		children: <></>,
 	},
 });
+
+/**
+ * Demonstrates a longer frequency string in a narrow container, to show that
+ * the text breaks after the "|" divider rather than wrapping mid-word.
+ */
+export const LongFrequencyNarrow = meta.story({
+	args: {
+		name: 'Breaking News US',
+		description: 'Get the most important news as it breaks.',
+		frequency: 'Around 2-3 times a day',
+		illustrationSquare:
+			'https://media.guim.co.uk/10b4e02333ee97ecf51d5e814fd324a88832fb17/1177_0_2998_3000/2998.jpg',
+		children: <></>,
+	},
+	decorators: [
+		(Story) => (
+			<div css={{ maxWidth: 300 }}>
+				<Story />
+			</div>
+		),
+	],
+});
diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.tsx
index ca3a3d18f48..acd915bcf95 100644
--- a/dotcom-rendering/src/components/NewsletterSignupCard.tsx
+++ b/dotcom-rendering/src/components/NewsletterSignupCard.tsx
@@ -4,7 +4,7 @@ import {
 	headlineMedium20,
 	space,
 	textSans14,
-	textSans15,
+	textSansBold15,
 } from '@guardian/source/foundations';
 import { SvgNewsletterFilled } from '@guardian/source/react-components';
 import { palette as themePalette } from '../palette';
@@ -22,7 +22,7 @@ export type NewsletterSignupCardProps = {
 const containerStyles = css`
 	clear: left;
 	background-color: ${themePalette('--newsletter-card-background')};
-	padding: ${space[3]}px ${space[3]}px ${space[4]}px ${space[3]}px;
+	padding: ${space[2]}px ${space[3]}px ${space[4]}px ${space[3]}px;
 `;
 
 const dividerStyles = css`
@@ -55,34 +55,64 @@ const titleStyles = css`
 const frequencyTagStyles = css`
 	display: flex;
 	align-items: center;
+	gap: 6px;
 	color: ${themePalette('--newsletter-card-frequency-tag')};
-	${textSans15};
-	margin-left: -1px;
-	margin-top: -1px;
-	margin-bottom: ${space[1]}px;
+	${textSansBold15};
+	margin-bottom: ${space[2]}px;
+`;
+
+const frequencyTextStyles = css`
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: ${space[1]}px;
+`;
+
+const frequencyLabelStyles = css`
+	white-space: nowrap;
+`;
+
+const badgeStyles = css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background-color: ${themePalette('--newsletter-card-badge-background')};
 
 	svg {
-		fill: currentColor;
-		height: 20px;
-		width: 20px;
+		fill: ${themePalette('--newsletter-card-badge-icon')};
+		height: 18px;
+		width: 18px;
 	}
 `;
 
+const innerDividerStyles = css`
+	border: none;
+	border-top: 1px solid ${themePalette('--newsletter-card-divider')};
+	margin: 0 -${space[3]}px ${space[2]}px;
+`;
+
 const descriptionStyles = css`
 	${textSans14};
 	line-height: 1.15;
-	margin-bottom: ${space[2]}px;
 	clear: both;
 	color: ${themePalette('--newsletter-card-description')};
 `;
 
 const illustrationStyles = css`
 	flex-shrink: 0;
-	width: 90px;
-	height: 90px;
+	width: 70px;
+	height: 70px;
 	border-radius: 50%;
 	object-fit: cover;
 
+	${from.mobileMedium} {
+		width: 90px;
+		height: 90px;
+	}
+
 	${from.tablet} {
 		width: 100px;
 		height: 100px;
@@ -92,27 +122,35 @@ const illustrationStyles = css`
 const NewsletterSignupHeader = (
 	props: Omit<NewsletterSignupCardProps, 'children'>,
 ) => (
-	<div css={headerStyles}>
-		<div css={titleAndMetaStyles}>
-			<div css={frequencyTagStyles}>
+	<>
+		<div css={frequencyTagStyles}>
+			<span css={badgeStyles}>
 				<SvgNewsletterFilled />
-				Free newsletter | {props.frequency}
+			</span>
+			<span css={frequencyTextStyles}>
+				<span css={frequencyLabelStyles}>Free newsletter |</span>
+				<span css={frequencyLabelStyles}>{props.frequency}</span>
+			</span>
+		</div>
+		<hr css={innerDividerStyles} />
+		<div css={headerStyles}>
+			<div css={titleAndMetaStyles}>
+				<p css={titleStyles}>
+					Sign up to <span>{props.name}</span>
+				</p>
+				<p css={descriptionStyles}>{props.description}</p>
 			</div>
-			<p css={titleStyles}>
-				Sign up to <span>{props.name}</span>
-			</p>
-			<p css={descriptionStyles}>{props.description}</p>
+			{!!props.illustrationSquare && (
+				<img
+					css={illustrationStyles}
+					src={props.illustrationSquare}
+					alt=""
+					loading="lazy"
+					decoding="async"
+				/>
+			)}
 		</div>
-		{!!props.illustrationSquare && (
-			<img
-				css={illustrationStyles}
-				src={props.illustrationSquare}
-				alt=""
-				loading="lazy"
-				decoding="async"
-			/>
-		)}
-	</div>
+	</>
 );
 
 export const NewsletterSignupCard = ({
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 2b509736dd3..39fde52f903 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7969,6 +7969,14 @@ const paletteColours = {
 		light: () => '#F3F7FF',
 		dark: () => sourcePalette.brand[100],
 	},
+	'--newsletter-card-badge-background': {
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.brand[600],
+	},
+	'--newsletter-card-badge-icon': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[100],
+	},
 	'--newsletter-card-description': {
 		light: () => sourcePalette.neutral[20],
 		dark: () => sourcePalette.neutral[86],
@@ -7978,8 +7986,8 @@ const paletteColours = {
 		dark: () => sourcePalette.neutral[46],
 	},
 	'--newsletter-card-frequency-tag': {
-		light: () => sourcePalette.neutral[38],
-		dark: () => sourcePalette.neutral[73],
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.neutral[100],
 	},
 	'--newsletter-card-title': {
 		light: () => sourcePalette.neutral[7],