diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx
index 239db01..dfb6368 100644
--- a/webmaker/src/components/ContentWrap.jsx
+++ b/webmaker/src/components/ContentWrap.jsx
@@ -73,24 +73,27 @@ export default class ContentWrap extends Component {
 
 	/* eslint max-params: ["error", 4] */
 	getCompleteHtml(html, css, js, isForExport) {
-		/* var externalJs = externalJsTextarea.value
+		if (!this.props.currentItem) {
+			return '';
+		}
+		var externalJs = this.props.currentItem.externalLibs.js
 			.split('\n')
 			.reduce(function(scripts, url) {
 				return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
 			}, '');
-		var externalCss = externalCssTextarea.value
+		var externalCss = this.props.currentItem.externalLibs.css
 			.split('\n')
 			.reduce(function(links, url) {
 				return (
 					links +
 					(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
 				);
-			}, ''); */
+			}, '');
 		var contents =
 			'<!DOCTYPE html>\n' +
 			'<html>\n<head>\n' +
 			'<meta charset="UTF-8" />\n' +
-			// externalCss +
+			externalCss +
 			'\n' +
 			'<style id="webmakerstyle">\n' +
 			css +
@@ -99,7 +102,7 @@ export default class ContentWrap extends Component {
 			'<body>\n' +
 			html +
 			'\n' +
-			// externalJs +
+			externalJs +
 			'\n';
 
 		if (!isForExport) {
@@ -285,13 +288,14 @@ export default class ContentWrap extends Component {
 		this.codeInPreview.js = currentCode.js;
 	}
 	componentWillReceiveProps() {
-		console.log('compoenntwillrecvprops', this.props.currentItem);
+		// console.log('compoenntwillrecvprops', this.props.currentItem);
 	}
 	componentDidUpdate() {
+		this.setPreviewContent(true);
 		console.log('componentdidupdate', this.props.currentItem);
 	}
 	componentWillUpdate() {
-		console.log('compoenntwillupdate', this.props.currentItem);
+		// console.log('compoenntwillupdate', this.props.currentItem);
 	}
 
 	render() {
diff --git a/webmaker/src/components/Footer.jsx b/webmaker/src/components/Footer.jsx
index 0aee9ab..f6438ff 100644
--- a/webmaker/src/components/Footer.jsx
+++ b/webmaker/src/components/Footer.jsx
@@ -2,11 +2,15 @@ import { h, Component } from 'preact';
 import Modal from './Modal.jsx';
 
 export default class Footer extends Component {
-	getInitialState() {
-		return {
+	constructor(props) {
+		super(props);
+		this.state = {
 			isKeyboardShortcutsModalOpen: false
 		};
 	}
+	layoutBtnClickhandler(layoutId) {
+		this.props.layoutBtnClickHandler(layoutId);
+	}
 
 	render() {
 		return (
@@ -57,27 +61,44 @@ export default class Footer extends Component {
 
 					<div class="footer__separator hide-on-mobile" />
 
-					<a id="layoutBtn1" class="mode-btn hide-on-mobile">
+					<a
+						onClick={this.layoutBtnClickhandler.bind(this, 1)}
+						id="layoutBtn1"
+						class="mode-btn hide-on-mobile"
+					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
 							<use xlinkHref="#mode-icon" />
 						</svg>
 					</a>
-					<a id="layoutBtn2" class="mode-btn hide-on-mobile">
+					<a
+						onClick={this.layoutBtnClickhandler.bind(this, 2)}
+						id="layoutBtn2"
+						class="mode-btn hide-on-mobile"
+					>
 						<svg viewBox="0 0 100 100">
 							<use xlinkHref="#mode-icon" />
 						</svg>
 					</a>
-					<a id="layoutBtn3" class="mode-btn hide-on-mobile">
+					<a
+						onClick={this.layoutBtnClickhandler.bind(this, 3)}
+						id="layoutBtn3"
+						class="mode-btn hide-on-mobile"
+					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
 							<use xlinkHref="#mode-icon" />
 						</svg>
 					</a>
-					<a id="layoutBtn5" class="mode-btn hide-on-mobile">
+					<a
+						onClick={this.layoutBtnClickhandler.bind(this, 5)}
+						id="layoutBtn5"
+						class="mode-btn hide-on-mobile"
+					>
 						<svg viewBox="0 0 100 100">
 							<use xlinkHref="#vertical-mode-icon" />
 						</svg>
 					</a>
 					<a
+						onClick={this.layoutBtnClickhandler.bind(this, 4)}
 						id="layoutBtn4"
 						class="mode-btn hint--top-left hint--rounded  hide-on-mobile"
 						aria-label="Full Screen"
@@ -124,7 +145,7 @@ export default class Footer extends Component {
 				&copy;
 				<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
 				<a
-					d-open-modal="helpModal"
+					onClick={this.props.helpBtnClickHandler}
 					data-event-category="ui"
 					data-event-action="helpButtonClick"
 					class="footer__link  hint--rounded  hint--top-right"
diff --git a/webmaker/src/components/MainHeader.jsx b/webmaker/src/components/MainHeader.jsx
index 8076bfc..5ea5987 100644
--- a/webmaker/src/components/MainHeader.jsx
+++ b/webmaker/src/components/MainHeader.jsx
@@ -33,7 +33,9 @@ export default class Header extends Component {
 						Add library
 						<span
 							id="js-external-lib-count"
-							style="display:none;"
+							style={`display:${
+								this.props.externalLibCount ? 'inline' : 'none'
+							}`}
 							class="count-label"
 						>
 							{this.props.externalLibCount}
diff --git a/webmaker/src/components/Modal.jsx b/webmaker/src/components/Modal.jsx
index 4007158..5347f53 100644
--- a/webmaker/src/components/Modal.jsx
+++ b/webmaker/src/components/Modal.jsx
@@ -7,8 +7,13 @@ export default class Modal extends Component {
 	componentWillUnmount() {
 		window.removeEventListener('keydown', this.onKeyDownHandler);
 	}
-	onKeyDownHandler(event) {
-		if (event.keyCode === 27) {
+	onKeyDownHandler(e) {
+		if (e.keyCode === 27) {
+			this.props.closeHandler();
+		}
+	}
+	onOverlayClick(e) {
+		if (e.target === this.overlayEl) {
 			this.props.closeHandler();
 		}
 	}
@@ -16,7 +21,11 @@ export default class Modal extends Component {
 		if (!this.props.show) return null;
 
 		return (
-			<div class="modal is-modal-visible">
+			<div
+				class="modal is-modal-visible"
+				ref={el => (this.overlayEl = el)}
+				onClick={this.onOverlayClick.bind(this)}
+			>
 				<div class="modal__content">
 					<button
 						onClick={this.props.closeHandler}
diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx
index 3d18be8..f30bfb7 100644
--- a/webmaker/src/components/app.jsx
+++ b/webmaker/src/components/app.jsx
@@ -7,7 +7,8 @@ import Footer from './Footer.jsx';
 import SavedItemPane from './SavedItemPane.jsx';
 import AddLibrary from './AddLibrary.jsx';
 import Modal from './Modal.jsx';
-import '../utils';
+import HelpModal from './HelpModal.jsx';
+import { log } from '../utils';
 
 if (module.hot) {
 	require('preact/debug');
@@ -20,14 +21,17 @@ export default class App extends Component {
 			isSavedItemPaneOpen: false,
 			isModalOpen: false,
 			isAddLibraryModalOpen: false,
-			currentItem: {}
+			isHelpModalOpen: false,
+			currentItem: {
+				title: '',
+				externalLibs: { js: '', css: '' }
+			}
 		};
 	}
 	openSavedItemsPane() {
 		this.setState({ isSavedItemPaneOpen: true });
 	}
 	openAddLibrary() {
-		console.log(99999);
 		this.setState({ isAddLibraryModalOpen: true });
 	}
 	closeSavedItemsPane() {
@@ -80,14 +84,16 @@ export default class App extends Component {
 		}
 	}
 	onExternalLibChange(newValues) {
+		log('onExternalLibChange');
 		this.state.currentItem.externalLibs = {
 			js: newValues.js,
 			css: newValues.css
 		};
 		this.updateExternalLibCount();
 		this.setState({
-			currentItem: this.state.currentItem
+			currentItem: { ...this.state.currentItem }
 		});
+		// alertsService.add('Libraries updated.');
 	}
 	updateExternalLibCount() {
 		// Calculate no. of external libs
@@ -101,12 +107,34 @@ export default class App extends Component {
 		this.setState({
 			externalLibCount: noOfExternalLibs
 		});
-		if (noOfExternalLibs) {
-			// $('#js-external-lib-count').textContent = noOfExternalLibs;
-			$('#js-external-lib-count').style.display = 'inline';
-		} else {
-			$('#js-external-lib-count').style.display = 'none';
+	}
+	toggleLayout(mode) {
+		/* eslint-disable no-param-reassign */
+		mode = window.innerWidth < 500 ? 2 : mode;
+
+		if (this.state.currentLayoutMode === mode) {
+			// mainSplitInstance.setSizes(getMainSplitSizesToApply());
+			// codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
+			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');
+			document.body.classList.remove(`layout-${layoutNumber}`);
+		});
+		$('#layoutBtn' + mode).classList.add('selected');
+		document.body.classList.add('layout-' + mode);
+
+		// resetSplitting();
+		// scope.setPreviewContent(true);
+	}
+
+	layoutBtnClickHandler(layoutId) {
+		// saveSetting('layoutMode', mode);
+		// trackEvent('ui', 'toggleLayoutClick', mode);
+		this.toggleLayout(layoutId);
 	}
 
 	render() {
@@ -120,7 +148,10 @@ export default class App extends Component {
 					/>
 					<ContentWrap currentItem={this.state.currentItem} />
 					<div class="global-console-container" id="globalConsoleContainerEl" />
-					<Footer />
+					<Footer
+						layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
+						helpBtnClickHandler={() => this.setState({ isHelpModalOpen: true })}
+					/>
 				</div>
 
 				<SavedItemPane
@@ -160,6 +191,10 @@ export default class App extends Component {
 						onChange={this.onExternalLibChange.bind(this)}
 					/>
 				</Modal>
+				<HelpModal
+					show={this.state.isHelpModalOpen}
+					closeHandler={() => this.setState({ isHelpModalOpen: false })}
+				/>
 
 				<svg
 					version="1.1"
