diff --git a/package.json b/package.json
index c0a7e716..8109fe36 100644
--- a/package.json
+++ b/package.json
@@ -28,14 +28,13 @@
     "timeago.js": "^4.0.2"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.28",
+    "@emotion/react": "^11.1.5",
     "@guardian/src-button": "^3.3.0",
     "@guardian/src-foundations": "^3.3.0",
     "@guardian/src-icons": "^3.3.0",
     "@guardian/src-link": "^3.3.0",
     "@guardian/src-text-input": "^3.3.0",
     "@guardian/types": "^3.0.0",
-    "emotion": "^10.0.27",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "typescript": "^4.1.3"
@@ -68,7 +67,6 @@
     "@types/react-dom": "^17.0.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-const-enum": "^1.0.1",
-    "emotion": "^10.0.27",
     "eslint-plugin-react-hooks": "^4.0.4",
     "fetch-mock": "^9.3.1",
     "husky": "^4.2.3",
diff --git a/src/App.stories.tsx b/src/App.stories.tsx
index e80a908b..9587627d 100644
--- a/src/App.stories.tsx
+++ b/src/App.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { App } from './App';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { Pillar } from '@guardian/types';
 
@@ -25,7 +25,7 @@ const aUser: UserProfile = {
 
 export const LoggedOutHiddenPicks = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -51,7 +51,7 @@ LoggedOutHiddenPicks.story = {
 
 export const InitialPage = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -76,7 +76,7 @@ InitialPage.story = { name: 'with initial page set to 3' };
 
 export const Overrides = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -103,7 +103,7 @@ Overrides.story = { name: 'with page size overridden to 50' };
 
 export const LoggedInHiddenNoPicks = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -130,7 +130,7 @@ LoggedInHiddenNoPicks.story = {
 
 export const LoggedOutHiddenNoPicks = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -156,7 +156,7 @@ LoggedOutHiddenNoPicks.story = {
 
 export const Closed = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -181,7 +181,7 @@ Closed.story = { name: 'Logged in but closed for comments' };
 
 export const NoComments = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
@@ -207,7 +207,7 @@ NoComments.story = {
 
 export const LegacyDiscussion = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 620px;
 		`}
diff --git a/src/App.tsx b/src/App.tsx
index 03475c59..7c8ee50c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { neutral } from '@guardian/src-foundations/palette';
 import { textSans } from '@guardian/src-foundations/typography';
@@ -83,7 +83,7 @@ const DEFAULT_FILTERS: FilterOptions = {
 
 const NoComments = () => (
 	<div
-		className={css`
+		css={css`
 			color: ${neutral[46]};
 			${textSans.small()}
 			padding-top: ${space[5]}px;
@@ -373,7 +373,7 @@ export const App = ({
 
 	if (!isExpanded) {
 		return (
-			<div className={commentContainerStyles} data-component="discussion">
+			<div css={commentContainerStyles} data-component="discussion">
 				{user && !isClosedForComments && (
 					<CommentForm
 						pillar={pillar}
@@ -386,7 +386,7 @@ export const App = ({
 					/>
 				)}
 				{picks && picks.length ? (
-					<div className={picksWrapper}>
+					<div css={picksWrapper}>
 						{!!picks.length && (
 							<TopPicks
 								pillar={pillar}
@@ -422,7 +422,7 @@ export const App = ({
 						) : !comments.length ? (
 							<NoComments />
 						) : (
-							<ul className={commentContainerStyles}>
+							<ul css={commentContainerStyles}>
 								{comments.slice(0, 2).map((comment) => (
 									<li key={comment.id}>
 										<CommentContainer
@@ -447,7 +447,7 @@ export const App = ({
 				)}
 				{commentCount > 2 && (
 					<div
-						className={css`
+						css={css`
 							width: 250px;
 						`}
 					>
@@ -468,7 +468,7 @@ export const App = ({
 	}
 
 	return (
-		<div data-component="discussion" className={commentColumnWrapperStyles}>
+		<div data-component="discussion" css={commentColumnWrapperStyles}>
 			{user && !isClosedForComments && (
 				<CommentForm
 					pillar={pillar}
@@ -512,7 +512,7 @@ export const App = ({
 			) : !comments.length ? (
 				<NoComments />
 			) : (
-				<ul className={commentContainerStyles}>
+				<ul css={commentContainerStyles}>
 					{comments.map((comment) => (
 						<li key={comment.id}>
 							<CommentContainer
@@ -536,7 +536,7 @@ export const App = ({
 				</ul>
 			)}
 			{showPagination && (
-				<footer className={footerStyles}>
+				<footer css={footerStyles}>
 					<Pagination
 						totalPages={totalPages}
 						currentPage={page}
diff --git a/src/components/AbuseReportForm/AbuseReportForm.stories.tsx b/src/components/AbuseReportForm/AbuseReportForm.stories.tsx
index 5f852676..ac3993cb 100644
--- a/src/components/AbuseReportForm/AbuseReportForm.stories.tsx
+++ b/src/components/AbuseReportForm/AbuseReportForm.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { Pillar } from '@guardian/types';
 
@@ -16,7 +16,7 @@ const wrapperStyles = css`
 `;
 
 export const Dialog = () => (
-	<div className={wrapperStyles}>
+	<div css={wrapperStyles}>
 		<AbuseReportForm
 			toggleSetShowForm={() => {}}
 			pillar={Pillar.Sport}
diff --git a/src/components/AbuseReportForm/AbuseReportForm.tsx b/src/components/AbuseReportForm/AbuseReportForm.tsx
index fb0e70d3..a871c24d 100644
--- a/src/components/AbuseReportForm/AbuseReportForm.tsx
+++ b/src/components/AbuseReportForm/AbuseReportForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { palette } from '@guardian/src-foundations';
 import { textSans } from '@guardian/src-foundations/typography';
@@ -167,9 +167,9 @@ export const AbuseReportForm: React.FC<{
 	const labelStylesClass = labelStyles(pillar);
 	return (
 		<div aria-modal="true" ref={modalRef}>
-			<form className={formWrapper} onSubmit={onSubmit}>
-				<div className={inputWrapper}>
-					<label className={labelStylesClass} htmlFor="category">
+			<form css={formWrapper} onSubmit={onSubmit}>
+				<div css={inputWrapper}>
+					<label css={labelStylesClass} htmlFor="category">
 						Category
 					</label>
 					<select
@@ -197,12 +197,12 @@ export const AbuseReportForm: React.FC<{
 						<option value="9">Other</option>
 					</select>
 					{errors.categoryId && (
-						<span className={errorMessageStyles}>{errors.categoryId}</span>
+						<span css={errorMessageStyles}>{errors.categoryId}</span>
 					)}
 				</div>
 
-				<div className={inputWrapper}>
-					<label className={labelStylesClass} htmlFor="reason">
+				<div css={inputWrapper}>
+					<label css={labelStylesClass} htmlFor="reason">
 						Reason (optional)
 					</label>
 					<textarea
@@ -217,12 +217,12 @@ export const AbuseReportForm: React.FC<{
 						value={formVariables.reason}
 					></textarea>
 					{errors.reason && (
-						<span className={errorMessageStyles}>{errors.reason}</span>
+						<span css={errorMessageStyles}>{errors.reason}</span>
 					)}
 				</div>
 
-				<div className={inputWrapper}>
-					<label className={labelStylesClass} htmlFor="email">
+				<div css={inputWrapper}>
+					<label css={labelStylesClass} htmlFor="email">
 						Email (optional)
 					</label>
 					<input
@@ -237,9 +237,7 @@ export const AbuseReportForm: React.FC<{
 						}
 						value={formVariables.email}
 					></input>
-					{errors.email && (
-						<span className={errorMessageStyles}>{errors.email}</span>
-					)}
+					{errors.email && <span css={errorMessageStyles}>{errors.email}</span>}
 				</div>
 
 				<div>
@@ -249,12 +247,12 @@ export const AbuseReportForm: React.FC<{
 
 					{errors.response && (
 						<span
-							className={cx(
+							css={[
 								errorMessageStyles,
 								css`
 									margin-left: 1em;
 								`,
-							)}
+							]}
 						>
 							{errors.response}
 						</span>
@@ -262,7 +260,7 @@ export const AbuseReportForm: React.FC<{
 
 					{successMessage && (
 						<span
-							className={css`
+							css={css`
 								color: green;
 								margin-left: 1em;
 							`}
@@ -272,7 +270,7 @@ export const AbuseReportForm: React.FC<{
 					)}
 				</div>
 				<div
-					className={css`
+					css={css`
 						position: absolute;
 						right: ${space[3]}px;
 						top: ${space[3]}px;
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 3a558440..f28d29be 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 type Props = {
 	imageUrl?: string;
@@ -20,17 +20,11 @@ export const Avatar = ({
 }: Props) => {
 	switch (size) {
 		case 'small':
-			return (
-				<img src={imageUrl} alt={displayName} className={imageStyles(36)} />
-			);
+			return <img src={imageUrl} alt={displayName} css={imageStyles(36)} />;
 		case 'large':
-			return (
-				<img src={imageUrl} alt={displayName} className={imageStyles(60)} />
-			);
+			return <img src={imageUrl} alt={displayName} css={imageStyles(60)} />;
 		case 'medium':
 		default:
-			return (
-				<img src={imageUrl} alt={displayName} className={imageStyles(48)} />
-			);
+			return <img src={imageUrl} alt={displayName} css={imageStyles(48)} />;
 	}
 };
diff --git a/src/components/Badges/Badges.tsx b/src/components/Badges/Badges.tsx
index 377a5752..8790414b 100644
--- a/src/components/Badges/Badges.tsx
+++ b/src/components/Badges/Badges.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space, neutral, brand } from '@guardian/src-foundations';
 import { textSans } from '@guardian/src-foundations/typography';
@@ -35,12 +35,12 @@ const guardianPickLabel = css`
 `;
 
 export const GuardianStaff = () => (
-	<div className={staffBadge}>
+	<div css={staffBadge}>
 		<svg
 			width="36"
 			height="36"
 			viewBox="0 0 36 36"
-			className={cx(iconStyles, staffIcon)}
+			css={[iconStyles, staffIcon]}
 		>
 			<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
 			<path
@@ -48,19 +48,19 @@ export const GuardianStaff = () => (
 				d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
 			></path>
 		</svg>
-		<p className={cx(labelText, staffLabel)}>Staff</p>
+		<p css={[labelText, staffLabel]}>Staff</p>
 	</div>
 );
 
 export const GuardianPick = () => (
-	<div className={staffBadge}>
-		<svg width="36" height="36" viewBox="0 0 36 36" className={iconStyles}>
+	<div css={staffBadge}>
+		<svg width="36" height="36" viewBox="0 0 36 36" css={iconStyles}>
 			<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
 			<path
 				fill={neutral[100]}
 				d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
 			></path>
 		</svg>
-		<p className={cx(labelText, guardianPickLabel)}>Guardian Pick</p>
+		<p css={[labelText, guardianPickLabel]}>Guardian Pick</p>
 	</div>
 );
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index 514bfd0a..9b712389 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 type Props = { children: JSX.Element | JSX.Element[] };
 
 export const Column = ({ children }: Props) => (
 	<div
-		className={css`
+		css={css`
 			display: flex;
 			flex-direction: column;
 		`}
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 12656498..007b91cc 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space, palette, remSpace } from '@guardian/src-foundations';
 import { from, until } from '@guardian/src-foundations/mq';
@@ -281,7 +281,7 @@ const cssReplyBetaDisplayName = css`
 
 const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 	<div
-		className={css`
+		css={css`
 			width: ${space[amount]}px;
 		`}
 	/>
@@ -338,7 +338,7 @@ export const Comment = ({
 		<>
 			{error && (
 				<span
-					className={css`
+					css={css`
 						color: red;
 					`}
 				>
@@ -348,9 +348,9 @@ export const Comment = ({
 			<div
 				id={`comment-${comment.id}`}
 				data-testid={comment.id}
-				className={cx(commentWrapper, wasScrolledTo && selectedStyles)}
+				css={[commentWrapper, wasScrolledTo && selectedStyles]}
 			>
-				<div className={cx(avatarMargin)}>
+				<div css={avatarMargin}>
 					<Avatar
 						imageUrl={comment.userProfile.avatar}
 						displayName={comment.userProfile.displayName}
@@ -358,19 +358,19 @@ export const Comment = ({
 					/>
 				</div>
 
-				<div className={commentDetails}>
-					<header className={headerStyles}>
-						<div className={cssReplyToWrapper}>
+				<div css={commentDetails}>
+					<header css={headerStyles}>
+						<div css={cssReplyToWrapper}>
 							<Column>
 								<div
-									className={cx(
+									css={[
 										comment.responseTo && hideBelowMobileLandscape,
 										hideAboveMobileLandscape,
-									)}
+									]}
 								>
 									<Row>
 										<div
-											className={css`
+											css={css`
 												margin-right: ${space[2]}px;
 											`}
 										>
@@ -382,11 +382,7 @@ export const Comment = ({
 										</div>
 										<Column>
 											<div
-												className={cx(
-													colourStyles(pillar),
-													boldFont,
-													negativeMargin,
-												)}
+												css={[colourStyles(pillar), boldFont, negativeMargin]}
 											>
 												<Link
 													href={comment.userProfile.webUrl}
@@ -405,18 +401,14 @@ export const Comment = ({
 										</Column>
 									</Row>
 								</div>
-								<div
-									className={cx(
-										!comment.responseTo && hideBelowMobileLandscape,
-									)}
-								>
+								<div css={[!comment.responseTo && hideBelowMobileLandscape]}>
 									<Row>
 										<div
-											className={cx(
+											css={[
 												colourStyles(pillar),
 												boldFont,
 												cssReplyAlphaDisplayName,
-											)}
+											]}
 										>
 											<Link
 												href={comment.userProfile.webUrl}
@@ -428,12 +420,12 @@ export const Comment = ({
 										</div>
 										{comment.responseTo ? (
 											<div
-												className={cx(
+												css={[
 													colourStyles(pillar),
 													regularFont,
 													svgReplyArrow,
 													cssReplyBetaDisplayName,
-												)}
+												]}
 											>
 												<Link
 													href={`#comment-${comment.responseTo.commentId}`}
@@ -449,10 +441,10 @@ export const Comment = ({
 											<></>
 										)}
 										<div
-											className={cx(
+											css={[
 												timestampWrapperStyles,
 												comment.responseTo && hideBelowMobileLandscape,
-											)}
+											]}
 										>
 											<Timestamp
 												isoDateTime={comment.isoDateTime}
@@ -464,14 +456,14 @@ export const Comment = ({
 									</Row>
 									<Row>
 										{showStaffbadge ? (
-											<div className={iconWrapper}>
+											<div css={iconWrapper}>
 												<GuardianStaff />
 											</div>
 										) : (
 											<></>
 										)}
 										{showPickBadge ? (
-											<div className={iconWrapper}>
+											<div css={iconWrapper}>
 												<GuardianPick />
 											</div>
 										) : (
@@ -496,21 +488,21 @@ export const Comment = ({
 					</header>
 
 					<div
-						className={cx(
+						css={[
 							comment.responseTo && hideBelowMobileLandscape,
 							hideAboveMobileLandscape,
-						)}
+						]}
 					>
 						<Row>
 							{showStaffbadge ? (
-								<div className={iconWrapper}>
+								<div css={iconWrapper}>
 									<GuardianStaff />
 								</div>
 							) : (
 								<></>
 							)}
 							{showPickBadge ? (
-								<div className={iconWrapper}>
+								<div css={iconWrapper}>
 									<GuardianPick />
 								</div>
 							) : (
@@ -521,19 +513,19 @@ export const Comment = ({
 
 					{/* MUTED */}
 					{isMuted && (
-						<p className={blockedCommentStyles}>
+						<p css={blockedCommentStyles}>
 							<Row>
 								<>All posts from this user have been muted on this device.</>
 								<Space amount={1} />
 								<div
-									className={cx(
+									css={[
 										buttonLinkBaseStyles,
 										css`
 											button {
 												${textSans.xxsmall({ fontWeight: 'bold' })}
 											}
 										`,
-									)}
+									]}
 								>
 									<Button
 										priority="subdued"
@@ -551,7 +543,7 @@ export const Comment = ({
 					{/* BLOCKED */}
 					{!isMuted && comment.status === 'blocked' && (
 						<p
-							className={cx(blockedCommentStyles, commentLinkStyling)}
+							css={[blockedCommentStyles, commentLinkStyling]}
 							dangerouslySetInnerHTML={{ __html: comment.body }}
 						/>
 					)}
@@ -560,12 +552,12 @@ export const Comment = ({
 					{!isMuted && comment.status !== 'blocked' && (
 						<>
 							<div
-								className={cx(commentCss, commentLinkStyling)}
+								css={[commentCss, commentLinkStyling]}
 								dangerouslySetInnerHTML={{
 									__html: comment.body,
 								}}
 							/>
-							<div className={spaceBetween}>
+							<div css={spaceBetween}>
 								<Row>
 									{/* When commenting is closed, no reply link shows at all */}
 									{!isClosedForComments && (
@@ -573,7 +565,7 @@ export const Comment = ({
 											{/* If user is not logged in we link to the login page */}
 											{user ? (
 												<div
-													className={cx(
+													css={[
 														svgReplyArrow,
 														buttonLinkPillarBaseStyles(pillar),
 														css`
@@ -581,7 +573,7 @@ export const Comment = ({
 																${textSans.small({ fontWeight: 'bold' })}
 															}
 														`,
-													)}
+													]}
 												>
 													<Button
 														priority="subdued"
@@ -594,12 +586,7 @@ export const Comment = ({
 													</Button>
 												</div>
 											) : (
-												<div
-													className={cx(
-														svgReplyArrow,
-														commentControlsLink(pillar),
-													)}
-												>
+												<div css={[svgReplyArrow, commentControlsLink(pillar)]}>
 													<Link
 														href={`https://profile.theguardian.com/signin?returnUrl=${
 															comment.webUrl
@@ -625,14 +612,14 @@ export const Comment = ({
 										user.badge.some((e) => e.name === 'Staff') &&
 										user.userId !== comment.userProfile.userId && (
 											<div
-												className={cx(
+												css={[
 													buttonLinkPillarBaseStyles(pillar),
 													css`
 														button {
 															${textSans.small({ fontWeight: 'bold' })}
 														}
 													`,
-												)}
+												]}
 											>
 												<Button
 													priority="subdued"
@@ -650,14 +637,14 @@ export const Comment = ({
 									{/* You can't mute unless logged in and you can't yourself */}
 									{user && comment.userProfile.userId !== user.userId ? (
 										<div
-											className={cx(
+											css={[
 												buttonLinkBaseStyles,
 												css`
 													button {
 														${textSans.xxsmall()}
 													}
 												`,
-											)}
+											]}
 										>
 											<Button
 												priority="subdued"
@@ -675,14 +662,14 @@ export const Comment = ({
 									)}
 									<Space amount={4} />
 									<div
-										className={cx(
+										css={[
 											buttonLinkBaseStyles,
 											css`
 												button {
 													${textSans.xxsmall()}
 												}
 											`,
-										)}
+										]}
 									>
 										<Button
 											priority="subdued"
@@ -695,7 +682,7 @@ export const Comment = ({
 									</div>
 									{showAbuseReportForm && (
 										<div
-											className={css`
+											css={css`
 												position: relative;
 											`}
 										>
diff --git a/src/components/CommentContainer/CommentContainer.tsx b/src/components/CommentContainer/CommentContainer.tsx
index b108dd6b..c0e8656b 100644
--- a/src/components/CommentContainer/CommentContainer.tsx
+++ b/src/components/CommentContainer/CommentContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space, neutral, border } from '@guardian/src-foundations';
 import { SvgPlus } from '@guardian/src-icons';
@@ -69,7 +69,7 @@ const removeMargin = css`
 	margin: 0px;
 `;
 
-export const avatar = (avatarSize: number): string => css`
+export const avatar = (avatarSize: number) => css`
 	border-radius: ${avatarSize + 10}px;
 	width: ${avatarSize}px;
 	height: ${avatarSize}px;
@@ -126,7 +126,7 @@ export const CommentContainer = ({
 	};
 
 	return (
-		<div className={cx(commentToScrollTo === comment.id && selectedStyles)}>
+		<div css={[commentToScrollTo === comment.id && selectedStyles]}>
 			<Comment
 				comment={comment}
 				pillar={pillar}
@@ -142,8 +142,8 @@ export const CommentContainer = ({
 
 			<>
 				{showResponses && responses && (
-					<div className={nestingStyles}>
-						<ul className={cx(commentContainerStyles, removeMargin)}>
+					<div css={nestingStyles}>
+						<ul css={[commentContainerStyles, removeMargin]}>
 							{responses.map((responseComment) => (
 								<li key={responseComment.id}>
 									<Comment
@@ -166,13 +166,13 @@ export const CommentContainer = ({
 							comment.metaData.responseCount &&
 							comment.metaData.responseCount > 3 && (
 								<div
-									className={cx(
+									css={[
 										topBorder,
 										css`
 											padding-top: ${space[3]}px;
 											padding-bottom: ${space[3]}px;
 										`,
-									)}
+									]}
 								>
 									<PillarButton
 										priority="secondary"
@@ -198,7 +198,7 @@ export const CommentContainer = ({
 					user && (
 						<div
 							id={`comment-reply-form-${commentBeingRepliedTo.id}`}
-							className={nestingStyles}
+							css={nestingStyles}
 						>
 							<CommentReplyPreview
 								pillar={pillar}
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index d6413ff3..ae7d3ef1 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { palette, space } from '@guardian/src-foundations';
 import { neutral, text } from '@guardian/src-foundations/palette';
@@ -147,7 +147,7 @@ const bottomContainer = css`
 
 const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 	<div
-		className={css`
+		css={css`
 			width: ${space[amount]}px;
 		`}
 	/>
@@ -370,34 +370,34 @@ export const CommentForm = ({
 	return (
 		<>
 			<form
-				className={formWrapper}
+				css={formWrapper}
 				onSubmit={(e) => {
 					e.preventDefault();
 					submitForm();
 				}}
 			>
 				{error && (
-					<div className={msgContainerStyles}>
+					<div css={msgContainerStyles}>
 						<p
-							className={cx(errorTextStyles, linkStyles)}
+							css={[errorTextStyles, linkStyles]}
 							dangerouslySetInnerHTML={{ __html: error }}
 						/>
 					</div>
 				)}
 				{info && (
-					<div className={msgContainerStyles}>
-						<p className={cx(infoTextStyles, linkStyles)}>{info}</p>
+					<div css={msgContainerStyles}>
+						<p css={[infoTextStyles, linkStyles]}>{info}</p>
 					</div>
 				)}
 				{isActive && (
-					<div className={wrapperHeaderTextStyles}>
-						<p className={cx(headerTextStyles, linkStyles)}>
+					<div css={wrapperHeaderTextStyles}>
+						<p css={[headerTextStyles, linkStyles]}>
 							Please keep comments respectful and abide by the{' '}
 							<a href="/community-standards">community guidelines</a>.
 						</p>
 
 						{user.privateFields && user.privateFields.isPremoderated && (
-							<p className={cx(errorTextStyles, linkStyles)}>
+							<p css={[errorTextStyles, linkStyles]}>
 								Your comments are currently being pre-moderated (
 								<a href="/community-faqs#311" target="_blank" rel="nofollow">
 									why?
@@ -412,11 +412,11 @@ export const CommentForm = ({
 					placeholder={
 						commentBeingRepliedTo || !isActive ? 'Join the discussion' : ''
 					}
-					className={cx(
+					css={[
 						commentTextArea,
 						commentBeingRepliedTo && isActive && greyPlaceholder,
 						!commentBeingRepliedTo && !isActive && blackPlaceholder,
-					)}
+					]}
 					ref={textAreaRef}
 					style={{ height: isActive ? '132px' : '50px' }}
 					onChange={(e) => {
@@ -425,7 +425,7 @@ export const CommentForm = ({
 					value={body}
 					onFocus={() => setIsActive(true)}
 				/>
-				<div className={bottomContainer}>
+				<div css={bottomContainer}>
 					<Row>
 						<>
 							<PillarButton
@@ -470,7 +470,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformText(boldString);
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-bold"
 							>
 								B
@@ -480,7 +480,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformText(italicsString);
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-italic"
 							>
 								i
@@ -490,7 +490,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformText(strikethroughString);
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-strikethrough"
 							>
 								{`S̶`}
@@ -500,7 +500,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformText(codeString);
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-code"
 							>
 								{`<>`}
@@ -510,7 +510,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformText(quoteString);
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-quote"
 							>
 								"
@@ -520,7 +520,7 @@ export const CommentForm = ({
 									e.preventDefault();
 									transformLink();
 								}}
-								className={commentAddOns}
+								css={commentAddOns}
 								data-link-name="formatting-controls-link"
 							>
 								Link
diff --git a/src/components/CommentReplyPreview/CommentReplyPreview.stories.tsx b/src/components/CommentReplyPreview/CommentReplyPreview.stories.tsx
index f93b2297..6064470f 100644
--- a/src/components/CommentReplyPreview/CommentReplyPreview.stories.tsx
+++ b/src/components/CommentReplyPreview/CommentReplyPreview.stories.tsx
@@ -4,7 +4,7 @@ import { Pillar } from '@guardian/types';
 
 import { CommentReplyPreview, Preview } from './CommentReplyPreview';
 import { CommentType } from '../../types';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 export default { title: 'CommentReplyPreview' };
 
@@ -63,7 +63,7 @@ export const Default = () => (
 Default.story = { name: 'default' };
 
 export const SingleLinePreview = () => (
-	<div className={padding}>
+	<div css={padding}>
 		<Preview
 			commentBeingRepliedTo={{
 				...commentBeingRepliedTo,
@@ -77,7 +77,7 @@ export const SingleLinePreview = () => (
 SingleLinePreview.story = { name: 'Single line' };
 
 export const SingleBlockPreview = () => (
-	<div className={padding}>
+	<div css={padding}>
 		<Preview
 			commentBeingRepliedTo={{
 				...commentBeingRepliedTo,
@@ -91,7 +91,7 @@ export const SingleBlockPreview = () => (
 SingleBlockPreview.story = { name: 'Single Block' };
 
 export const MultiBlockPreview = () => (
-	<div className={padding}>
+	<div css={padding}>
 		<Preview
 			commentBeingRepliedTo={{
 				...commentBeingRepliedTo,
diff --git a/src/components/CommentReplyPreview/CommentReplyPreview.tsx b/src/components/CommentReplyPreview/CommentReplyPreview.tsx
index eff27919..a883c40e 100644
--- a/src/components/CommentReplyPreview/CommentReplyPreview.tsx
+++ b/src/components/CommentReplyPreview/CommentReplyPreview.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { textSans } from '@guardian/src-foundations/typography';
 import { neutral, space, text, palette } from '@guardian/src-foundations';
@@ -19,7 +19,7 @@ type Props = {
 
 const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 	<div
-		className={css`
+		css={css`
 			width: ${space[amount]}px;
 		`}
 	/>
@@ -120,23 +120,23 @@ export const CommentReplyPreview = ({
 	return (
 		<>
 			<Row>
-				<div className={indentStyles}>
+				<div css={indentStyles}>
 					<SvgIndent />
 				</div>
 				<Space amount={1} />
-				<div className={smallFontStyles}>
+				<div css={smallFontStyles}>
 					{commentBeingRepliedTo.userProfile.displayName}
 				</div>
 				<Space amount={3} />
 				<div
-					className={cx(
+					css={[
 						buttonLinkPillarBaseStyles(pillar),
 						css`
 							button {
 								${textSans.small({ fontWeight: 'bold' })}
 							}
 						`,
-					)}
+					]}
 				>
 					<Button
 						priority="subdued"
@@ -170,34 +170,34 @@ export const Preview = ({
 	displayReplyComment: boolean;
 }) => {
 	return (
-		<div className={previewStyle}>
-			<p className={replyPreviewHeaderStyle}>
+		<div css={previewStyle}>
+			<p css={replyPreviewHeaderStyle}>
 				{commentBeingRepliedTo.userProfile.displayName} @{' '}
 				{commentBeingRepliedTo.date} said:
 			</p>
 			<div
-				className={commentStyles}
+				css={commentStyles}
 				dangerouslySetInnerHTML={{
 					__html: commentBeingRepliedTo.body || '',
 				}}
 			/>
 
 			<div
-				className={cx(
+				css={[
 					buttonLinkBaseStyles,
 					css`
 						button {
 							${textSans.small()}
 						}
 					`,
-				)}
+				]}
 			>
 				<Button
 					priority="subdued"
 					onClick={() => setDisplayReplyComment(!displayReplyComment)}
 					data-link-name="hide-comment"
 				>
-					<span className={blueLink}>Hide Comment</span>
+					<span css={blueLink}>Hide Comment</span>
 				</Button>
 			</div>
 		</div>
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 00eaee55..4d2d68ac 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { Pillar } from '@guardian/types';
 
@@ -8,7 +8,7 @@ import { Dropdown } from './Dropdown';
 
 const Container = ({ children }: { children: JSX.Element | JSX.Element[] }) => (
 	<div
-		className={css`
+		css={css`
 			padding: 10px;
 		`}
 	>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index a25aa901..8cf70b2c 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import FocusLock from 'react-focus-lock';
 
@@ -195,12 +195,12 @@ export const Dropdown = ({ id, label, options, pillar, onSelect }: Props) => {
 	const activeLink = options.find((option) => option.isActive);
 
 	return (
-		<div className={containerStyles}>
-			<div className={labelStyles}>
+		<div css={containerStyles}>
+			<div css={labelStyles}>
 				{label}
 				<button
 					onClick={() => setIsExpanded(!isExpanded)}
-					className={cx(buttonStyles, isExpanded && expandedStyles)}
+					css={[buttonStyles, isExpanded && expandedStyles]}
 					aria-controls={dropdownID}
 					aria-expanded={isExpanded ? 'true' : 'false'}
 				>
@@ -208,16 +208,16 @@ export const Dropdown = ({ id, label, options, pillar, onSelect }: Props) => {
 				</button>
 			</div>
 			<FocusLock>
-				<ul id={dropdownID} className={cx(ulStyles, isExpanded && ulExpanded)}>
+				<ul id={dropdownID} css={[ulStyles, isExpanded && ulExpanded]}>
 					{options.map((option, index) => (
 						<li key={option.title}>
 							<button
 								onClick={() => onSelect(option.value)}
-								className={cx(
+								css={[
 									linkStyles(!!option.disabled),
 									option.isActive && activeStyles(pillar),
 									index === 0 && firstStyles,
-								)}
+								]}
 								disabled={option.isActive || option.disabled}
 							>
 								{option.title}
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
index 52b75e6d..56ba6008 100644
--- a/src/components/Filters/Filters.tsx
+++ b/src/components/Filters/Filters.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space } from '@guardian/src-foundations';
 import { border } from '@guardian/src-foundations/palette';
@@ -58,8 +58,8 @@ export const Filters = ({
 	totalPages,
 	commentCount,
 }: Props) => (
-	<div id="comment-filters" className={filterBar}>
-		<div className={filterPadding}>
+	<div id="comment-filters" css={filterBar}>
+		<div css={filterPadding}>
 			<Dropdown
 				id="order-by-dropdown"
 				label="Sort by"
@@ -89,8 +89,8 @@ export const Filters = ({
 				}
 			/>
 		</div>
-		<div className={dividerStyles} />
-		<div className={filterPadding}>
+		<div css={dividerStyles} />
+		<div css={filterPadding}>
 			<Dropdown
 				id="page-size-dropdown"
 				label="Per page"
@@ -123,8 +123,8 @@ export const Filters = ({
 				}
 			/>
 		</div>
-		<div className={dividerStyles} />
-		<div className={filterPadding}>
+		<div css={dividerStyles} />
+		<div css={filterPadding}>
 			<Dropdown
 				id="threads-dropdown"
 				label="Display threads"
diff --git a/src/components/FirstCommentWelcome/FirstCommentWelcome.tsx b/src/components/FirstCommentWelcome/FirstCommentWelcome.tsx
index bcaf6d57..0f16192a 100644
--- a/src/components/FirstCommentWelcome/FirstCommentWelcome.tsx
+++ b/src/components/FirstCommentWelcome/FirstCommentWelcome.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 import { textSans, headline } from '@guardian/src-foundations/typography';
 import { space, neutral } from '@guardian/src-foundations';
 import { TextInput } from '@guardian/src-text-input';
@@ -41,7 +41,7 @@ const Text = ({
 	children,
 }: {
 	children: string | JSX.Element | JSX.Element[];
-}) => <p className={textStyling}>{children}</p>;
+}) => <p css={textStyling}>{children}</p>;
 
 export const FirstCommentWelcome = ({
 	body,
@@ -69,7 +69,7 @@ export const FirstCommentWelcome = ({
 
 	return (
 		<div
-			className={css`
+			css={css`
 				padding: ${space[2]}px;
 			`}
 		>
@@ -80,7 +80,7 @@ export const FirstCommentWelcome = ({
 				}}
 			>
 				<h3
-					className={css`
+					css={css`
 						${headline.xxsmall({ fontWeight: 'bold' })};
 					`}
 				>
@@ -114,7 +114,7 @@ export const FirstCommentWelcome = ({
 							subdued={true}
 							rel="nofollow"
 						>
-							<span className={textStyling}>community guidelines</span>
+							<span css={textStyling}>community guidelines</span>
 						</Link>
 						{` -`} and if you spot a comment you think doesn’t adhere to the
 						guidelines, please use the ‘Report’ link next to it to let us know.
@@ -125,7 +125,7 @@ export const FirstCommentWelcome = ({
 					with it.
 				</Text>
 				<div
-					className={cx(previewStyle, textStyling)}
+					css={[previewStyle, textStyling]}
 					dangerouslySetInnerHTML={{ __html: previewBody || '' }}
 				/>
 				<Row>
@@ -138,7 +138,7 @@ export const FirstCommentWelcome = ({
 						Post your comment
 					</PillarButton>
 					<div
-						className={css`
+						css={css`
 							width: ${space[3]}px;
 						`}
 					></div>
diff --git a/src/components/LoadingComments/LoadingComments.tsx b/src/components/LoadingComments/LoadingComments.tsx
index 5f812534..7ebe25b5 100644
--- a/src/components/LoadingComments/LoadingComments.tsx
+++ b/src/components/LoadingComments/LoadingComments.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, keyframes } from 'emotion';
+import { css, keyframes } from '@emotion/react';
 
 import { space } from '@guardian/src-foundations';
 import { neutral } from '@guardian/src-foundations/palette';
@@ -58,7 +58,7 @@ const Grey = ({
 	spaceLeft?: 1 | 2 | 3 | 4 | 5 | 6 | 9;
 }) => (
 	<div
-		className={css`
+		css={css`
 			height: ${height}px;
 			width: ${width ? `${width}px` : '100%'};
 			margin-bottom: ${spaceBelow && space[spaceBelow]}px;
@@ -71,8 +71,8 @@ const Grey = ({
 );
 
 export const LoadingComments = () => (
-	<div className={containerStyles} data-testid="loading-comments">
-		<div className={avatarStyles(48)} />
+	<div css={containerStyles} data-testid="loading-comments">
+		<div css={avatarStyles(48)} />
 		<Column>
 			<Row>
 				<Grey height={20} width={140} spaceBelow={9} />
diff --git a/src/components/LoadingPicks/LoadingPicks.tsx b/src/components/LoadingPicks/LoadingPicks.tsx
index 4e7d9437..9046b334 100644
--- a/src/components/LoadingPicks/LoadingPicks.tsx
+++ b/src/components/LoadingPicks/LoadingPicks.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, keyframes } from 'emotion';
+import { css, keyframes } from '@emotion/react';
 
 import { space } from '@guardian/src-foundations';
 import { neutral } from '@guardian/src-foundations/palette';
@@ -70,7 +70,7 @@ const FullWidthColumn = ({
 	children: JSX.Element | JSX.Element[];
 }) => (
 	<div
-		className={css`
+		css={css`
 			display: flex;
 			flex-direction: column;
 			width: 100%;
@@ -92,7 +92,7 @@ const Grey = ({
 	spaceLeft?: 1 | 2 | 3 | 4 | 5 | 6 | 9;
 }) => (
 	<div
-		className={css`
+		css={css`
 			height: ${height}px;
 			width: ${width ? `${width}px` : '100%'};
 			margin-bottom: ${spaceBelow && space[spaceBelow]}px;
@@ -105,11 +105,11 @@ const Grey = ({
 );
 
 export const LoadingPicks = () => (
-	<div className={containerStyles}>
+	<div css={containerStyles}>
 		<FullWidthColumn>
-			<div className={pickBoxStyles} />
+			<div css={pickBoxStyles} />
 			<Row>
-				<div className={avatarStyles(48)} />
+				<div css={avatarStyles(48)} />
 				<FullWidthColumn>
 					<Grey height={20} width={90} spaceBelow={1} />
 					<Grey height={15} width={50} spaceBelow={9} />
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 2468a68b..c5e680ff 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { textSans } from '@guardian/src-foundations/typography';
 import { neutral, border, space } from '@guardian/src-foundations';
@@ -131,7 +131,7 @@ const Forward = ({
 	currentPage: number;
 	setCurrentPage: Function;
 }) => (
-	<div className={cx(chevronButtonStyles({ isSelected: false }), shiftRight)}>
+	<div css={[chevronButtonStyles({ isSelected: false }), shiftRight]}>
 		<Button
 			onClick={() => setCurrentPage(currentPage + 1)}
 			aria-label="Previous discussion page"
@@ -154,7 +154,7 @@ const Back = ({
 	const newPage = Math.max(0, currentPage - 1);
 
 	return (
-		<div className={chevronButtonStyles({ isSelected: false })}>
+		<div css={chevronButtonStyles({ isSelected: false })}>
 			<Button
 				onClick={() => setCurrentPage(newPage)}
 				aria-label="Previous discussion page"
@@ -179,7 +179,7 @@ const PageButton = ({
 }) => (
 	<button
 		key={currentPage}
-		className={pageButtonStyles(isSelected)}
+		css={pageButtonStyles(isSelected)}
 		onClick={() => setCurrentPage(currentPage)}
 		data-link-name={`Pagination view page ${currentPage}`}
 	>
@@ -250,8 +250,8 @@ export const Pagination = ({
 	if (endIndex > commentCount) endIndex = commentCount; // If there are less total comments than allowed on the page, endIndex is total comment count
 
 	return (
-		<div className={wrapperStyles}>
-			<div className={paginationButtons}>
+		<div css={wrapperStyles}>
+			<div css={paginationButtons}>
 				{showBackButton && (
 					<Back currentPage={currentPage} setCurrentPage={setCurrentPage} />
 				)}
@@ -260,7 +260,7 @@ export const Pagination = ({
 					setCurrentPage={setCurrentPage}
 					isSelected={currentPage === 1}
 				/>
-				{showFirstElipsis && <div className={elipsisStyles}>&hellip;</div>}
+				{showFirstElipsis && <div css={elipsisStyles}>&hellip;</div>}
 				<PageButton
 					currentPage={secondPage}
 					setCurrentPage={setCurrentPage}
@@ -280,7 +280,7 @@ export const Pagination = ({
 						isSelected={currentPage === forthPage}
 					/>
 				)}
-				{showSecondElipsis && <div className={elipsisStyles}>&hellip;</div>}
+				{showSecondElipsis && <div css={elipsisStyles}>&hellip;</div>}
 				{showLastPage && (
 					<PageButton
 						currentPage={lastPage}
@@ -293,7 +293,7 @@ export const Pagination = ({
 				)}
 			</div>
 			{commentCount && (
-				<div className={paginationText}>
+				<div css={paginationText}>
 					{`Displaying ${
 						filters.threads === 'unthreaded' ? 'comments' : 'threads'
 					} ${startIndex} to ${endIndex} of ${commentCount}`}
diff --git a/src/components/PillarButton/PillarButton.stories.tsx b/src/components/PillarButton/PillarButton.stories.tsx
index c9d39528..ab97714e 100644
--- a/src/components/PillarButton/PillarButton.stories.tsx
+++ b/src/components/PillarButton/PillarButton.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space } from '@guardian/src-foundations';
 import { SvgCheckmark } from '@guardian/src-icons';
@@ -11,7 +11,7 @@ import { PillarButton } from './PillarButton';
 
 const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 	<div
-		className={css`
+		css={css`
 			width: ${space[amount]}px;
 		`}
 	/>
diff --git a/src/components/PillarButton/PillarButton.tsx b/src/components/PillarButton/PillarButton.tsx
index f332d05f..5cae2ad7 100644
--- a/src/components/PillarButton/PillarButton.tsx
+++ b/src/components/PillarButton/PillarButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { palette, neutral } from '@guardian/src-foundations';
 import { textSans } from '@guardian/src-foundations/typography';
@@ -94,7 +94,7 @@ export const PillarButton = ({
 	linkName,
 	size = 'default',
 }: Props) => (
-	<div className={buttonOverrides(pillar, priority)}>
+	<div css={buttonOverrides(pillar, priority)}>
 		<Button
 			priority={priority}
 			size={size}
diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
index 9af1d45a..0320fbdb 100644
--- a/src/components/Preview/Preview.tsx
+++ b/src/components/Preview/Preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { space, neutral } from '@guardian/src-foundations';
 import { textSans } from '@guardian/src-foundations/typography';
@@ -53,9 +53,9 @@ const spout = css`
 
 export const Preview = ({ previewHtml }: Props) => (
 	<>
-		<div className={spout} />
+		<div css={spout} />
 		<p
-			className={previewStyle}
+			css={previewStyle}
 			dangerouslySetInnerHTML={{ __html: previewHtml || '' }}
 		/>
 	</>
diff --git a/src/components/RecommendationCount/RecommendationCount.tsx b/src/components/RecommendationCount/RecommendationCount.tsx
index 5d8067f4..3f56ed96 100644
--- a/src/components/RecommendationCount/RecommendationCount.tsx
+++ b/src/components/RecommendationCount/RecommendationCount.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { textSans } from '@guardian/src-foundations/typography';
 import { neutral } from '@guardian/src-foundations/palette';
@@ -72,14 +72,14 @@ export const RecommendationCount = ({
 
 	return (
 		<Row>
-			<div className={countStyles}>{count}</div>
+			<div css={countStyles}>{count}</div>
 			<button
-				className={buttonStyles(recommended, isSignedIn)}
+				css={buttonStyles(recommended, isSignedIn)}
 				onClick={() => tryToRecommend()}
 				disabled={recommended || !isSignedIn || userMadeComment}
 				data-link-name="Recommend comment"
 			>
-				<div className={arrowStyles(recommended)}>
+				<div css={arrowStyles(recommended)}>
 					<SvgArrowUpStraight />
 				</div>
 			</button>
diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
index ecdc8796..13cc3fde 100644
--- a/src/components/Row/Row.tsx
+++ b/src/components/Row/Row.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 type Props = { children: React.ReactNode };
 
 export const Row = ({ children }: Props) => (
 	<div
-		className={css`
+		css={css`
 			display: flex;
 			flex-direction: row;
 		`}
diff --git a/src/components/Timestamp/Timestamp.tsx b/src/components/Timestamp/Timestamp.tsx
index c4cc2c4a..c95a0749 100644
--- a/src/components/Timestamp/Timestamp.tsx
+++ b/src/components/Timestamp/Timestamp.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { textSans } from '@guardian/src-foundations/typography';
 import { palette } from '@guardian/src-foundations';
@@ -44,7 +44,7 @@ export const Timestamp = ({
 	return (
 		<a
 			href={webUrl}
-			className={linkStyles}
+			css={linkStyles}
 			data-link-name="jump-to-comment-timestamp"
 			onClick={(e) => {
 				onPermalinkClick(commentId);
@@ -52,7 +52,7 @@ export const Timestamp = ({
 			}}
 			rel="nofollow"
 		>
-			<time dateTime={isoDateTime.toString()} className={timeStyles}>
+			<time dateTime={isoDateTime.toString()} css={timeStyles}>
 				{timeAgo}
 			</time>
 		</a>
diff --git a/src/components/TopPick/TopPick.stories.tsx b/src/components/TopPick/TopPick.stories.tsx
index 365ceef9..1ddc64e3 100644
--- a/src/components/TopPick/TopPick.stories.tsx
+++ b/src/components/TopPick/TopPick.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/react';
 
 import { Pillar } from '@guardian/types';
 
@@ -52,7 +52,7 @@ const commentWithShortBody: CommentType = {
 
 export const LongPick = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 300px;
 		`}
@@ -70,7 +70,7 @@ LongPick.story = { name: 'Long' };
 
 export const ShortPick = () => (
 	<div
-		className={css`
+		css={css`
 			width: 100%;
 			max-width: 300px;
 		`}
diff --git a/src/components/TopPick/TopPick.tsx b/src/components/TopPick/TopPick.tsx
index 23a62772..567f45ea 100644
--- a/src/components/TopPick/TopPick.tsx
+++ b/src/components/TopPick/TopPick.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { from } from '@guardian/src-foundations/mq';
 import { space, neutral, palette } from '@guardian/src-foundations';
@@ -104,7 +104,7 @@ const PickBubble = ({
 	children: JSX.Element | JSX.Element[];
 }) => (
 	<div
-		className={css`
+		css={css`
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
@@ -148,7 +148,7 @@ const Bottom = ({ children }: { children: JSX.Element | JSX.Element[] }) => (
 
 const PickMeta = ({ children }: { children: JSX.Element | JSX.Element[] }) => (
 	<div
-		className={css`
+		css={css`
 			display: flex;
 			justify-content: space-between;
 			padding-top: ${space[1]}px;
@@ -172,19 +172,19 @@ export const TopPick = ({
 	onPermalinkClick,
 	onRecommend,
 }: Props) => (
-	<div className={pickStyles}>
+	<div css={pickStyles}>
 		<PickBubble>
 			<Top>
-				<h3 className={titleStyles}>Guardian Pick</h3>
+				<h3 css={titleStyles}>Guardian Pick</h3>
 				<p
-					className={cx(wrapStyles, inCommentLinkStyling)}
+					css={[wrapStyles, inCommentLinkStyling]}
 					dangerouslySetInnerHTML={{
 						__html: truncateText(comment.body, 450),
 					}}
 				></p>
 			</Top>
 			<Bottom>
-				<div className={smallFontSize}>
+				<div css={smallFontSize}>
 					<Link
 						priority="primary"
 						subdued={true}
@@ -202,7 +202,7 @@ export const TopPick = ({
 		</PickBubble>
 		<PickMeta>
 			<Row>
-				<div className={avatarMargin}>
+				<div css={avatarMargin}>
 					<Avatar
 						imageUrl={comment.userProfile.avatar}
 						displayName={''}
@@ -210,10 +210,10 @@ export const TopPick = ({
 					/>
 				</div>
 				<Column>
-					<span className={userNameStyles(pillar)}>
+					<span css={userNameStyles(pillar)}>
 						<a
 							href={comment.userProfile.webUrl}
-							className={cx(linkStyles, inheritColour)}
+							css={[linkStyles, inheritColour]}
 							rel="nofollow"
 						>
 							{comment.userProfile.displayName}
diff --git a/src/components/TopPicks/TopPicks.tsx b/src/components/TopPicks/TopPicks.tsx
index 7c95cb7d..b403f485 100644
--- a/src/components/TopPicks/TopPicks.tsx
+++ b/src/components/TopPicks/TopPicks.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/react';
 
 import { until, from } from '@guardian/src-foundations/mq';
 import { Theme } from '@guardian/types';
@@ -65,9 +65,9 @@ export const TopPicks = ({
 			: rightColComments.push(comment),
 	);
 	return (
-		<div className={picksWrapper}>
-			<div className={twoColCommentsStyles}>
-				<div className={cx(columWrapperStyles, paddingRight)}>
+		<div css={picksWrapper}>
+			<div css={twoColCommentsStyles}>
+				<div css={[columWrapperStyles, paddingRight]}>
 					{leftColComments.map((comment) => (
 						<TopPick
 							key={comment.id}
@@ -82,7 +82,7 @@ export const TopPicks = ({
 						/>
 					))}
 				</div>
-				<div className={cx(columWrapperStyles, paddingLeft)}>
+				<div css={[columWrapperStyles, paddingLeft]}>
 					{rightColComments.map((comment) => (
 						<TopPick
 							key={comment.id}
@@ -98,7 +98,7 @@ export const TopPicks = ({
 					))}
 				</div>
 			</div>
-			<div className={oneColCommentsStyles}>
+			<div css={oneColCommentsStyles}>
 				{comments.map((comment) => (
 					<TopPick
 						key={comment.id}
diff --git a/yarn.lock b/yarn.lock
index 880ba52c..06d8e3b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7040,16 +7040,6 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-emotion@^10.0.27:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
-  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
-  dependencies:
-    "@emotion/cache" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
 create-hash@^1.1.0, create-hash@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -8055,14 +8045,6 @@ emotion-theming@^10.0.19:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
-emotion@^10.0.27:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
-  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
-  dependencies:
-    babel-plugin-emotion "^10.0.27"
-    create-emotion "^10.0.27"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"