diff --git a/web-svelte/src/components/Player.svelte b/web-svelte/src/components/Player.svelte
index 48cc909..588dfd6 100644
--- a/web-svelte/src/components/Player.svelte
+++ b/web-svelte/src/components/Player.svelte
@@ -2,9 +2,10 @@
 import SciFiButton from "./SciFi-Button.svelte";
 import { createEventDispatcher } from "svelte";
 import { myName, isHost } from "../stores";
+import type { IColour } from "common";
 
 export let name: string;
-export let colour: string;
+export let colour: IColour;
 
 const emit = createEventDispatcher();
 
@@ -22,11 +23,11 @@ let canLeave = $isHost || name == $myName;
 	<!-- The player's change Colour button -->
 	{#if $myName == name}
 		<SciFiButton
-			background="{colour}"
+			background="{colour.hex}"
 			on:click={changeColour}
 			height="60px"
 			width="60px"
-			hoverBackground="{colour}"
+			hoverBackground="{colour.hex}"
 		>
 			<div style="display: flex; align-items: center; justify-content: center;">
 				<img
diff --git a/web-svelte/src/components/modals/ShipDesigner.svelte b/web-svelte/src/components/modals/ShipDesigner.svelte
index fb0cb69..2257b35 100644
--- a/web-svelte/src/components/modals/ShipDesigner.svelte
+++ b/web-svelte/src/components/modals/ShipDesigner.svelte
@@ -16,8 +16,8 @@ let player = $players.find(p => p.name == $myName);
 $: myColour = player.colour;
 $: takenColours = $players.map(p => p.colour);
 
-var selectedColour = player.colour;
-var selectedShip = player.ship;
+var selectedColour = player.colour.hex;
+var selectedShip = player.ship.id;
 var error = null;
 
 function saveShipDesign() {
@@ -74,8 +74,8 @@ function saveShipDesign() {
 							<option
 								value="{c.hex}"
 								disabled="{
-									c.hex != myColour
-									&& takenColours.includes(c.hex)
+									c.hex != myColour.hex
+									&& takenColours.includes(c)
 								}"
 							>
 								{c.name}