diff --git a/src/playground/playground.html b/src/playground/playground.html
index dfad37b..32f64a5 100644
--- a/src/playground/playground.html
+++ b/src/playground/playground.html
@@ -23,6 +23,12 @@
 		flex-direction: column;
 		align-items: center;
 
+		#description {
+			box-sizing: border-box;
+			margin: var(--space-base);
+			padding: var(--space-base);
+		}
+
 		#style-editor {
 			width: 100%;
 			padding: 1rem;
@@ -120,7 +126,8 @@
 			<div class="name"><a href="/">Zackarias Montell</a></div>
 		</div>
 	</div>
-	<p>This is an interactive html and css playground built with minimal JS.</p>
+	<p id="description">This is an interactive HTML and CSS playground built with minimal JS. Alter the HTML and CSS below
+		to preview the changes.</p>
 	<div id="preview"></div>
 	<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
 		oninput="document.getElementById('style').innerHTML = this.value">