diff --git a/index.html b/index.html
index 1e2cab8..da2ad97 100644
--- a/index.html
+++ b/index.html
@@ -11,28 +11,38 @@
     <script src="./index.js" defer></script>
 </head>
 <body>
-
-
-    <div id="buttons">
-        <button id="start-stop">Start</button>
-        <button id="save">Save</button>
-    </div>
-
     <main>
 
-        <div id="dashboard">
+		<div class="column" style="flex: 1">
 
-            <canvas id="canvas-area">
-            </canvas>
+			<section>
+				<div class="section-header">Output</div>
 
-            <div id="console">
-                <pre><code id="console-code">Karlkode 1.0</code></pre>
-                <input type="text" placeholder=">">
-            </div>
+				<canvas id="canvas-area">
+				</canvas>
+			</section>
+
+			<section>
+				<div class="section-header">Console</div>
+
+				<div id="console">
+					<pre><code id="console-code">Karlkode 1.0</code></pre>
+					<input type="text" placeholder=">">
+				</div>
+			</section>
         </div>
 
-        <div id="editor-area">
-            <pre id="editor">
+		<div class="column" style="flex: 3">
+			<div>
+				<button id="start-stop">Start</button>
+				<button id="save">Save</button>
+			</div>
+
+			<section>
+				<div class="section-header">Code editor</div>
+
+				<div id="editor-area">
+					<pre id="editor">
 
 lib.clear("green");
 
@@ -53,7 +63,9 @@ lib.startGameLoop(loop);
 
 return 5;
 </pre>
-        </div>
+				</div>
+			</section>
+		</div>
 
 
     </main>
diff --git a/style.css b/style.css
index 033cdc0..43e2252 100644
--- a/style.css
+++ b/style.css
@@ -1,81 +1,114 @@
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 body {
-  margin: 0;
-  height: 100vh;
+	margin: 0;
+	height: 100vh;
+	background-color: #EEE;
 }
 
 main {
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
+	display: flex;
+	flex-direction: row;
+	height: 100vh;
+	gap: 32px;
 }
 
-#buttons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: end;
-  align-items: center;
-  gap: 10px;
+.section-header {
+	background-color: white;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	border: 1px solid #BDBDBD;
+	padding: 4px;
+	padding-left: 8px;
+	font-family: sans-serif;
+	color: #747474;
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
 }
 
-#buttons button {
-  margin: 5px;
-  padding: 10px;
-  min-width: 100px;
+section {
+	width: 100%;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 }
 
-#dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  width: 40vw;
-  justify-content: space-evenly;
-  align-items: center;
+section *:last-child {
+	border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
+	flex: 1;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	justify-content: space-evenly;
+	align-items: flex-start;
+	padding: 32px;
+	gap: 32px;
+	height: 100vh;
+	flex: 1;
 }
 
 canvas {
-  background-color: black;
-  width: 100%;
+	background-color: black;
+	width: 100%;
 }
 
 #console {
-  width: 100%;
-  padding: 5px;
+	display: flex;
+	flex-direction: column;
 }
 
 #console pre {
-  color: white;
-  background-color: black;
-  margin: 0;
-  width: 100%;
-  font-size: 1rem;
-  height: 24rem;
+	color: white;
+	background-color: black;
+	margin: 0;
+	width: 100%;
+	font-size: 1rem;
+	padding: 4px 8px;
+	flex: 1;
 }
 
 #console input {
-  width: 100%;
-  margin: 0;
-  outline: none;
-  border: 2px solid white;
-  padding: none;
-  color: white;
-  background-color: black;
-  font-family: monospace;
-  font-size: 1rem;
+	width: 100%;
+	margin: 0;
+	outline: none;
+	padding: none;
+	color: white;
+	border: none;
+	background-color: #222;
+	padding: 4px 8px;
+	font-family: monospace;
+	font-size: 1rem;
+	flex-grow: 0;
 }
 
 #editor-area {
-  width: 100%;
-  height: 100%;
+	width: 100%;
 }
 
 #editor {
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  font-size: 16px;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	font-size: 16px;
 }
+
+button {
+	background-color: #4FC3F7;
+	border: none;
+	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+	padding: 8px 16px;
+	border-radius: 8px;
+	cursor: pointer;
+	transition-duration: 200ms;
+}
+
+button:hover {
+	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
+}
+
