diff --git a/static/css/sources/components/terminal.less b/static/css/sources/components/terminal.less
index ae9ac34..496013a 100644
--- a/static/css/sources/components/terminal.less
+++ b/static/css/sources/components/terminal.less
@@ -1,13 +1,25 @@
 .terminal {
 	box-sizing: border-box;
+
 	&_code {
 		height: 300px;
-		padding: 4px;
+		padding: 8px;
 		box-sizing: border-box;
 		overflow-y: scroll;
 		border: none;
-		white-space: pre-wrap;
 		color: white;
 		background-color: black;
+		line-height: 0.8;
+		font-size: 12px;
+		font-family: Monaco, Monosapce, sans-serif;
+
+		&_newline {
+			display: block;
+			margin: 0.8em 0;
+			white-space: pre;
+			&:first-child {
+				margin-top: 0;
+			}
+		}
 	}
 }
diff --git a/static/js/app/components/terminal/terminal.js b/static/js/app/components/terminal/terminal.js
index 42213d9..61adaf2 100644
--- a/static/js/app/components/terminal/terminal.js
+++ b/static/js/app/components/terminal/terminal.js
@@ -33,10 +33,17 @@ define([
 			}
 			this.ignoreScrollEvent = false;
 		},
+		prepareOutput: function(output) {
+			var text = output.replace(
+				/(.*)\n/gi,
+				'<span class="terminal_code_newline">$1</span>'
+			);
+			return ansiUp.ansi_to_html(text);
+		},
 		updateItems: function(build) {
 			// listen just our console update
 			if (build.buildId === this.props.build) {
-				this.setState({data: ansiUp.ansi_to_html(build.data)});
+				this.setState({data: this.prepareOutput(build.data)});
 				_.defer(this.ensureScrollPosition);
 				this.ensureScrollPosition();
 			}