diff --git a/libs/@guardian/react-crossword/src/components/Controls.tsx b/libs/@guardian/react-crossword/src/components/Controls.tsx
index ddc11c2ab..a02ecd07d 100644
--- a/libs/@guardian/react-crossword/src/components/Controls.tsx
+++ b/libs/@guardian/react-crossword/src/components/Controls.tsx
@@ -1,3 +1,5 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
 import type { ThemeButton } from '@guardian/source/react-components';
 import { useCallback } from 'react';
 import type { Cell, Progress } from '../@types/crossword';
@@ -66,7 +68,16 @@ const ClueControls = () => {
 	}, [cells, checkCell, currentEntryId]);
 
 	return (
-		<>
+		<div
+			css={css`
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				gap: ${space[1]}px;
+				padding: ${space[1]}px 0;
+			`}
+		>
 			{currentEntryId && (
 				<>
 					<Button onSuccess={clearEntry} theme={crosswordButtonTheme}>
@@ -87,7 +98,7 @@ const ClueControls = () => {
 			<Button onSuccess={clearProgress} theme={crosswordButtonTheme}>
 				Anagram Helper
 			</Button>
-		</>
+		</div>
 	);
 };
 
@@ -129,7 +140,16 @@ const GridControls = () => {
 	}, [cells, checkCell]);
 
 	return (
-		<>
+		<div
+			css={css`
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				gap: ${space[1]}px;
+				padding: ${space[1]}px 0;
+			`}
+		>
 			{solutionAvailable && (
 				<>
 					<Button onSuccess={checkGrid} requireConfirmation={true}>
@@ -143,7 +163,7 @@ const GridControls = () => {
 			<Button onSuccess={clearProgress} requireConfirmation={true}>
 				Clear All
 			</Button>
-		</>
+		</div>
 	);
 };
 
diff --git a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
index 4ff2b08f0..623b500e0 100644
--- a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
@@ -70,8 +70,7 @@ export const MultiplePlayersRow: StoryFn = () => {
 export const CustomLayoutRaw: StoryFn = () => {
 	return (
 		<Crossword data={data} progress={progress}>
-			<Crossword.Grid />
-			<Crossword.Controls />
+			<Crossword.InteractiveGrid />
 			<Crossword.SavedMessage />
 			<Crossword.Clues direction="across" />
 			<Crossword.Clues direction="down" />
@@ -108,10 +107,7 @@ export const CustomisedLayout: StoryFn = () => {
 					/>
 				</div>
 				<div style={{ flexBasis: 496, minWidth: '15em' }}>
-					<Crossword.Grid />
-					<div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
-						<Crossword.Controls />
-					</div>
+					<Crossword.InteractiveGrid />
 					<div
 						style={{
 							fontFamily: 'cursive',
diff --git a/libs/@guardian/react-crossword/src/components/Crossword.tsx b/libs/@guardian/react-crossword/src/components/Crossword.tsx
index b6934c42d..272c14fc2 100644
--- a/libs/@guardian/react-crossword/src/components/Crossword.tsx
+++ b/libs/@guardian/react-crossword/src/components/Crossword.tsx
@@ -5,8 +5,7 @@ import type { Progress, Theme } from '../@types/crossword';
 import { ContextProvider } from '../context/ContextProvider';
 import { useProgress } from '../context/Progress';
 import { Clues } from './Clues';
-import { Controls } from './Controls';
-import { Grid } from './Grid';
+import { InteractiveGrid } from './InteractiveGrid';
 import { Layout } from './Layout';
 
 export type CrosswordProps = {
@@ -59,13 +58,7 @@ export const Crossword = ({
 				{children ?? (
 					<Layout.Wrapper>
 						<Layout.Grid>
-							<Grid />
-							<Layout.Controls>
-								<Controls.Clues />
-							</Layout.Controls>
-							<Layout.Controls>
-								<Controls.Grid />
-							</Layout.Controls>
+							<InteractiveGrid />
 							<Layout.SavedMessage>
 								<SavedMessage />
 							</Layout.SavedMessage>
@@ -87,7 +80,6 @@ export const Crossword = ({
 	);
 };
 
-Crossword.Grid = Grid;
+Crossword.InteractiveGrid = InteractiveGrid;
 Crossword.Clues = Clues;
-Crossword.Controls = Controls;
 Crossword.SavedMessage = SavedMessage;
diff --git a/libs/@guardian/react-crossword/src/components/InteractiveGrid.tsx b/libs/@guardian/react-crossword/src/components/InteractiveGrid.tsx
new file mode 100644
index 000000000..58540be84
--- /dev/null
+++ b/libs/@guardian/react-crossword/src/components/InteractiveGrid.tsx
@@ -0,0 +1,13 @@
+import { memo } from 'react';
+import { Controls } from './Controls';
+import { Grid } from './Grid';
+
+export const InteractiveGrid = memo(() => {
+	return (
+		<>
+			<Grid />
+			<Controls.Clues />
+			<Controls.Grid />
+		</>
+	);
+});
diff --git a/libs/@guardian/react-crossword/src/components/Layout.tsx b/libs/@guardian/react-crossword/src/components/Layout.tsx
index 6bfca7f2d..19377f860 100644
--- a/libs/@guardian/react-crossword/src/components/Layout.tsx
+++ b/libs/@guardian/react-crossword/src/components/Layout.tsx
@@ -2,28 +2,11 @@ import { css } from '@emotion/react';
 import { headlineBold17, space } from '@guardian/source/foundations';
 import { textSans12, textSans14 } from '@guardian/source/foundations';
 import type { ReactNode } from 'react';
-import { useMemo } from 'react';
 import { memo } from 'react';
 import type { Direction } from '../@types/Direction';
-import { useData } from '../context/Data';
 import { useTheme } from '../context/Theme';
-
-const useGridWidth = () => {
-	const { gutter, cellSize } = useTheme();
-	const { dimensions } = useData();
-
-	return useMemo(
-		() => Math.max((cellSize + gutter) * dimensions.cols + gutter, 300),
-		[cellSize, gutter, dimensions.cols],
-	);
-};
-
-const useWidthForCols = (cols: number) => {
-	const gridWidth = useGridWidth();
-	const { clueMinWidth } = useTheme();
-
-	return gridWidth + clueMinWidth * cols + 'px';
-};
+import { useGridWidth } from '../hooks/useGridWidth';
+import { useWidthForCols } from '../hooks/useWidthForCols';
 
 export const Wrapper = memo(({ children }: { children: ReactNode }) => {
 	const { text, clueMaxWidth } = useTheme();
@@ -125,23 +108,6 @@ const CluesHeader = memo(({ direction }: { direction: Direction }) => {
 	);
 });
 
-const Controls = memo(({ children }: { children: ReactNode }) => {
-	return (
-		<div
-			css={css`
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
-				justify-content: flex-start;
-				gap: ${space[1]}px;
-				padding: ${space[1]}px 0;
-			`}
-		>
-			{children}
-		</div>
-	);
-});
-
 const SavedMessage = memo(({ children }: { children: ReactNode }) => {
 	const theme = useTheme();
 
@@ -163,6 +129,5 @@ export const Layout = {
 	Grid,
 	Clues,
 	CluesHeader,
-	Controls,
 	SavedMessage,
 };
diff --git a/libs/@guardian/react-crossword/src/hooks/useGridWidth.ts b/libs/@guardian/react-crossword/src/hooks/useGridWidth.ts
new file mode 100644
index 000000000..65d7bd2b0
--- /dev/null
+++ b/libs/@guardian/react-crossword/src/hooks/useGridWidth.ts
@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useData } from '../context/Data';
+import { useTheme } from '../context/Theme';
+
+export const useGridWidth = () => {
+	const { gutter, cellSize } = useTheme();
+	const { dimensions } = useData();
+
+	return useMemo(
+		() => Math.max((cellSize + gutter) * dimensions.cols + gutter, 300),
+		[cellSize, gutter, dimensions.cols],
+	);
+};
diff --git a/libs/@guardian/react-crossword/src/hooks/useWidthForCols.ts b/libs/@guardian/react-crossword/src/hooks/useWidthForCols.ts
new file mode 100644
index 000000000..2662d47ee
--- /dev/null
+++ b/libs/@guardian/react-crossword/src/hooks/useWidthForCols.ts
@@ -0,0 +1,9 @@
+import { useTheme } from '../context/Theme';
+import { useGridWidth } from './useGridWidth';
+
+export const useWidthForCols = (cols: number) => {
+	const gridWidth = useGridWidth();
+	const { clueMinWidth } = useTheme();
+
+	return gridWidth + clueMinWidth * cols + 'px';
+};