diff --git a/src/assets/base.css b/src/assets/base.css
index 35cdb22..a6e6280 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -3,7 +3,51 @@
 	--color-accent: #00FFFF;
 	--color-text: #FFF;
 
+	--content-width: 800px;
+
 	--font-size-base: 18px;
 	--line-height-base: 26px;
 	--font-family: monospace;
+
+	--space-base: 1rem;
+}
+
+.banner {
+	margin-top: 1rem;
+	width: 100%;
+	height: 40px;
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 1rem;
+	align-items: center;
+	flex: 1;
+	font-family: monospace;
+}
+
+.banner {
+	.title {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+
+		.name {
+			color: #1c1b28;
+			background-color: #00FFFF;
+			white-space: nowrap;
+			padding: 5px;
+
+			a {
+				color: unset;
+				text-decoration: none;
+			}
+		}
+	}
+
+	.title::after {
+		background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+		content: "";
+		display: block;
+		width: 100%;
+		margin-left: 10px;
+	}
 }
diff --git a/src/index.ts b/src/index.ts
index 3f13bf3..23ccf86 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,9 +36,9 @@ new ToolchainBuilder(paths)
           path: "src/assets/base.css"
         },
         {
-          path: "src/playground/dropdown.html",
+          path: "src/playground/playground.html",
           menuEntry: true,
-          nameOverride: "Dropdown playground"
+          nameOverride: "CSS/HTML playground"
         }
       ],
     }),
diff --git a/src/playground/dropdown.html b/src/playground/dropdown.html
deleted file mode 100644
index 4ea1af4..0000000
--- a/src/playground/dropdown.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<html>
-<meta>
-<link href="base.css" rel="stylesheet" />
-<style>
-	body {
-		background-color: var(--color-background);
-		font-size: 18px;
-		display: flex;
-		flex: 1;
-		color: var(--color-text);
-
-		#css-container {
-			pre {
-				style {
-					display: block;
-				}
-			}
-		}
-	}
-</style>
-
-</meta>
-
-<body>
-	<div id="css-container">
-		<pre>
-			<style contenteditable="true">
-				#html-container {
-					background-color: brown;
-				}
-			</style>
-		</pre>
-	</div>
-	<div id="html-container" contenteditable="true">
-	</div>
-	<div id="render-container"></div>
-</body>
-
-</html>
diff --git a/src/playground/playground.html b/src/playground/playground.html
new file mode 100644
index 0000000..a7b96d4
--- /dev/null
+++ b/src/playground/playground.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<meta>
+<link href="base.css" rel="stylesheet" />
+<style>
+	html {
+		line-height: var(--line-height-base);
+		font-size: 18px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-family: var(--font-family);
+	}
+
+	body {
+		max-width: var(--content-width);
+		background-color: var(--color-background);
+		color: var(--color-text);
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: center;
+
+		#style-editor {
+			width: 100%;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			box-sizing: border-box;
+		}
+
+		#html-editor {
+			width: 100%;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			box-sizing: border-box;
+		}
+
+		#preview {
+			width: 100%;
+			box-sizing: border-box;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			justify-content: center;
+			align-items: center;
+		}
+	}
+</style>
+<style id="style">
+	.square {
+		height: 150px;
+		width: 150px;
+		background-color: #553FF3;
+		color: white;
+		font-weight: bold;
+		font-size: 3rem;
+		position: ;
+		border-radius: 30px;
+		border-top-left-radius: 5px;
+
+	}
+
+	span {
+		display: block;
+		position: relative;
+		top: 100px;
+		left: 45px;
+	}
+</style>
+<div id="markup" aria-hidden="true" hidden="true" style="display: none;">
+	<div class="square"><span>CSS</span></div>
+</div>
+<script type="text/javascript">
+	window.onload = function () {
+		const style = document.getElementById('style').innerHTML;
+		const formattedStyle = style.split("\n").reduce((agg, curr) => {
+			console.log(curr)
+			if (curr === "") return agg;
+			const line = curr.replace('\t', '').replaceAll('\t', '  ');
+			if (agg.length === 0) return line;
+			return agg + "\n" + line;;
+		}, "");
+		console.log(formattedStyle)
+		document.getElementById('style-editor').value = formattedStyle;
+		document.getElementById('style').innerHTML = formattedStyle;
+
+		const markup = document.getElementById('markup').innerHTML;
+		const formattedMarkup = markup.replace('\t', '').replaceAll('\t', '  ').split('\n').filter(line => line !== '').join('\n');
+		document.getElementById('html-editor').value = formattedMarkup;
+		document.getElementById('preview').innerHTML = formattedMarkup;
+	}
+</script>
+</meta>
+
+<body>
+	<div class="banner">
+		<div class="title">
+			<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>
+	<div id="preview"></div>
+	<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
+		oninput="document.getElementById('style').innerHTML = this.value">
+	</textarea>
+	<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
+		autocomplete="false" autocorrect="false" id="style-editor">
+	</textarea>
+</body>
+
+</html>
diff --git a/src/templates/404.html b/src/templates/404.html
index 9857560..dce71aa 100644
--- a/src/templates/404.html
+++ b/src/templates/404.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-    </div>
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Page Not Found</title>
+</head>
+
+<body>
+  <div id="message">
+    <h2>404</h2>
+    <h1>Page Not Found</h1>
+    <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+  </div>
+</body>
+
 </html>
diff --git a/src/templates/index.html b/src/templates/index.html
index 47ae13b..c9d98d4 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -85,46 +85,6 @@
     }
 
     .profile li {}
-
-    .banner {
-      margin-top: 1rem;
-      width: 100%;
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 1rem;
-      align-items: center;
-      flex: 1;
-      font-family: monospace;
-    }
-
-    .banner {
-      .title {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-
-        .name {
-          color: #1c1b28;
-          background-color: #00FFFF;
-          white-space: nowrap;
-          padding: 5px;
-
-          a {
-            color: unset;
-            text-decoration: none;
-          }
-        }
-      }
-
-      .title::after {
-        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-        content: "";
-        display: block;
-        width: 100%;
-        margin-left: 10px;
-      }
-    }
   </style>
 </head>
 
diff --git a/src/templates/note.html b/src/templates/note.html
index 0003d97..e71e1ea 100644
--- a/src/templates/note.html
+++ b/src/templates/note.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <link href="base.css" rel="stylesheet" />
   <style>
     html {
       font-family: monospace;
@@ -82,46 +83,6 @@
       margin-top: 0px;
     }
 
-    .banner {
-      margin-top: 1rem;
-      width: 100%;
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 1rem;
-      align-items: center;
-      flex: 1;
-      font-family: monospace;
-    }
-
-    .banner {
-      .title {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-
-        .name {
-          color: #1c1b28;
-          background-color: #00FFFF;
-          white-space: nowrap;
-          padding: 5px;
-
-          a {
-            color: unset;
-            text-decoration: none;
-          }
-        }
-      }
-
-      .title::after {
-        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-        content: "";
-        display: block;
-        width: 100%;
-        margin-left: 10px;
-      }
-    }
-
     a {
       color: #00FFFF;
     }
