diff --git a/web-svelte/src/views/movement.svelte b/web-svelte/src/views/movement.svelte
index b860285..deb56f3 100644
--- a/web-svelte/src/views/movement.svelte
+++ b/web-svelte/src/views/movement.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
+import ShipsMoving from "../components/ShipsMoving.svelte";
 import PlayerHand from "../components/PlayerHand.svelte";
 import Board from "../components/Board.svelte";
 import { board } from "../stores";
 
+const controlsState: string = "player-order";
+
 const notice = {
 	visible: false,
 	message: null,
@@ -48,11 +51,17 @@ function previewBoard(e: any) {
 		</div>
 	</div>
 	{/if}
-	<div id="player-hand">
+	{#if controlsState == "player-hand"}
+	<div id="player-controls">
 		<PlayerHand
 			on:hover="{previewBoard}"
 		/>
 	</div>
+	{:else if controlsState == "player-order"}
+	<div id="player-controls">
+		<ShipsMoving />
+	</div>
+	{/if}
 </main>
 
 
@@ -106,7 +115,7 @@ main {
 	}
 }
 
-#player-hand {
+#player-controls {
 	grid-column: 2 / 3;
 	grid-row: 4 / 5;
 }