diff --git a/src/app.js b/src/app.js
index 2f9e67a..ab86312 100644
--- a/src/app.js
+++ b/src/app.js
@@ -147,6 +147,7 @@ const elements = {
 	previewSection: document.querySelector(".preview-section"),
 	prevBtn: document.getElementById("prev-btn"),
 	nextBtn: document.getElementById("next-btn"),
+	gameControls: document.querySelector(".game-controls"),
 	levelIndicator: document.getElementById("level-indicator"),
 	headerLevelPill: document.getElementById("header-level-pill"),
 
@@ -708,9 +709,10 @@ function updateNavigationButtons() {
 	const engineState = lessonEngine.getCurrentState();
 	const isPlayground = engineState.lesson?.mode === "playground";
 
-	// Hide nav buttons in playground mode
+	// Hide nav buttons and center controls in playground mode
 	elements.prevBtn.classList.toggle("hidden", isPlayground);
 	elements.nextBtn.classList.toggle("hidden", isPlayground);
+	elements.gameControls?.classList.toggle("centered", isPlayground);
 
 	if (!isPlayground) {
 		elements.prevBtn.disabled = !engineState.canGoPrev;
diff --git a/src/main.css b/src/main.css
index 2d3954a..da4d04e 100644
--- a/src/main.css
+++ b/src/main.css
@@ -891,6 +891,10 @@ kbd {
 	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08);
 }
 
+.game-controls.centered {
+	justify-content: center;
+}
+
 /* ================= SIDEBAR ================= */
 .sidebar-backdrop {
 	position: fixed;