diff --git a/web-svelte/src/components/Board.svelte b/web-svelte/src/components/Board.svelte
index 768cc3c..2a2fa0e 100644
--- a/web-svelte/src/components/Board.svelte
+++ b/web-svelte/src/components/Board.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 import Spaceship from "./icons/spaceship.svelte";
 import Warpgate from "./icons/warpgate.svelte";
+import { board, players } from "../stores";
 import Hexagon from "./Hexagon.svelte";
-import { board } from "../stores";
 
 const ship = `space-shuttle`
 // board[5] = {colour: {name: "Green",hex: `#00aa00`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
@@ -21,13 +21,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 	<div class="singularity inner-grid"></div>
 	<div class="side-hex right-down-1 inner-grid">
 		<Hexagon>
-			{#if board[10] != null}
+			{#if $players[$board[10]] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {board[10].colour.hex};"
+				style="--colour: {$players[$board[10]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{board[10].ship.id}"
+					spaceship="{$players[$board[10]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -35,13 +35,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 	</div>
 	<div class="side-hex left-down-1 inner-grid">
 		<Hexagon>
-			{#if board[21] != null}
+			{#if $players[$board[21]] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {board[21].colour.hex};"
+				style="--colour: {$players[$board[21]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{board[21].ship.id}"
+					spaceship="{$players[$board[21]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -49,13 +49,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 	</div>
 	<div class="side-hex right-down-2 inner-grid">
 		<Hexagon>
-			{#if board[32] != null}
+			{#if $players[$board[32]] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {board[32].colour.hex};"
+				style="--colour: {$players[$board[32]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{board[32].ship.id}"
+					spaceship="{$players[$board[32]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -63,13 +63,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 	</div>
 	<div class="side-hex left-down-2 inner-grid">
 		<Hexagon>
-			{#if board[43] != null}
+			{#if $players[$board[43]] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {board[43].colour.hex};"
+				style="--colour: {$players[$board[43]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{board[43].ship.id}"
+					spaceship="{$players[$board[43]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -84,13 +84,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 		{@const boardIndex = col + (( row * 10 ) + (1 * row))}
 		<div>
 			<Hexagon>
-				{#if board[boardIndex] != null}
+				{#if $players[$board[boardIndex]] != null}
 				<div
 					class="spaceship-icon"
-					style="--colour: {board[boardIndex].colour.hex};"
+					style="--colour: {$players[$board[boardIndex]].colour.hex};"
 				>
 					<Spaceship
-						spaceship="{board[boardIndex].ship.id}"
+						spaceship="{$players[$board[boardIndex]].ship.id}"
 					/>
 				</div>
 				{/if}