diff --git a/src/core/GameStateManager.js b/src/core/GameStateManager.js
index c71243e..678eab2 100644
--- a/src/core/GameStateManager.js
+++ b/src/core/GameStateManager.js
@@ -27,11 +27,13 @@ class GameStateManagerClass {
   }
 
   #gameLoopInitialized = Promise.withResolvers();
+
   get gameLoopInitialized() {
     return this.#gameLoopInitialized.promise;
   }
 
   #rosterLoaded = Promise.withResolvers();
+
   get rosterLoaded() {
     return this.#rosterLoaded.promise;
   }
@@ -103,6 +105,12 @@ class GameStateManagerClass {
   }
 
   startNewGame() {
+    // Clear roster for a fresh start
+    this.rosterManager.clear();
+    // Clear any active run data
+    this.activeRunData = null;
+    // Save the cleared roster
+    this._saveRoster();
     this.transitionTo(GameStateManagerClass.STATES.TEAM_BUILDER);
   }
 
@@ -125,6 +133,8 @@ class GameStateManagerClass {
       });
       this._saveRoster();
     }
+    // We must transition to deployment before initializing the run so that the game loop gets set.
+    this.transitionTo(GameStateManagerClass.STATES.DEPLOYMENT);
     // Will transition to DEPLOYMENT after run is initialized
     await this._initializeRun(e.detail.squad);
   }
@@ -170,8 +180,6 @@ class GameStateManagerClass {
     // Give GameLoop a reference to GameStateManager so it can notify about state changes
     this.gameLoop.gameStateManager = this;
     await this.gameLoop.startLevel(this.activeRunData);
-    // Transition to deployment state after level is initialized
-    this.transitionTo(GameStateManagerClass.STATES.DEPLOYMENT);
   }
 
   async _resumeRun() {
diff --git a/src/index.js b/src/index.js
index 5bbfff6..36a5d61 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,7 @@ window.addEventListener("gamestate-changed", async (e) => {
       break;
     case "STATE_DEPLOYMENT":
     case "STATE_COMBAT":
+      import("./ui/game-viewport.js");
       loadingMessage.textContent = "INITIALIZING GAME ENGINE...";
       break;
   }
diff --git a/src/managers/RosterManager.js b/src/managers/RosterManager.js
index 61985e5..b1a1be6 100644
--- a/src/managers/RosterManager.js
+++ b/src/managers/RosterManager.js
@@ -69,4 +69,12 @@ export class RosterManager {
   getDeployableUnits() {
     return this.roster.filter((u) => u.status === "READY");
   }
+
+  /**
+   * Clears the roster and graveyard. Used when starting a new game.
+   */
+  clear() {
+    this.roster = [];
+    this.graveyard = [];
+  }
 }
diff --git a/src/ui/combat-hud.js b/src/ui/combat-hud.js
index 028dbb9..e39a4ad 100644
--- a/src/ui/combat-hud.js
+++ b/src/ui/combat-hud.js
@@ -98,4 +98,3 @@ export class CombatHUD extends LitElement {
 }
 
 customElements.define("combat-hud", CombatHUD);
-