diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index a579f16..562cdf9 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -54,6 +54,10 @@
 								Tema Gelap
 							{/if}
 						</button>
+						<a href="/playground" class="dropdown-item" onclick={() => (showDropdown = false)}>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+							Playground
+						</a>
 						<a href="/help" target="_blank" class="dropdown-item" onclick={() => (showDropdown = false)}>
 							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
 							Bantuan
diff --git a/frontend/src/routes/playground/+page.svelte b/frontend/src/routes/playground/+page.svelte
index e176808..8dbb888 100644
--- a/frontend/src/routes/playground/+page.svelte
+++ b/frontend/src/routes/playground/+page.svelte
@@ -276,10 +276,16 @@
 <svelte:head>
 	<title>Developer Playground — Elemes</title>
 	<style>
-		/* Override root container constrainer — playground is full viewport */
+		/* Override root container constrainer — playground is full viewport.
+		   main.container default-nya display:block + height auto, jadi anak
+		   .playground-page{height:100%} cuma ngisi tinggi intrinsic-nya.
+		   Jadikan flex-column agar playground memenuhi ruang sisa setelah navbar. */
 		main.container {
+			display: flex;
+			flex-direction: column;
 			max-width: none !important;
 			padding-inline: 0 !important;
+			min-height: 0;
 		}
 	</style>
 </svelte:head>
@@ -419,7 +425,8 @@
 <style>
 	.playground-page {
 		width: 100%;
-		height: 100%;
+		flex: 1;
+		min-height: 0;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
@@ -483,6 +490,7 @@
 		min-height: 0;
 		overflow: hidden;
 		display: flex;
+		flex-direction: column;
 	}
 
 	.pg-iframe {
@@ -502,15 +510,16 @@
 		overflow: hidden;
 	}
 
-	/* Override CircuitEditor agar fill flex area */
+	/* Override CircuitEditor agar fill ruang kosong di desktop */
 	.pg-content :global(.circuit-container) {
 		flex: 1;
 		min-height: 0;
+		height: 100%;
 	}
 
 	.pg-content :global(.circuit-wrapper) {
-		flex: 1;
-		height: auto;
+		flex: 1 1 auto;
+		height: 100%;
 		min-height: 0;
 	}
 
@@ -651,6 +660,7 @@
 	.pg-content :global(.flowchart-container) {
 		flex: 1;
 		min-height: 0;
+		height: 100%;
 	}
 
 	/* ── Mobile ── */