diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
index ea8b69fbc56..c2c592235d3 100644
--- a/dotcom-rendering/src/components/ArticleMeta.apps.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
@@ -23,7 +23,7 @@ import { Dateline } from './Dateline';
 import { FollowWrapper } from './FollowWrapper.island';
 import { Island } from './Island';
 import { ListenToArticle } from './ListenToArticle.island';
-import { LiveblogNotifications } from './LiveblogNotifications.island';
+import { NotificationsToggle } from './NotificationsToggle.island';
 
 type Props = {
 	format: ArticleFormat;
@@ -249,9 +249,6 @@ export const ArticleMetaApps = ({
 	const shouldShowFollowButtons = (layoutOrDesignType: boolean) =>
 		layoutOrDesignType && !!byline && !isUndefined(soleContributor);
 
-	const shouldShowLiveblogNotifications =
-		isLiveBlog && !!pageId && !!headline;
-
 	const isImmersiveOrAnalysisWithMultipleAuthors =
 		(isAnalysis || isImmersive) && !!byline && isUndefined(soleContributor);
 
@@ -311,14 +308,11 @@ export const ArticleMetaApps = ({
 								/>
 							</Island>
 						)}
-					{shouldShowLiveblogNotifications && (
-						<Island priority="critical">
-							<LiveblogNotifications
-								displayName={headline}
-								id={pageId}
-							/>
-						</Island>
-					)}
+					<LiveblogNotifications
+						isLiveBlog={isLiveBlog}
+						headline={headline}
+						pageId={pageId}
+					/>
 				</MetaGridByline>
 				{isCommentable && (
 					<MetaGridCommentCount
@@ -379,3 +373,35 @@ export const ArticleMetaApps = ({
 		</div>
 	);
 };
+
+const LiveblogNotifications = (props: {
+	isLiveBlog: boolean;
+	headline: string | undefined;
+	pageId: string | undefined;
+}) =>
+	props.isLiveBlog && !!props.pageId && !!props.headline ? (
+		<div
+			css={css`
+				margin-top: ${space[3]}px;
+				min-height: ${space[6]}px;
+
+				${from.phablet} {
+					display: inline-flex;
+					flex-direction: column;
+
+					button:first-of-type {
+						margin-right: ${space[5]}px;
+					}
+				}
+			`}
+			data-gu-name="liveblog-notifications"
+		>
+			<Island priority="critical">
+				<NotificationsToggle
+					id={props.pageId}
+					displayName={props.headline}
+					notificationType="content"
+				/>
+			</Island>
+		</div>
+	) : null;
diff --git a/dotcom-rendering/src/components/LiveblogNotifications.island.tsx b/dotcom-rendering/src/components/LiveblogNotifications.island.tsx
deleted file mode 100644
index 93cc57abe76..00000000000
--- a/dotcom-rendering/src/components/LiveblogNotifications.island.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { css } from '@emotion/react';
-import { Topic } from '@guardian/bridget/Topic';
-import { isUndefined, log } from '@guardian/libs';
-import { from, space } from '@guardian/source/foundations';
-import { useEffect, useState } from 'react';
-import { getNotificationsClient } from '../lib/bridgetApi';
-import { FollowNotificationsButton } from './FollowButtons';
-
-type Props = {
-	id: string;
-	displayName: string;
-};
-
-export const LiveblogNotifications = ({ id, displayName }: Props) => {
-	const [isFollowingNotifications, setIsFollowingNotifications] = useState<
-		boolean | undefined
-	>(undefined);
-
-	useEffect(() => {
-		const topic = new Topic({
-			id,
-			displayName,
-			type: 'content',
-		});
-
-		void getNotificationsClient()
-			.isFollowing(topic)
-			.then(setIsFollowingNotifications)
-			.catch((error) => {
-				window.guardian.modules.sentry.reportError(
-					error,
-					'bridget-getNotificationsClient-isFollowing-error',
-				);
-				log(
-					'dotcom',
-					'Bridget getNotificationsClient.isFollowing Error:',
-					error,
-				);
-			});
-	}, [id, displayName]);
-
-	const notificationsHandler = () => {
-		const topic = new Topic({
-			id,
-			displayName,
-			type: 'content',
-		});
-
-		if (isFollowingNotifications) {
-			void getNotificationsClient()
-				.unfollow(topic)
-				.then((success) => {
-					if (success) {
-						setIsFollowingNotifications(false);
-					}
-				})
-				.catch((error) => {
-					window.guardian.modules.sentry.reportError(
-						error,
-						'briidget-getNotificationsClient-unfollow-error',
-					);
-					log(
-						'dotcom',
-						'Bridget getNotificationsClient.unfollow Error:',
-						error,
-					);
-				});
-		} else {
-			void getNotificationsClient()
-				.follow(topic)
-				.then((success) => {
-					if (success) {
-						setIsFollowingNotifications(true);
-					}
-				})
-				.catch((error) => {
-					window.guardian.modules.sentry.reportError(
-						error,
-						'bridget-getNotificationsClient-follow-error',
-					);
-					log(
-						'dotcom',
-						'Bridget getNotificationsClient.follow Error:',
-						error,
-					);
-				});
-		}
-	};
-
-	return (
-		<div
-			css={css`
-				margin-top: ${space[3]}px;
-				min-height: ${space[6]}px;
-
-				${from.phablet} {
-					display: inline-flex;
-					flex-direction: column;
-
-					button:first-of-type {
-						margin-right: ${space[5]}px;
-					}
-				}
-			`}
-			data-gu-name="liveblog-notifications"
-		>
-			<FollowNotificationsButton
-				isFollowing={isFollowingNotifications ?? false}
-				onClickHandler={
-					!isUndefined(isFollowingNotifications)
-						? notificationsHandler
-						: () => undefined
-				}
-			/>
-		</div>
-	);
-};
diff --git a/dotcom-rendering/src/components/NotificationsToggle.island.tsx b/dotcom-rendering/src/components/NotificationsToggle.island.tsx
new file mode 100644
index 00000000000..936010e2a35
--- /dev/null
+++ b/dotcom-rendering/src/components/NotificationsToggle.island.tsx
@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import { getNotificationsClient } from '../lib/bridgetApi';
+import { NotificationsToggle as NotificationsToggleComponent } from './NotificationsToggle';
+
+type Props = Omit<
+	ComponentProps<typeof NotificationsToggleComponent>,
+	'notificationsClient'
+>;
+
+export const NotificationsToggle = (props: Props) => (
+	<NotificationsToggleComponent
+		notificationsClient={getNotificationsClient()}
+		{...props}
+	/>
+);
diff --git a/dotcom-rendering/src/components/NotificationsToggle.stories.tsx b/dotcom-rendering/src/components/NotificationsToggle.stories.tsx
new file mode 100644
index 00000000000..bb9bd9070d5
--- /dev/null
+++ b/dotcom-rendering/src/components/NotificationsToggle.stories.tsx
@@ -0,0 +1,75 @@
+import { Topic } from '@guardian/bridget';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import type { NotificationsClient } from '../lib/bridgetApi';
+import { NotificationsToggle as NotificationsToggleComponent } from './NotificationsToggle';
+
+const meta = {
+	component: NotificationsToggleComponent,
+} satisfies Meta<typeof NotificationsToggleComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const mockNotificationsClient: NotificationsClient = (() => {
+	let following = false;
+
+	return {
+		follow: fn(() => {
+			following = true;
+			return Promise.resolve(true);
+		}),
+
+		unfollow: fn(() => {
+			following = false;
+			return Promise.resolve(true);
+		}),
+
+		isFollowing: fn(() => {
+			return Promise.resolve(following);
+		}),
+	};
+})();
+
+export const NotificationsToggle = {
+	args: {
+		displayName: 'A notification',
+		id: 'a-notification-id',
+		notificationType: 'content',
+		notificationsClient: mockNotificationsClient,
+	},
+	play: async ({ args, step, canvasElement }) => {
+		const canvas = within(canvasElement);
+		const button = canvas.getByRole('button');
+		const expectedTopic = new Topic({
+			displayName: args.displayName,
+			id: args.id,
+			type: args.notificationType,
+		});
+
+		await expect(button).toHaveTextContent('Notifications off');
+
+		await step('isFollowing is called', async () => {
+			await expect(
+				mockNotificationsClient.isFollowing,
+			).toHaveBeenCalledWith(expectedTopic);
+		});
+
+		await step('follow is called when button is clicked', async () => {
+			await userEvent.click(button);
+			await expect(mockNotificationsClient.follow).toHaveBeenCalledWith(
+				expectedTopic,
+			);
+			await expect(button).toHaveTextContent('Notifications on');
+		});
+
+		await step('unfollow is called when button is clicked', async () => {
+			await userEvent.click(button);
+			await expect(mockNotificationsClient.unfollow).toHaveBeenCalledWith(
+				expectedTopic,
+			);
+			await expect(button).toHaveTextContent('Notifications off');
+		});
+	},
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/NotificationsToggle.tsx b/dotcom-rendering/src/components/NotificationsToggle.tsx
new file mode 100644
index 00000000000..11de015bc9f
--- /dev/null
+++ b/dotcom-rendering/src/components/NotificationsToggle.tsx
@@ -0,0 +1,145 @@
+import { Topic } from '@guardian/bridget/Topic';
+import { log } from '@guardian/libs';
+import {
+	SvgNotificationsOff,
+	SvgNotificationsOn,
+} from '@guardian/source/react-components';
+import { useEffect, useState } from 'react';
+import type { NotificationsClient } from '../lib/bridgetApi';
+import { ToggleButton } from './ToggleButton';
+
+type Props = {
+	id: string;
+	displayName: string;
+	notificationType: 'content';
+	notificationsClient: NotificationsClient;
+};
+
+export const NotificationsToggle = ({
+	id,
+	displayName,
+	notificationType,
+	notificationsClient,
+}: Props) => {
+	const [isFollowing, setIsFollowing] = useIsFollowing(
+		id,
+		displayName,
+		notificationType,
+		notificationsClient,
+	);
+
+	return (
+		<ToggleButton
+			colour="--follow-text"
+			icon={
+				isFollowing ? (
+					<SvgNotificationsOn size="xsmall" />
+				) : (
+					<SvgNotificationsOff size="xsmall" />
+				)
+			}
+			iconBackground={isFollowing ? '--follow-icon-fill' : undefined}
+			iconBorder="--follow-icon-fill"
+			iconFill={
+				isFollowing ? '--follow-icon-background' : '--follow-icon-fill'
+			}
+			onClick={toggleNotifications(
+				id,
+				displayName,
+				notificationType,
+				notificationsClient,
+				isFollowing,
+				setIsFollowing,
+			)}
+		>
+			Notifications {isFollowing ? 'on' : 'off'}
+		</ToggleButton>
+	);
+};
+
+/**
+ * Retrieves information about whether the user is following a particular topic,
+ * via Bridget, and stores it in a state variable for use in the rest of the
+ * component. Also supplies a setter to update that state, similar to
+ * `useState`.
+ */
+const useIsFollowing = (
+	id: string,
+	displayName: string,
+	notificationType: Props['notificationType'],
+	notificationsClient: Props['notificationsClient'],
+): [
+	boolean | undefined,
+	React.Dispatch<React.SetStateAction<boolean | undefined>>,
+] => {
+	const [isFollowing, setIsFollowing] = useState<boolean | undefined>(
+		undefined,
+	);
+
+	useEffect(() => {
+		const topic = new Topic({
+			id,
+			displayName,
+			type: notificationType,
+		});
+
+		void notificationsClient
+			.isFollowing(topic)
+			.then(setIsFollowing)
+			.catch(handleError('isFollowing'));
+	}, [id, displayName, notificationType, notificationsClient]);
+
+	return [isFollowing, setIsFollowing];
+};
+
+const toggleNotifications = (
+	id: string,
+	displayName: string,
+	notificationType: Props['notificationType'],
+	notificationsClient: Props['notificationsClient'],
+	isFollowing: boolean | undefined,
+	setIsFollowing: (a: boolean) => void,
+): (() => void) =>
+	isFollowing === undefined
+		? () => undefined
+		: () => {
+				const topic = new Topic({
+					id,
+					displayName,
+					type: notificationType,
+				});
+
+				if (isFollowing) {
+					void notificationsClient
+						.unfollow(topic)
+						.then((success) => {
+							if (success) {
+								setIsFollowing(false);
+							}
+						})
+						.catch(handleError('unfollow'));
+				} else {
+					void notificationsClient
+						.follow(topic)
+						.then((success) => {
+							if (success) {
+								setIsFollowing(true);
+							}
+						})
+						.catch(handleError('follow'));
+				}
+		  };
+
+const handleError =
+	(methodName: 'follow' | 'unfollow' | 'isFollowing') =>
+	(error: any): void => {
+		window.guardian.modules.sentry.reportError(
+			error,
+			`bridget-getNotificationsClient-${methodName}-error`,
+		);
+		log(
+			'dotcom',
+			`Bridget getNotificationsClient.${methodName} Error:`,
+			error,
+		);
+	};
diff --git a/dotcom-rendering/src/components/ToggleButton.tsx b/dotcom-rendering/src/components/ToggleButton.tsx
new file mode 100644
index 00000000000..c0b2c255a4a
--- /dev/null
+++ b/dotcom-rendering/src/components/ToggleButton.tsx
@@ -0,0 +1,86 @@
+import { space, textSans15Object } from '@guardian/source/foundations';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { palette } from '../palette';
+import type { ColourName } from '../paletteDeclarations';
+
+type Props = {
+	onClick: () => void;
+	children: ReactNode;
+	colour: ColourName;
+	icon: ReactNode;
+	iconFill: ColourName;
+	iconBackground: ColourName | undefined;
+	iconBorder: ColourName;
+};
+
+export const ToggleButton = (props: Props) => (
+	<Button onClick={props.onClick} colour={props.colour}>
+		<Icon
+			background={props.iconBackground}
+			border={props.iconBorder}
+			fill={props.iconFill}
+		>
+			{props.icon}
+		</Icon>
+		{props.children}
+	</Button>
+);
+
+const Button = (props: {
+	onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+	children: ReactNode;
+	colour: ColourName;
+}) => (
+	<button
+		type="button"
+		onClick={props.onClick}
+		css={{
+			...textSans15Object,
+			background: 'none',
+			border: 'none',
+			marginLeft: 0,
+			minHeight: space[6],
+			padding: 0,
+			textAlign: 'left',
+			display: 'flex',
+			alignItems: 'center',
+			columnGap: '0.2em',
+		}}
+		style={{
+			color: palette(props.colour),
+		}}
+	>
+		{props.children}
+	</button>
+);
+
+const Icon = (props: {
+	fill: ColourName;
+	background: ColourName | undefined;
+	border: ColourName;
+	children: ReactNode;
+}) => (
+	<div
+		css={{
+			display: 'flex',
+			margin: 0,
+			marginRight: space[1],
+			borderRadius: '100%',
+			borderWidth: 1,
+			borderStyle: 'solid',
+			svg: {
+				margin: 1,
+			},
+		}}
+		style={{
+			fill: palette(props.fill),
+			backgroundColor:
+				props.background !== undefined
+					? palette(props.background)
+					: undefined,
+			borderColor: palette(props.border),
+		}}
+	>
+		{props.children}
+	</div>
+);
diff --git a/dotcom-rendering/src/lib/bridgetApi.ts b/dotcom-rendering/src/lib/bridgetApi.ts
index 644fb63e608..a20811faff6 100644
--- a/dotcom-rendering/src/lib/bridgetApi.ts
+++ b/dotcom-rendering/src/lib/bridgetApi.ts
@@ -1,3 +1,4 @@
+import type { ThriftClient } from '@creditkarma/thrift-server-core';
 import * as AbTesting from '@guardian/bridget/AbTesting';
 import * as Acquisitions from '@guardian/bridget/Acquisitions';
 import * as Analytics from '@guardian/bridget/Analytics';
@@ -18,6 +19,15 @@ import * as Video from '@guardian/bridget/Videos';
 import { isUndefined } from '@guardian/libs';
 import { createAppClient } from './thrift/nativeConnection';
 
+type BridgetClient<Client extends ThriftClient> = Omit<
+	Client,
+	| '_serviceName'
+	| '_annotations'
+	| '_methodAnnotations'
+	| '_methodNames'
+	| '_methodParameters'
+>;
+
 let environmentClient: Environment.Client<void> | undefined = undefined;
 export const getEnvironmentClient = (): Environment.Client<void> => {
 	if (isUndefined(environmentClient)) {
@@ -54,8 +64,9 @@ export const getAcquisitionsClient = (): Acquisitions.Client<void> => {
 	return acquisitionsClient;
 };
 
-let notificationsClient: Notifications.Client<void> | undefined = undefined;
-export const getNotificationsClient = (): Notifications.Client<void> => {
+export type NotificationsClient = BridgetClient<Notifications.Client>;
+let notificationsClient: NotificationsClient | undefined = undefined;
+export const getNotificationsClient = (): NotificationsClient => {
 	if (!notificationsClient) {
 		notificationsClient = createAppClient<Notifications.Client<void>>(
 			Notifications.Client,