diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx
index 68874d2..d8d428f 100644
--- a/webmaker/src/components/ContentWrap.jsx
+++ b/webmaker/src/components/ContentWrap.jsx
@@ -248,7 +248,8 @@ export default class ContentWrap extends Component {
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
 			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
 			this.state.codeSplitSizes != nextState.codeSplitSizes ||
-			this.state.mainSplitSizes != nextState.mainSplitSizes
+			this.state.mainSplitSizes != nextState.mainSplitSizes ||
+			this.props.currentLayoutMode !== nextProps.currentLayoutMode
 		);
 	}
 	componentDidUpdate() {
@@ -921,7 +922,7 @@ export default class ContentWrap extends Component {
 							class="console__prompt flex flex-v-center"
 						>
 							<svg width="18" height="18" fill="#346fd2">
-								Chevron
+								<use xlinkHref="#chevron-icon" />
 							</svg>
 							<input
 								onKeyUp={this.evalConsoleExpr.bind(this)}
diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx
index 1af4127..5be8bca 100644
--- a/webmaker/src/components/app.jsx
+++ b/webmaker/src/components/app.jsx
@@ -502,7 +502,6 @@ export default class App extends Component {
 			this.setState({ currentLayoutMode: mode });
 			return;
 		}
-		this.setState({ currentLayoutMode: mode });
 		// Remove all layout classes
 		[1, 2, 3, 4, 5].forEach(layoutNumber => {
 			window[`layoutBtn${layoutNumber}`].classList.remove('selected');
@@ -511,8 +510,10 @@ export default class App extends Component {
 		$('#layoutBtn' + mode).classList.add('selected');
 		document.body.classList.add('layout-' + mode);
 
-		this.contentWrap.resetSplitting();
-		this.contentWrap.setPreviewContent(true);
+		this.setState({ currentLayoutMode: mode }, () => {
+			this.contentWrap.resetSplitting();
+			this.contentWrap.setPreviewContent(true);
+		});
 	}
 
 	layoutBtnClickHandler(layoutId) {
diff --git a/webmaker/src/style.css b/webmaker/src/style.css
index fddcfe0..18dcfc9 100644
--- a/webmaker/src/style.css
+++ b/webmaker/src/style.css
@@ -275,6 +275,8 @@ body:not(.light-version).overlay-visible .main-container {
 }
 
 .content-wrap {
+	/* HACK:  */
+	height: 1px;
 	/* HACK: 70px is approx header+footer. This is required to because
 	on FF the content-wrap goes beyond the flex parent otherwise. */
 	max-height: calc(100% - 70px);
@@ -695,12 +697,19 @@ body>#demo-frame {
 	justify-content: center;
 	z-index: 2000;
 	visibility: hidden;
-	background-color: rgba(102, 51, 153, 0.7);
-	background-color: rgba(0, 0, 0, 0.7);
+	/* background-color: rgba(102, 51, 153, 0.7); */
+	/* background-color: rgba(0, 0, 0, 0.7); */
 	/* To prevent scroll repaint inside modal */
 	will-change: transform;
 }
 
+@keyframes anim-modal-overlay {
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
 .modal__close-btn {
 	position: absolute;
 	right: 10px;
@@ -733,9 +742,16 @@ body>#demo-frame {
 	box-sizing: border-box;
 	overflow-y: auto;
 	pointer-events: auto;
-	transition-property: transform, opacity;
-	transition-duration: 0.19s;
 	transform: translateY(50px) scale(0.95);
+	animation: anim-modal 300ms ease forwards;
+	animation-delay: 150ms;
+}
+
+@keyframes anim-modal {
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
 }
 
 @media screen and (max-width: 900px) {
@@ -749,9 +765,9 @@ body>#demo-frame {
 }
 
 .is-modal-visible .modal__content {
-	transition-duration: 0.3s;
-	transform: translateY(0px) scale(1);
-	opacity: 1;
+	/* transition-duration: 0.3s; */
+	/* transform: translateY(0px) scale(1); */
+	/* opacity: 1; */
 }
 
 .modal-overlay {
@@ -1281,6 +1297,8 @@ body>#demo-frame {
 	height: 35vh;
 	left: 0;
 	right: 0;
+	display: flex;
+	flex-direction: column;
 	transform: translateY(0);
 	transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9);
 }
@@ -1290,7 +1308,11 @@ body>#demo-frame {
 }
 
 .console .CodeMirror {
-	height: calc(100% - 55px);
+	height: calc(100% - 30px);
+}
+
+.console__log {
+	flex: 1;
 }
 
 .console-exec-input {