diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx
index 173de97..239db01 100644
--- a/webmaker/src/components/ContentWrap.jsx
+++ b/webmaker/src/components/ContentWrap.jsx
@@ -284,6 +284,15 @@ export default class ContentWrap extends Component {
 		this.codeInPreview.css = currentCode.css;
 		this.codeInPreview.js = currentCode.js;
 	}
+	componentWillReceiveProps() {
+		console.log('compoenntwillrecvprops', this.props.currentItem);
+	}
+	componentDidUpdate() {
+		console.log('componentdidupdate', this.props.currentItem);
+	}
+	componentWillUpdate() {
+		console.log('compoenntwillupdate', this.props.currentItem);
+	}
 
 	render() {
 		return (
diff --git a/webmaker/src/components/MainHeader.jsx b/webmaker/src/components/MainHeader.jsx
index 744d316..8076bfc 100644
--- a/webmaker/src/components/MainHeader.jsx
+++ b/webmaker/src/components/MainHeader.jsx
@@ -24,18 +24,20 @@ export default class Header extends Component {
 					</a>
 
 					<a
-						d-open-modal="addLibraryModal"
+						onClick={this.props.addLibraryBtnHandler}
 						data-event-category="ui"
 						data-event-action="addLibraryButtonClick"
 						class="flex-v-center hint--rounded hint--bottom-left"
 						aria-label="Add a JS/CSS library"
 					>
-						Add library{' '}
+						Add library
 						<span
 							id="js-external-lib-count"
 							style="display:none;"
 							class="count-label"
-						/>
+						>
+							{this.props.externalLibCount}
+						</span>
 					</a>
 
 					<a
diff --git a/webmaker/src/components/Modal.jsx b/webmaker/src/components/Modal.jsx
index 45acdf6..4007158 100644
--- a/webmaker/src/components/Modal.jsx
+++ b/webmaker/src/components/Modal.jsx
@@ -17,7 +17,7 @@ export default class Modal extends Component {
 
 		return (
 			<div class="modal is-modal-visible">
-				<div class="modal__content t">
+				<div class="modal__content">
 					<button
 						onClick={this.props.closeHandler}
 						aria-label="Close modal"
diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx
index 87a8868..3d18be8 100644
--- a/webmaker/src/components/app.jsx
+++ b/webmaker/src/components/app.jsx
@@ -5,19 +5,31 @@ import MainHeader from './MainHeader.jsx';
 import ContentWrap from './ContentWrap.jsx';
 import Footer from './Footer.jsx';
 import SavedItemPane from './SavedItemPane.jsx';
+import AddLibrary from './AddLibrary.jsx';
 import Modal from './Modal.jsx';
+import '../utils';
 
 if (module.hot) {
 	require('preact/debug');
 }
 
 export default class App extends Component {
-	getInitialState() {
-		return { isSavedItemPaneOpen: false, isModalOpen: false };
+	constructor() {
+		super();
+		this.state = {
+			isSavedItemPaneOpen: false,
+			isModalOpen: false,
+			isAddLibraryModalOpen: false,
+			currentItem: {}
+		};
 	}
 	openSavedItemsPane() {
 		this.setState({ isSavedItemPaneOpen: true });
 	}
+	openAddLibrary() {
+		console.log(99999);
+		this.setState({ isAddLibraryModalOpen: true });
+	}
 	closeSavedItemsPane() {
 		this.setState({
 			isSavedItemPaneOpen: false
@@ -67,13 +79,46 @@ export default class App extends Component {
 			this.setState({ isSavedItemPaneOpen: false });
 		}
 	}
+	onExternalLibChange(newValues) {
+		this.state.currentItem.externalLibs = {
+			js: newValues.js,
+			css: newValues.css
+		};
+		this.updateExternalLibCount();
+		this.setState({
+			currentItem: this.state.currentItem
+		});
+	}
+	updateExternalLibCount() {
+		// Calculate no. of external libs
+		var noOfExternalLibs = 0;
+		noOfExternalLibs += this.state.currentItem.externalLibs.js
+			.split('\n')
+			.filter(lib => !!lib).length;
+		noOfExternalLibs += this.state.currentItem.externalLibs.css
+			.split('\n')
+			.filter(lib => !!lib).length;
+		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';
+		}
+	}
 
 	render() {
 		return (
 			<div>
 				<div class="main-container">
-					<MainHeader openBtnHandler={this.openSavedItemsPane.bind(this)} />
-					<ContentWrap />
+					<MainHeader
+						externalLibCount={this.state.externalLibCount}
+						openBtnHandler={this.openSavedItemsPane.bind(this)}
+						addLibraryBtnHandler={this.openAddLibrary.bind(this)}
+					/>
+					<ContentWrap currentItem={this.state.currentItem} />
 					<div class="global-console-container" id="globalConsoleContainerEl" />
 					<Footer />
 				</div>
@@ -97,6 +142,25 @@ export default class App extends Component {
 					/>
 				</form>
 
+				<Modal
+					show={this.state.isAddLibraryModalOpen}
+					closeHandler={() => this.setState({ isAddLibraryModalOpen: false })}
+				>
+					<AddLibrary
+						js={
+							this.state.currentItem.externalLibs
+								? this.state.currentItem.externalLibs.js
+								: ''
+						}
+						css={
+							this.state.currentItem.externalLibs
+								? this.state.currentItem.externalLibs.css
+								: ''
+						}
+						onChange={this.onExternalLibChange.bind(this)}
+					/>
+				</Modal>
+
 				<svg
 					version="1.1"
 					xmlns="http://www.w3.org/2000/svg"
@@ -150,8 +214,7 @@ export default class App extends Component {
 						<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
 					</symbol>
 					<symbol id="twitter-icon" viewBox="0 0 16 16">
-						<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
-			c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z" />
+						<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809 c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z" />
 					</symbol>
 					<symbol id="heart-icon" viewBox="0 0 24 24">
 						<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
diff --git a/webmaker/src/index.js b/webmaker/src/index.js
index 957d9c7..238858d 100644
--- a/webmaker/src/index.js
+++ b/webmaker/src/index.js
@@ -1,4 +1,4 @@
-import './style';
+// import './style';
 import App from './components/app.jsx';
 
 export default App;
diff --git a/webmaker/src/style.css b/webmaker/src/style.css
index 46b7299..3f9a43a 100644
--- a/webmaker/src/style.css
+++ b/webmaker/src/style.css
@@ -582,6 +582,7 @@ body > #demo-frame {
 	justify-content: center;
 	z-index: 2000;
 	visibility: hidden;
+	background-color: rgba(102, 51, 153, 0.7);
 }
 .modal__close-btn {
 	position: absolute;