diff --git a/frontend/src/App.css b/frontend/src/App.css
index 316b0df8f..a75dbdec7 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -46,6 +46,7 @@
 	position: fixed;
 	top: 50%;
 	left: 50%;
+	overflow: hidden;
 	margin: 0;
 	padding: 0;
 	border: none;
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index 9814b68d8..d1c282694 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -66,12 +66,14 @@
 
 	/* general modal overlay */
 	--overlay-background-colour: #8ad5da;
+	--overlay-header-background-colour: #61b5ba;
 	--overlay-tab-colour: #c7e8f4;
 	--overlay-attack-background-colour: #d6d6ff;
 	--overlay-text-colour: #313131;
 
 	/* handbook modal */
 	--handbook-background-colour: #fff;
+	--handbook-header-background-colour: #a7a7a7;
 	--handbook-spine-background-colour: #d3d3d3;
 	--handbook-spine-separator-colour: var(--main-text-colour-inverted);
 	--handbook-tab-selected-colour: #313131;
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.css b/frontend/src/components/DocumentViewer/DocumentViewBox.css
index b7597305e..683eeaf0b 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.css
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.css
@@ -1,31 +1,45 @@
+.document-popup-inner header {
+	border-radius: 0;
+	background-color: var(--accent-background-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-button {
+	border-color: var(--main-text-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-icon {
+	border-color: var(--main-text-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-button:hover {
+	background-color: var(--action-button-background-colour-hover);
+}
+
+.document-popup-inner header .overlay-close-button:focus-visible {
+	background-color: var(--action-button-background-colour-hover);
+	outline-color: var(--main-text-colour);
+}
+
 .document-popup-inner {
+	display: flex;
+	flex-direction: column;
+}
+
+.view-documents-main {
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
-	height: 85vh;
+	height: 75vh;
 	padding: 2rem;
 	border: 0.1875rem solid var(--main-border-colour);
 	background: var(--main-background);
 	aspect-ratio: 7/8;
 }
 
-.document-popup-inner .close-button {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	padding: 0.25rem 0.75rem;
-	color: var(--main-text-colour);
-	font-weight: bold;
-	font-size: 1.75rem;
-	text-decoration: none;
-}
-
-.document-popup-inner .close-button:hover {
-	border-color: var(--accent-border-colour);
-	color: var(--accent-border-colour);
-}
-
 .document-viewer-container {
 	flex-grow: 1;
 	overflow-y: auto;
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx
index c6371bfbf..aa1676d0d 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx
@@ -126,7 +126,7 @@ describe('DocumentViewBox component tests', () => {
 			const { user } = renderDocumentViewBox();
 
 			const closeButton = screen.getByRole('button', {
-				name: 'close document viewer',
+				name: 'close',
 			});
 			await user.click(closeButton);
 
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
index 105010872..a2ed6479b 100644
--- a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
+++ b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -1,10 +1,11 @@
 import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
 import { useEffect, useState } from 'react';
 
+import OverlayHeader from '@src/components/Overlay/OverlayHeader';
 import { DocumentMeta } from '@src/models/document';
 import { documentService } from '@src/service';
 
-import DocumentViewBoxHeader from './DocumentViewBoxHeader';
+import DocumentViewBoxNav from './DocumentViewBoxNav';
 
 import './DocumentViewBox.css';
 
@@ -32,44 +33,43 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) {
 
 	return (
 		<div className="document-popup-inner">
-			<button
-				className="prompt-injection-min-button close-button"
-				onClick={closeOverlay}
-				aria-label="close document viewer"
-				title="close document viewer"
-			>
-				X
-			</button>
-			<DocumentViewBoxHeader
-				documentIndex={documentIndex}
-				documentName={documentMetas[documentIndex]?.filename ?? ''}
-				numberOfDocuments={documentMetas.length}
-				onPrevious={() => {
-					if (documentIndex > 0) {
-						setDocumentIndex(documentIndex - 1);
-					}
-				}}
-				onNext={() => {
-					if (documentIndex < documentMetas.length - 1) {
-						setDocumentIndex(documentIndex + 1);
-					}
-				}}
+			<OverlayHeader
+				closeOverlay={closeOverlay}
+				heading="View Documents"
+				iconColor="#FFF"
 			/>
-			<div
-				className="document-viewer-container"
-				// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-				tabIndex={0}
-			>
-				<DocViewer
-					documents={documentMetas}
-					activeDocument={documentMetas[documentIndex]}
-					pluginRenderers={DocViewerRenderers}
-					config={{
-						header: {
-							disableHeader: true,
-						},
+			<div className="view-documents-main">
+				<DocumentViewBoxNav
+					documentIndex={documentIndex}
+					documentName={documentMetas[documentIndex]?.filename ?? ''}
+					numberOfDocuments={documentMetas.length}
+					onPrevious={() => {
+						if (documentIndex > 0) {
+							setDocumentIndex(documentIndex - 1);
+						}
+					}}
+					onNext={() => {
+						if (documentIndex < documentMetas.length - 1) {
+							setDocumentIndex(documentIndex + 1);
+						}
 					}}
 				/>
+				<div
+					className="document-viewer-container"
+					// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+					tabIndex={0}
+				>
+					<DocViewer
+						documents={documentMetas}
+						activeDocument={documentMetas[documentIndex]}
+						pluginRenderers={DocViewerRenderers}
+						config={{
+							header: {
+								disableHeader: true,
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css
deleted file mode 100644
index 676aff9d4..000000000
--- a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.view-documents-header {
-	display: flex;
-	flex-direction: column;
-	gap: 1.25rem;
-	align-items: stretch;
-	padding-bottom: 0.25rem;
-	color: var(--main-text-colour);
-}
-
-.view-documents-header h2 {
-	width: 100%;
-	margin: 0;
-	padding-bottom: 1rem;
-	border-bottom: solid 0.0625rem var(--main-border-colour);
-	text-align: center;
-}
-
-.view-documents-header .nav {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-}
-
-.view-documents-header .info {
-	margin: 0;
-	padding: 0;
-	font-size: 1.25rem;
-}
-
-.view-documents-header .button-container {
-	display: flex;
-	gap: 1rem;
-	justify-content: space-between;
-	align-items: center;
-	align-self: stretch;
-}
-
-.view-documents-header .button-container button {
-	flex: 0 0 30%;
-	white-space: nowrap;
-}
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx
deleted file mode 100644
index 487d6b8fb..000000000
--- a/frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
-
-import './DocumentViewBoxHeader.css';
-
-interface DocumentViewBoxHeaderProps {
-	documentIndex: number;
-	documentName: string;
-	numberOfDocuments: number;
-	onPrevious: () => void;
-	onNext: () => void;
-}
-
-function DocumentViewBoxHeader({
-	documentIndex,
-	documentName,
-	numberOfDocuments,
-	onPrevious,
-	onNext,
-}: DocumentViewBoxHeaderProps) {
-	const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`;
-
-	return (
-		<div className="view-documents-header">
-			<h2>View documents</h2>
-			<div className="nav">
-				<div className="button-container">
-					<ThemedButton onClick={onPrevious} ariaDisabled={documentIndex <= 0}>
-						<i aria-hidden>◄</i>&nbsp;previous document
-					</ThemedButton>
-					<div className="info">{documentNumber}</div>
-					<ThemedButton
-						onClick={onNext}
-						ariaDisabled={documentIndex >= numberOfDocuments - 1}
-					>
-						next document&nbsp;<i aria-hidden>►</i>
-					</ThemedButton>
-				</div>
-			</div>
-			<p className="info">{documentName}</p>
-		</div>
-	);
-}
-
-export default DocumentViewBoxHeader;
-export type { DocumentViewBoxHeaderProps };
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css
new file mode 100644
index 000000000..69441f811
--- /dev/null
+++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.css
@@ -0,0 +1,38 @@
+.view-documents-nav {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+	align-items: stretch;
+	padding-bottom: 0.25rem;
+	color: var(--main-text-colour);
+}
+
+.view-documents-nav .info {
+	margin: 0;
+	padding: 0;
+	font-size: 1.25rem;
+}
+
+.view-documents-nav .button-container {
+	display: flex;
+	gap: 1rem;
+	justify-content: space-between;
+	align-items: center;
+	align-self: stretch;
+}
+
+.view-documents-nav .button-container button {
+	flex: 0 0 30%;
+	white-space: nowrap;
+}
+
+.view-documents-nav .button-container button:focus-visible {
+	background-color: var(--action-button-background-colour-hover);
+	outline-color: var(--main-text-colour);
+}
+
+.view-documents-nav
+	.button-container
+	button[aria-disabled='true']:focus-visible {
+	background-color: var(--action-button-disabled-background-colour);
+}
diff --git a/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx
new file mode 100644
index 000000000..930e25e84
--- /dev/null
+++ b/frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx
@@ -0,0 +1,42 @@
+import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
+
+import './DocumentViewBoxNav.css';
+
+interface DocumentViewBoxNavProps {
+	documentIndex: number;
+	documentName: string;
+	numberOfDocuments: number;
+	onPrevious: () => void;
+	onNext: () => void;
+}
+
+function DocumentViewBoxNav({
+	documentIndex,
+	documentName,
+	numberOfDocuments,
+	onPrevious,
+	onNext,
+}: DocumentViewBoxNavProps) {
+	const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`;
+
+	return (
+		<div className="view-documents-nav">
+			<nav className="button-container">
+				<ThemedButton onClick={onPrevious} ariaDisabled={documentIndex <= 0}>
+					<i aria-hidden>◄</i>&nbsp;previous document
+				</ThemedButton>
+				<div className="info">{documentNumber}</div>
+				<ThemedButton
+					onClick={onNext}
+					ariaDisabled={documentIndex >= numberOfDocuments - 1}
+				>
+					next document&nbsp;<i aria-hidden>►</i>
+				</ThemedButton>
+			</nav>
+			<p className="info">{documentName}</p>
+		</div>
+	);
+}
+
+export default DocumentViewBoxNav;
+export type { DocumentViewBoxNavProps };
diff --git a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx
index 9df109e70..1379f5735 100644
--- a/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookAttacks.tsx
@@ -23,7 +23,7 @@ function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
 	return (
 		<article className="handbook-page">
 			<header>
-				<h1>Attacks</h1>
+				<h2>Attacks</h2>
 				<p>{getHeaderText(currentLevel)}</p>
 			</header>
 			{currentLevel > LEVEL_NAMES.LEVEL_1 && (
diff --git a/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx b/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx
deleted file mode 100644
index 4f876c2a9..000000000
--- a/frontend/src/components/HandbookOverlay/HandbookCloseIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-function HandbookIcon() {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="30"
-			height="30"
-			viewBox="0 0 30 30"
-			fill="none"
-		>
-			<rect
-				x="0.5"
-				y="0.5"
-				width="29"
-				height="29"
-				fill="white"
-				stroke="black"
-			/>
-			<path
-				d="M25.0001 6.32074L23.6793 5L15.0001 13.6792L6.32086 5L5 6.32074L13.6793 15L5 23.6793L6.32086 25L15.0001 16.3208L23.6793 25L25.0001 23.6793L16.3209 15L25.0001 6.32074Z"
-				fill="black"
-			/>
-		</svg>
-	);
-}
-
-export default HandbookIcon;
diff --git a/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx b/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx
index 8b9285b5c..23da7c7cb 100644
--- a/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookGlossary.tsx
@@ -11,10 +11,10 @@ function HandbookGlossary({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
 	}
 	return (
 		<article className="handbook-page">
-			<header>
-				<h1>Glossary</h1>
+			<div>
+				<h2>Glossary</h2>
 				<p>{getHeaderText(currentLevel)}</p>
-			</header>
+			</div>
 			{currentLevel > LEVEL_NAMES.LEVEL_1 && (
 				<dl className="handbook-terms">
 					{GLOSSARY.map(({ term, definition }) => (
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.css b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
index 972ad1b04..39fdabf32 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.css
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.css
@@ -1,55 +1,36 @@
 .handbook-overlay {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	height: 85vh;
-	background-color: var(--handbook-background-colour);
-	color: var(--handbook-text-colour);
 	aspect-ratio: 7/8;
 }
 
-.handbook-overlay .close-button {
-	position: absolute;
-	top: 0.25rem;
-	right: 0.25rem;
-}
-
-.handbook-overlay .close-button:hover svg rect {
-	fill: black;
-	stroke: white;
+.handbook-overlay .overlay-header {
+	border-bottom: 0.0625rem solid var(--handbook-spine-separator-colour);
+	border-radius: 0;
 }
 
-.handbook-overlay .close-button:hover svg path {
-	fill: white;
+.handbook-overlay .handbook {
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+	background-color: var(--handbook-background-colour);
+	color: var(--handbook-text-colour);
 }
 
-.handbook-overlay .content {
+.handbook-overlay .handbook-page {
 	overflow-y: auto;
-	margin-top: 3rem;
-	margin-right: 0.5rem;
-	margin-bottom: 0.25rem;
-	padding: 0 1.75rem 0.5rem;
+	padding: 1.75rem;
 
 	/* firefox scrollbar styling */
 	scrollbar-color: var(--handbook-scrollbar-colour) transparent;
 }
 
 /* webkit scrollbar styling */
-.handbook-overlay .content::-webkit-scrollbar-thumb {
+.handbook-overlay .handbook-page::-webkit-scrollbar-thumb {
 	background-color: var(--handbook-scrollbar-colour);
 }
 
-.handbook-overlay .content::-webkit-scrollbar-thumb:hover {
+.handbook-overlay .handbook-page::-webkit-scrollbar-thumb:hover {
 	background-color: var(--handbook-scrollbar-hover-colour);
 }
-
-.handbook-overlay .content h1 {
-	font-size: 1.5rem;
-}
-
-.handbook-overlay .content h2 {
-	font-size: 1.125rem;
-}
-
-.handbook-overlay .content p {
-	font-size: 1rem;
-}
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
index c2203f846..ca99d13ef 100644
--- a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -1,11 +1,11 @@
 import { useRef, useState } from 'react';
 
+import OverlayHeader from '@src/components/Overlay/OverlayHeader';
 import useIsOverflow from '@src/hooks/useIsOverflow';
 import { HANDBOOK_PAGES } from '@src/models/handbook';
 import { LEVEL_NAMES, LevelSystemRole } from '@src/models/level';
 
 import HandbookAttacks from './HandbookAttacks';
-import HandbookCloseIcon from './HandbookCloseIcon';
 import HandbookGlossary from './HandbookGlossary';
 import HandbookSpine from './HandbookSpine';
 import HandbookSystemRole from './HandbookSystemRole';
@@ -44,27 +44,23 @@ function HandbookOverlay({
 
 	return (
 		<div className="handbook-overlay">
-			<button
-				className="prompt-injection-min-button close-button"
-				aria-label="close the handbook"
-				onClick={closeOverlay}
-			>
-				<HandbookCloseIcon />
-			</button>
-			<HandbookSpine
-				currentLevel={currentLevel}
-				currentPage={selectedPage}
-				selectPage={setSelectedPage}
-			/>
-			<div
-				id={`handbook-page-${selectedPage}`}
-				className="content"
-				role="tabpanel"
-				ref={handBookPageContainer}
-				tabIndex={isOverflow ? 0 : undefined}
-				aria-labelledby={`handbook-tab-${selectedPage}`}
-			>
-				{pageContent}
+			<OverlayHeader closeOverlay={closeOverlay} heading="Handbook" />
+			<div className="handbook">
+				<HandbookSpine
+					currentLevel={currentLevel}
+					currentPage={selectedPage}
+					selectPage={setSelectedPage}
+				/>
+				<div
+					id={`handbook-page-${selectedPage}`}
+					className="handbook-page"
+					role="tabpanel"
+					ref={handBookPageContainer}
+					tabIndex={isOverflow ? 0 : undefined}
+					aria-labelledby={`handbook-tab-${selectedPage}`}
+				>
+					{pageContent}
+				</div>
 			</div>
 		</div>
 	);
diff --git a/frontend/src/components/HandbookOverlay/HandbookSpine.css b/frontend/src/components/HandbookOverlay/HandbookSpine.css
index 5111434f0..a60fdd479 100644
--- a/frontend/src/components/HandbookOverlay/HandbookSpine.css
+++ b/frontend/src/components/HandbookOverlay/HandbookSpine.css
@@ -5,7 +5,7 @@
 	max-width: 6rem;
 	padding-top: 3rem;
 	border-right: 0.0625rem solid var(--handbook-spine-separator-colour);
-	background-color: var(--handbook-spine-background-colour);
+	background-color: var(--overlay-header-background-colour);
 	font-size: 1.125rem;
 }
 
@@ -15,15 +15,18 @@
 
 	/* remove default button styling */
 	background: none;
+	font-size: 1rem;
 	text-align: left;
 }
 
 .handbook-spine button:focus-visible {
+	background-color: var(--overlay-tab-colour);
+	outline-color: var(--main-text-colour);
 	outline-offset: -0.25rem;
 }
 
 .handbook-spine button:hover {
-	background-color: var(--handbook-tab-hover-colour);
+	background-color: var(--overlay-tab-colour);
 }
 
 .handbook-spine button[aria-selected='true'] {
diff --git a/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx b/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx
index 1bbb99f9f..8652b19be 100644
--- a/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx
+++ b/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx
@@ -11,13 +11,13 @@ function HandbookSystemRole({
 }) {
 	return (
 		<article className="handbook-page">
-			<header>
-				<h1> System Roles </h1>
+			<div>
+				<h2> System Roles </h2>
 				<p>
 					Here you can review the parameters the bot is working under for each
 					level. You can only review this for levels you have already completed.
 				</p>
-			</header>
+			</div>
 
 			<dl className="handbook-terms">
 				{systemRoles.length !== 0 ? (
diff --git a/frontend/src/components/Overlay/LevelsComplete.css b/frontend/src/components/Overlay/LevelsComplete.css
deleted file mode 100644
index ac34bca27..000000000
--- a/frontend/src/components/Overlay/LevelsComplete.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.levels-complete-overlay {
-	display: flex;
-	flex-direction: column;
-}
-
-.levels-complete-overlay .content {
-	overflow-y: auto;
-}
diff --git a/frontend/src/components/Overlay/LevelsComplete.tsx b/frontend/src/components/Overlay/LevelsComplete.tsx
index 4d460a6ca..f955c78e7 100644
--- a/frontend/src/components/Overlay/LevelsComplete.tsx
+++ b/frontend/src/components/Overlay/LevelsComplete.tsx
@@ -3,8 +3,6 @@ import LevelsCompleteButtons from '@src/components/ThemedButtons/LevelsCompleteB
 import MissionDialogue from './MissionDialogue';
 import Overlay from './Overlay';
 
-import './LevelsComplete.css';
-
 function LevelsComplete({
 	goToSandbox,
 	closeOverlay,
@@ -22,27 +20,24 @@ function LevelsComplete({
 	];
 
 	return (
-		<Overlay closeOverlay={closeOverlay}>
-			<article className="levels-complete-overlay">
-				<h1>Congratulations!</h1>
-				<div className="content">
-					<MissionDialogue dialogueLines={managerDialogue} />
-					<hr />
-					<p>
-						You&apos;ve completed the story mode! You can stay here and continue
-						to play with the levels, or you can move onto Sandbox mode where you
-						can configure your own defence set up and try to break it.
-					</p>
-					<p>
-						You can always switch modes by clicking on the button in the left
-						panel.
-					</p>
-					<LevelsCompleteButtons
-						closeOverlay={closeOverlay}
-						goToSandbox={goToSandbox}
-					/>
-				</div>
-			</article>
+		<Overlay closeOverlay={closeOverlay} heading="Congratulations!">
+			<div className="content">
+				<MissionDialogue dialogueLines={managerDialogue} />
+				<hr />
+				<p>
+					You&apos;ve completed the story mode! You can stay here and continue
+					to play with the levels, or you can move onto Sandbox mode where you
+					can configure your own defence set up and try to break it.
+				</p>
+				<p>
+					You can always switch modes by clicking on the button in the left
+					panel.
+				</p>
+				<LevelsCompleteButtons
+					closeOverlay={closeOverlay}
+					goToSandbox={goToSandbox}
+				/>
+			</div>
 		</Overlay>
 	);
 }
diff --git a/frontend/src/components/Overlay/MissionDialogue.css b/frontend/src/components/Overlay/MissionDialogue.css
index 50539c945..d540ef975 100644
--- a/frontend/src/components/Overlay/MissionDialogue.css
+++ b/frontend/src/components/Overlay/MissionDialogue.css
@@ -1,5 +1,4 @@
 .mission-dialogue h2 {
-	margin-top: 0;
 	margin-bottom: 0;
 	font-weight: bold;
 	font-size: 1.25rem;
diff --git a/frontend/src/components/Overlay/MissionInformation.css b/frontend/src/components/Overlay/MissionInformation.css
index 45fecc8a9..33cc38d25 100644
--- a/frontend/src/components/Overlay/MissionInformation.css
+++ b/frontend/src/components/Overlay/MissionInformation.css
@@ -1,10 +1,7 @@
 .mission-information {
 	display: flex;
 	flex-direction: column;
-}
-
-.mission-information .content {
-	overflow-y: auto;
+	overflow: auto;
 }
 
 .button-area {
diff --git a/frontend/src/components/Overlay/MissionInformation.tsx b/frontend/src/components/Overlay/MissionInformation.tsx
index e00a06a15..7de080504 100644
--- a/frontend/src/components/Overlay/MissionInformation.tsx
+++ b/frontend/src/components/Overlay/MissionInformation.tsx
@@ -14,10 +14,11 @@ function MissionInformation({
 	currentLevel: LEVEL_NAMES;
 	closeOverlay: () => void;
 }) {
+	const heading = `${LEVELS[currentLevel].name} Mission Information`;
+
 	return (
-		<Overlay closeOverlay={closeOverlay}>
+		<Overlay closeOverlay={closeOverlay} heading={heading}>
 			<div className="mission-information">
-				<h1> Mission Information </h1>
 				<div className="content">
 					<MissionDialogue
 						dialogueLines={LEVELS[currentLevel].missionInfoDialogue}
diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css
index db55dba75..f7b346520 100644
--- a/frontend/src/components/Overlay/Overlay.css
+++ b/frontend/src/components/Overlay/Overlay.css
@@ -1,7 +1,8 @@
 .overlay {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 	overflow: visible;
-	overflow-y: auto;
 	box-sizing: border-box;
 	width: 50vw;
 	height: fit-content;
@@ -17,34 +18,15 @@
 	box-sizing: border-box;
 }
 
-.overlay h1 {
-	text-align: center;
+.overlay *:focus-visible {
+	background-color: var(--overlay-tab-colour);
+	outline-color: var(--main-text-colour);
 }
 
 .overlay p {
 	font-size: 1.25rem;
 }
 
-.overlay > .close-button {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	padding: 0.125rem 0.5rem;
-	border: 0.1875rem solid transparent;
-	color: inherit;
-	font-weight: bold;
-	font-size: 1.5rem;
-}
-
-.overlay > .close-button:focus-visible {
-	border-color: var(--main-text-colour);
-}
-
-.overlay > .close-button:hover {
-	color: var(--main-text-colour);
-	text-decoration: none;
-}
-
 .overlay-content {
 	display: flex;
 	overflow: hidden;
diff --git a/frontend/src/components/Overlay/Overlay.tsx b/frontend/src/components/Overlay/Overlay.tsx
index 88b5674a6..4c95a5dde 100644
--- a/frontend/src/components/Overlay/Overlay.tsx
+++ b/frontend/src/components/Overlay/Overlay.tsx
@@ -1,24 +1,21 @@
 import { ReactNode } from 'react';
 
+import OverlayHeader from './OverlayHeader';
+
 import './Overlay.css';
 
 function Overlay({
 	children,
 	closeOverlay,
+	heading,
 }: {
 	children: ReactNode;
 	closeOverlay: () => void;
+	heading: string;
 }) {
 	return (
 		<div className="overlay">
-			<button
-				className="prompt-injection-min-button close-button"
-				onClick={closeOverlay}
-				aria-label="close overlay"
-			>
-				X
-			</button>
-
+			<OverlayHeader closeOverlay={closeOverlay} heading={heading} />
 			<div className="overlay-content">{children}</div>
 		</div>
 	);
diff --git a/frontend/src/components/Overlay/OverlayChoice.css b/frontend/src/components/Overlay/OverlayChoice.css
index 76a73c67f..a1e535769 100644
--- a/frontend/src/components/Overlay/OverlayChoice.css
+++ b/frontend/src/components/Overlay/OverlayChoice.css
@@ -2,4 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
+	overflow: auto;
+	padding: 1rem;
+}
+
+.overlay-choice p {
+	margin-top: 0;
 }
diff --git a/frontend/src/components/Overlay/OverlayChoice.tsx b/frontend/src/components/Overlay/OverlayChoice.tsx
index a2640a8b3..e6bd1f21b 100644
--- a/frontend/src/components/Overlay/OverlayChoice.tsx
+++ b/frontend/src/components/Overlay/OverlayChoice.tsx
@@ -10,14 +10,16 @@ function OverlayChoice({
 	button2,
 	content,
 	closeOverlay,
+	heading,
 }: {
 	button1: OverlayButtonProps;
 	button2: OverlayButtonProps;
 	content: React.ReactNode;
 	closeOverlay: () => void;
+	heading: string;
 }) {
 	return (
-		<Overlay closeOverlay={closeOverlay}>
+		<Overlay closeOverlay={closeOverlay} heading={heading}>
 			<div className="overlay-choice">
 				{content}
 				<OverlayChoiceButtons button1={button1} button2={button2} />
diff --git a/frontend/src/components/Overlay/OverlayCloseIcon.tsx b/frontend/src/components/Overlay/OverlayCloseIcon.tsx
new file mode 100644
index 000000000..01f077d8d
--- /dev/null
+++ b/frontend/src/components/Overlay/OverlayCloseIcon.tsx
@@ -0,0 +1,12 @@
+function OverlayCloseIcon({ iconFill }: { iconFill: string }) {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88">
+			<path
+				fill={iconFill}
+				d="M61.44,0c16.96,0,32.328,6.882,43.453,17.986c11.104,11.125,17.986,26.494,17.986,43.453 c0,16.961-6.883,32.328-17.986,43.453C93.769,115.998,78.4,122.879,61.44,122.879c-16.96,0-32.329-6.881-43.454-17.986 C6.882,93.768,0,78.4,0,61.439C0,44.48,6.882,29.111,17.986,17.986C29.112,6.882,44.48,0,61.44,0L61.44,0z M73.452,39.152 c2.75-2.792,7.221-2.805,9.986-0.026c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.077,12.25 c2.728,2.77,2.689,7.256-0.081,10.021c-2.772,2.766-7.229,2.758-9.954-0.012L61.445,71.541L49.428,83.729 c-2.75,2.793-7.22,2.805-9.985,0.025c-2.763-2.775-2.776-7.291-0.026-10.082L51.48,61.435l-12.078-12.25 c-2.726-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.954,0.013L61.435,51.34L73.452,39.152L73.452,39.152z M96.899,25.98C87.826,16.907,75.29,11.296,61.44,11.296c-13.851,0-26.387,5.611-35.46,14.685 c-9.073,9.073-14.684,21.609-14.684,35.459s5.611,26.387,14.684,35.459c9.073,9.074,21.609,14.686,35.46,14.686 c13.85,0,26.386-5.611,35.459-14.686c9.073-9.072,14.684-21.609,14.684-35.459S105.973,35.054,96.899,25.98L96.899,25.98z"
+			/>
+		</svg>
+	);
+}
+
+export default OverlayCloseIcon;
diff --git a/frontend/src/components/Overlay/OverlayHeader.css b/frontend/src/components/Overlay/OverlayHeader.css
new file mode 100644
index 000000000..7345c528b
--- /dev/null
+++ b/frontend/src/components/Overlay/OverlayHeader.css
@@ -0,0 +1,41 @@
+.overlay-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 5rem;
+	border-top-left-radius: 0.625rem;
+	border-top-right-radius: 0.625rem;
+	background-color: var(--overlay-header-background-colour);
+}
+
+.overlay-header h1 {
+	padding: 0 2rem;
+}
+
+.overlay-header button {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-right: 1rem;
+	padding: 0.5rem;
+	border: 0.0625rem solid var(--main-text-colour-inverted);
+	border-radius: 0.5rem;
+	background-color: inherit;
+	color: var(--main-text-colour-inverted);
+	font-weight: bold;
+	font-size: 1rem;
+}
+
+.overlay-header button:hover {
+	background-color: var(--overlay-tab-colour);
+}
+
+.overlay-header button:focus-visible {
+	background-color: var(--overlay-tab-colour);
+	outline-color: var(--main-text-colour);
+}
+
+.overlay-close-icon {
+	width: 1.25rem;
+	height: 1.25rem;
+}
diff --git a/frontend/src/components/Overlay/OverlayHeader.test.tsx b/frontend/src/components/Overlay/OverlayHeader.test.tsx
new file mode 100644
index 000000000..201ab0a83
--- /dev/null
+++ b/frontend/src/components/Overlay/OverlayHeader.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+
+import OverlayHeader from './OverlayHeader';
+
+const mockCloseOverlay = vi.fn();
+
+describe('Overlay Header component', () => {
+	test('renders the heading text passed in', () => {
+		render(
+			<OverlayHeader heading="Test Header" closeOverlay={mockCloseOverlay} />
+		);
+
+		expect(screen.getByText('Test Header')).toBeInTheDocument();
+	});
+
+	test('renders close button', () => {
+		render(
+			<OverlayHeader heading="Test Header" closeOverlay={mockCloseOverlay} />
+		);
+
+		expect(screen.getByText('close')).toBeInTheDocument();
+	});
+
+	test('clicking the close button closes the modal', async () => {
+		render(
+			<OverlayHeader heading="Test Header" closeOverlay={mockCloseOverlay} />
+		);
+		await userEvent.click(screen.getByRole('button'));
+
+		expect(mockCloseOverlay).toHaveBeenCalledOnce();
+	});
+});
diff --git a/frontend/src/components/Overlay/OverlayHeader.tsx b/frontend/src/components/Overlay/OverlayHeader.tsx
new file mode 100644
index 000000000..d6ce1f223
--- /dev/null
+++ b/frontend/src/components/Overlay/OverlayHeader.tsx
@@ -0,0 +1,28 @@
+import OverlayCloseIcon from './OverlayCloseIcon';
+
+import './OverlayHeader.css';
+
+interface OverlayHeaderProps {
+	closeOverlay: () => void;
+	heading: string;
+	iconColor?: string;
+}
+
+function OverlayHeader({
+	closeOverlay,
+	heading,
+	iconColor = '#000',
+}: OverlayHeaderProps) {
+	return (
+		<header className="overlay-header">
+			<h1>{heading}</h1>
+			<button className="overlay-close-button" onClick={closeOverlay}>
+				close
+				<span className="overlay-close-icon" aria-hidden>
+					<OverlayCloseIcon iconFill={iconColor} />
+				</span>
+			</button>
+		</header>
+	);
+}
+export default OverlayHeader;
diff --git a/frontend/src/components/Overlay/OverlayWelcome.css b/frontend/src/components/Overlay/OverlayWelcome.css
index 8efcce0b9..2061b7919 100644
--- a/frontend/src/components/Overlay/OverlayWelcome.css
+++ b/frontend/src/components/Overlay/OverlayWelcome.css
@@ -1,6 +1,5 @@
 .welcome {
 	overflow-y: auto;
-	margin-top: 2rem;
 	padding: 0 1.5rem;
 }
 
diff --git a/frontend/src/components/Overlay/OverlayWelcome.tsx b/frontend/src/components/Overlay/OverlayWelcome.tsx
index 0693a138b..d20f34e26 100644
--- a/frontend/src/components/Overlay/OverlayWelcome.tsx
+++ b/frontend/src/components/Overlay/OverlayWelcome.tsx
@@ -16,12 +16,12 @@ function OverlayWelcome({
 	closeOverlay: () => void;
 }) {
 	return (
-		<Overlay closeOverlay={closeOverlay}>
+		<Overlay closeOverlay={closeOverlay} heading="Getting Started">
 			<div className="welcome">
 				<div className="project-icon">
 					<ProjectIconDark />
 				</div>
-				<h1>Welcome to Spy Logic!</h1>
+				<h2>Welcome to Spy Logic!</h2>
 				<p>
 					This is an app we developed to teach you about AI chat system security
 					in a playful way. In this game you are playing the role of an
diff --git a/frontend/src/components/Overlay/ResetLevel.tsx b/frontend/src/components/Overlay/ResetLevel.tsx
index ddd5ca543..7ac19b038 100644
--- a/frontend/src/components/Overlay/ResetLevel.tsx
+++ b/frontend/src/components/Overlay/ResetLevel.tsx
@@ -14,21 +14,21 @@ function ResetLevelOverlay({
 	return (
 		<OverlayChoice
 			button1={{
-				children: 'Reset',
+				children: 'Yes, reset',
 				onClick: () => {
 					void resetLevel();
 				},
 			}}
 			button2={{
-				children: 'Cancel',
+				children: 'No, cancel',
 				onClick: closeOverlay,
 			}}
 			content={
 				<>
-					<h1> Reset level </h1>
+					<h2>Do you want to reset your level progress?</h2>
 					<p>
 						{
-							'Warning! This will reset all your chat history and sent emails for this level.'
+							'Resetting will erase all your chat history and sent emails for this level.'
 						}
 						{currentLevel >= LEVEL_NAMES.LEVEL_3 &&
 							' However, any configurations you have made to defences will not be lost.'}
@@ -37,6 +37,7 @@ function ResetLevelOverlay({
 				</>
 			}
 			closeOverlay={closeOverlay}
+			heading="Reset Level"
 		/>
 	);
 }
diff --git a/frontend/src/components/Overlay/ResetProgress.tsx b/frontend/src/components/Overlay/ResetProgress.tsx
index 715a9b1f9..1ee6b006a 100644
--- a/frontend/src/components/Overlay/ResetProgress.tsx
+++ b/frontend/src/components/Overlay/ResetProgress.tsx
@@ -10,26 +10,28 @@ function ResetProgressOverlay({
 	return (
 		<OverlayChoice
 			button1={{
-				children: 'Reset',
+				children: 'Yes, reset',
 				onClick: () => {
 					void resetProgress();
 				},
 			}}
 			button2={{
-				children: 'Cancel',
+				children: 'No, cancel',
 				onClick: closeOverlay,
 			}}
 			content={
 				<>
-					<h1> Reset all progress </h1>
+					<h2>Do you want to reset all progress?</h2>
 					<p>
-						{`Warning! This will reset all your progress in the levels and sandbox mode. 
-							This includes all your conversation history and sent emails. Any configurations you have made to defences in sandbox mode will also be lost.
+						{`Resetting will erase all your progress in the levels and sandbox mode. 
+							This includes all your conversation history and sent emails. 
+							Any configurations you have made to defences in sandbox mode will also be lost.
 							Are you sure you want to do this?`}
 					</p>
 				</>
 			}
 			closeOverlay={closeOverlay}
+			heading="Reset Progress"
 		/>
 	);
 }
diff --git a/frontend/src/components/ThemedButtons/ModeSelectButtons.css b/frontend/src/components/ThemedButtons/ModeSelectButtons.css
index cc19d0f66..0b6192bdb 100644
--- a/frontend/src/components/ThemedButtons/ModeSelectButtons.css
+++ b/frontend/src/components/ThemedButtons/ModeSelectButtons.css
@@ -27,3 +27,7 @@
 .mode-selection-buttons button:hover {
 	background-color: var(--overlay-tab-colour);
 }
+
+.mode-selection-buttons button:focus-visible {
+	background-color: var(--overlay-tab-colour);
+}
diff --git a/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx b/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx
index dc9223487..58989e660 100644
--- a/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx
+++ b/frontend/src/components/ThemedButtons/ModeSelectButtons.tsx
@@ -18,7 +18,7 @@ function ModeSelectButtons({
 	}
 
 	return (
-		<ul className="mode-selection-buttons" aria-label="mode selector">
+		<ul className="mode-selection-buttons">
 			{modeButtons.map((modeButton) => (
 				<li
 					key={modeButton.targetLevel}