diff --git a/TODO.txt b/TODO.txt
index 995e2de38..3e4d0c4cd 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -45,7 +45,8 @@
 * try vintage theme DONE 8/24/2023
 * BUG: fix hotreload (priority queue breaks it) DONE 8/24/2024
 * improve menu (keep highlighted when click, allow deselect lobby) DONE 8/25/2024
-* give time to (re) spawn at start of game
+* give time to (re) spawn at start of game DONE 8/25/2024
+* show bar for long to respawn
 * store & delay tile updates for lag compensation
 * add shader to dim border
 * REFACTOR: remove player.info()
diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts
index 41580c8b9..3b6b21557 100644
--- a/src/client/ClientGame.ts
+++ b/src/client/ClientGame.ts
@@ -16,7 +16,7 @@ export function createClientGame(name: string, clientID: ClientID, gameID: GameI
     let eventBus = new EventBus()
     let game = createGame(terrainMap, eventBus, config)
     let terrainRenderer = new TerrainRenderer(game)
-    let gameRenderer = new GameRenderer(game, config.theme(), terrainRenderer)
+    let gameRenderer = new GameRenderer(game, terrainRenderer)
 
     return new ClientGame(
         name,
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index a4c73ec40..8cf17e96b 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -23,9 +23,11 @@ export class GameRenderer {
 
 
 	private nameRenderer: NameRenderer;
+	private theme: Theme
 
-	constructor(private gs: Game, private theme: Theme, private terrainRenderer: TerrainRenderer) {
-		this.nameRenderer = new NameRenderer(gs, theme)
+	constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
+		this.theme = gs.config().theme()
+		this.nameRenderer = new NameRenderer(gs, this.theme)
 	}
 
 	initialize() {
@@ -71,6 +73,10 @@ export class GameRenderer {
 		this.context.fillStyle = this.theme.backgroundColor().toHex();
 		this.context.fillRect(0, 0, this.gs.width(), this.gs.height());
 
+		// Save the current context state
+		this.context.save();
+
+
 		// Disable image smoothing for pixelated effect
 		if (this.scale > 3) {
 			this.context.imageSmoothingEnabled = false;
@@ -101,9 +107,32 @@ export class GameRenderer {
 		const [upperLeft, bottomRight] = this.boundingRect()
 		this.nameRenderer.render(this.context, this.scale, upperLeft, bottomRight)
 
+		this.context.restore()
+
+		this.renderUIBar()
+
+
 		requestAnimationFrame(() => this.renderGame());
 	}
 
+	renderUIBar() {
+		if (!this.gs.inSpawnPhase()) {
+			return
+		}
+
+		const barHeight = 15;
+		const barBackgroundWidth = this.canvas.width;
+
+		const ratio = this.gs.ticks() / this.gs.config().numSpawnPhaseTurns()
+
+		// Draw bar background
+		this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+		this.context.fillRect(0, 0, barBackgroundWidth, barHeight);
+
+		this.context.fillStyle = 'rgba(0, 128, 255, 0.7)';
+		this.context.fillRect(0, 0, barBackgroundWidth * ratio, barHeight);
+	}
+
 	tick() {
 		this.nameRenderer.tick()
 	}
diff --git a/src/client/index.html b/src/client/index.html
index 1c1fff888..27cacc53c 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -21,7 +21,7 @@
 			</button>
 		</div>
 		<div id="dev-log">
-			<h4>DEVLOG: 8/18/2024 - 8/25/2024</h4>
+			<h4>DEVLOG: 8/18/2024 - 8/26/2024</h4>
 			<ul id="dev-log">
 				<li>Create dev server at <a href="https://www.openfront.dev">openfront.dev</a></li>
 				<li>fix invert zoom</li>
@@ -39,6 +39,7 @@
 				<li>Make lobby background the terrain map</li>
 				<li>Created favicon</li>
 				<li>improve menu (keep highlighted when click, allow deselect lobby)</li>
+				<li>Can respawn at start of game</li>
 			</ul>
 		</div>
 	</div>
diff --git a/src/client/styles.css b/src/client/styles.css
index e37864614..6994f38c5 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -44,7 +44,7 @@ h1 {
 #username {
     width: 100%;
     padding: 15px;
-    font-size: 18px;
+    font-size: 24px;
     border: 2px solid #007bff;
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.8);
@@ -57,8 +57,8 @@ h1 {
 
 
 .lobby-button {
-    width: 500px;
-    height: 500px;
+    width: 400px;
+    height: 400px;
     font-size: 24px;
     font-weight: bold;
     border: 3px solid #007bff;
diff --git a/src/core/GameImpl.ts b/src/core/GameImpl.ts
index 39cd94688..a6dcae1e3 100644
--- a/src/core/GameImpl.ts
+++ b/src/core/GameImpl.ts
@@ -256,7 +256,7 @@ export class GameImpl implements MutableGame {
     }
 
     inSpawnPhase(): boolean {
-        return this._ticks <= this.config().turnsUntilGameStart()
+        return this._ticks <= this.config().numSpawnPhaseTurns()
     }
 
     ticks(): number {
diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts
index 78abdd62e..627475879 100644
--- a/src/core/configuration/Config.ts
+++ b/src/core/configuration/Config.ts
@@ -21,7 +21,7 @@ export interface Config {
 	gameCreationRate(): number
 	lobbyLifetime(): number
 	numBots(): number
-	turnsUntilGameStart(): number
+	numSpawnPhaseTurns(): number
 }
 
 export interface PlayerConfig {
diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts
index 0d0ea5283..0274a3a77 100644
--- a/src/core/configuration/DefaultConfig.ts
+++ b/src/core/configuration/DefaultConfig.ts
@@ -7,7 +7,7 @@ import {vintageTheme} from "./VintageTheme";
 
 
 export class DefaultConfig implements Config {
-    turnsUntilGameStart(): number {
+    numSpawnPhaseTurns(): number {
         return 100
     }
     numBots(): number {
diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts
index c9912bc8c..0948f3c26 100644
--- a/src/core/configuration/DevConfig.ts
+++ b/src/core/configuration/DevConfig.ts
@@ -3,7 +3,7 @@ import {PlayerConfig} from "./Config";
 import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig";
 
 export const devConfig = new class extends DefaultConfig {
-    turnsUntilGameStart(): number {
+    numSpawnPhaseTurns(): number {
         return 100
     }
     gameCreationRate(): number {
diff --git a/src/core/execution/AttackExecution.ts b/src/core/execution/AttackExecution.ts
index 323e2fd2d..72262eac5 100644
--- a/src/core/execution/AttackExecution.ts
+++ b/src/core/execution/AttackExecution.ts
@@ -71,7 +71,7 @@ export class AttackExecution implements Execution {
         if (!this.active) {
             return
         }
-        if (ticks < this.mg.config().turnsUntilGameStart()) {
+        if (ticks < this.mg.config().numSpawnPhaseTurns()) {
             return
         }
 
diff --git a/src/core/execution/BotExecution.ts b/src/core/execution/BotExecution.ts
index 4fe464f7b..e27386cb6 100644
--- a/src/core/execution/BotExecution.ts
+++ b/src/core/execution/BotExecution.ts
@@ -28,7 +28,7 @@ export class BotExecution implements Execution {
 
     tick(ticks: number) {
 
-        if (ticks < this.mg.config().turnsUntilGameStart()) {
+        if (ticks < this.mg.config().numSpawnPhaseTurns()) {
             return
         }
 
diff --git a/src/core/execution/PlayerExecution.ts b/src/core/execution/PlayerExecution.ts
index 446caf79d..2fcd9e2e6 100644
--- a/src/core/execution/PlayerExecution.ts
+++ b/src/core/execution/PlayerExecution.ts
@@ -19,7 +19,7 @@ export class PlayerExecution implements Execution {
     }
 
     tick(ticks: number) {
-        if (ticks < this.config.turnsUntilGameStart()) {
+        if (ticks < this.config.numSpawnPhaseTurns()) {
             return
         }
         this.player.setTroops(this.config.player().troopAdditionRate(this.player))
diff --git a/src/core/execution/SpawnExecution.ts b/src/core/execution/SpawnExecution.ts
index a02bfa3e5..50a0dbc6f 100644
--- a/src/core/execution/SpawnExecution.ts
+++ b/src/core/execution/SpawnExecution.ts
@@ -23,7 +23,7 @@ export class SpawnExecution implements Execution {
             return
         }
 
-        if (ticks >= this.mg.config().turnsUntilGameStart()) {
+        if (ticks >= this.mg.config().numSpawnPhaseTurns()) {
             this.active = false
             return
         }