diff --git a/web-svelte/src/components/Board.svelte b/web-svelte/src/components/Board.svelte
index 282ca68..8956e17 100644
--- a/web-svelte/src/components/Board.svelte
+++ b/web-svelte/src/components/Board.svelte
@@ -95,18 +95,19 @@ function calculateMidNumber(row: number, col: number) {
 		</Hexagon>
 	</div>
 	<div class="warp-gate inner-grid"></div>
-	{#each Array(5) as _, r}
-	<div class="main-row {r % 2 == 1 ? `row-reverse` : ``}">
-		{#each Array(10) as _, c}
+	{#each Array(5) as _, row}
+	<div class="main-row {row % 2 == 1 ? `row-reverse` : ``}">
+		{#each Array(10) as _, col}
+		{@const boardIndex = col + (( row * 10 ) + (1 * row))}
 		<div>
 			<Hexagon>
-				{#if board[calculateMidNumber(r, c)] != null}
+				{#if board[boardIndex] != null}
 				<div
 					class="spaceship-icon"
-					style="--colour: {board[calculateMidNumber(r, c)].colour.hex};"
+					style="--colour: {board[boardIndex].colour.hex};"
 				>
 					<Spaceship
-						spaceship="{board[calculateMidNumber(r, c)].ship.id}"
+						spaceship="{board[boardIndex].ship.id}"
 					/>
 				</div>
 				{/if}