diff --git a/src/changelog.html b/src/changelog.html
index 68bbd3a..092cc8f 100644
--- a/src/changelog.html
+++ b/src/changelog.html
@@ -1,13 +1,34 @@
 <h1>Whats new?</h1>
+
+<div class="notification">
+	<span class="notification__version">2.9.0</span>
+	<ul>
+		<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about this release.</a></li>
+		<li><strong>Detached Preview</strong> - Yes, you read that correct! You can now detach your preview and send it to your secondary monitor.
+		</li>
+		<li><strong>Find & Replae</strong> - Long awaited, now its there. Ctrl/Cmd+f to find and add Alt to replace.</li>
+		<li><strong>Atomic CSS (Atomizer) configurations</strong> - Add custom config for Atomic CSS. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a>.</li>
+		<li><strong>Light mode</strong> - This new setting makes Web Maker drop some heavy effects like blur etc to gain more performance. Thanks <a href="https://github.com/iamandrewluca" target="_blank">Andrew</a>.</li>
+		<li><strong>Preserve logs setting</strong> - Choose whether or not to preserve logs across preview refreshes. Thanks <a href="https://github.com/BasitAli" target="_blank">Basit</a>.</li>
+		<li><strong>Line wrap setting</strong> - As the name says.</li>
+		<li>Semantic UI added to popular libraries.</li>
+		<li>Bootstrap, Vue, UI-Kit and more updated to latest versions in popular libraries.</li>
+		<li>UX improvements in settings UI</li>
+		
+		<li><strong>Bugfix</strong> - Trigger preview refresh anytime with Ctrl/⌘ + Shift + 5. Even with auto-preview on.</li>
+
+		<br>
+		<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
+		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
+		<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
+	</ul>
+</div>
+
 <div class="notification">
 	<span class="notification__version">2.8.1</span>
 	<ul>
 		<li>Vue.js & UIKit version updated to latest version in 'Add Library' list.</li>
 		<li>UTF-8 charset added to preview HTML to support universal characters.</li>
-		<br>
-		<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
-		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
-		<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
 	</ul>
 </div>
 
diff --git a/src/detached-window.js b/src/detached-window.js
new file mode 100644
index 0000000..42e3258
--- /dev/null
+++ b/src/detached-window.js
@@ -0,0 +1,3 @@
+window.addEventListener('message', e => {
+	document.querySelector('iframe').src = e.data;
+});
diff --git a/src/index.html b/src/index.html
index 87aa7d0..3bca5f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,7 @@
 
 		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
 		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
+		<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
 		<link rel="stylesheet" href="lib/hint.min.css">
 		<link rel="stylesheet" href="lib/inlet.css">
 		<link rel="stylesheet" href="style.css">
@@ -100,6 +101,11 @@
 								</select>
 							</label>
 							<div class="code-wrap__header-right-options">
+								<a href="#" id="cssSettingsBtn" title="Atomic CSS configuration" d-click="openCssSettingsModal" class="code-wrap__header-btn hide">
+									<svg>
+										<use xlink:href="#settings-icon"></use>
+									</svg>
+								</a>
 								<a class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn" title="Toggle code pane">
 								</a>
 							</div>
@@ -149,7 +155,8 @@
 					</div>
 				</div>
 			</div>
-			<div class="footer">
+			<div class="global-console-container" id="globalConsoleContainerEl"></div>
+			<div id="footer" class="footer">
 				<div class="footer__right  fr">
 					<a id="saveHtmlBtn" class="mode-btn  hint--rounded  hint--top-left" data-hint="Save as HTML file">
 						<svg viewBox="0 0 24 24">
@@ -194,6 +201,12 @@
 							<rect x="0" y="0" width="100" height="100" />
 						</svg>
 					</a>
+					<a class="mode-btn hint--top-left hint--rounded" aria-label="Detach Preview" d-click="openDetachedPreview">
+						<svg viewBox="0 0 24 24">
+							<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
+						</svg>
+					</a>
+				
 
 					<div class="footer__separator"></div>
 
@@ -254,6 +267,16 @@
 			</div>
 		</div>
 
+		<div class="modal" id="cssSettingsModal">
+			<div class="modal__content">
+				<h1>Atomic CSS Settings</h1>
+				<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
+				<div style="height: calc(100vh - 350px);">
+					<textarea id="acssSettingsTextarea" cols="30" rows="10"></textarea>
+				</div>
+			</div>
+		</div>
+
 		<div class="modal" id="helpModal">
 			<div class="modal__content">
 				<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>
@@ -357,110 +380,123 @@
 				<h1>Settings</h1>
 
 				<h3>Indentation</h3>
-				<p>
-					<div class="line">
-						<label>
-							<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
-						</label>
-						<label class="ml-1">
-							<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
-						</label>
-					</div>
-					<label class="line">
-						Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
-						<span id="indentationSizeValueEl"></span>
-						<datalist id="indentationSizeList">
-							<option>1</option>
-							<option>2</option>
-							<option>3</option>
-							<option>4</option>
-							<option>5</option>
-							<option>6</option>
-							<option>7</option>
-						</datalist>
+				<div class="line" title="I know this is tough, but you have to decide one!">
+					<label>
+						<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
 					</label>
-				</p>
+					<label class="ml-1">
+						<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
+					</label>
+				</div>
+				<label class="line" title="">
+					Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
+					<span id="indentationSizeValueEl"></span>
+					<datalist id="indentationSizeList">
+						<option>1</option>
+						<option>2</option>
+						<option>3</option>
+						<option>4</option>
+						<option>5</option>
+						<option>6</option>
+						<option>7</option>
+					</datalist>
+				</label>
 				<hr>
 
 				<h3>Editor</h3>
-				<p>
-					<label class="line">
-						Default Preprocessors
-					</label>
-					<div class="flex line">
-						<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
-							<option value="html">HTML</option>
-							<option value="markdown">Markdown</option>
-							<option value="jade">Pug</option>
-						</select>
-						<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
-							<option value="css">CSS</option>
-							<option value="scss">SCSS</option>
-							<option value="sass">SASS</option>
-							<option value="less">LESS</option>
-							<option value="stylus">Stylus</option>
-							<option value="acss">Atomic CSS</option>
-						</select>
-						<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
-							<option value="js">JS</option>
-							<option value="coffee">CoffeeScript</option>
-							<option value="es6">ES6 (Babel)</option>
-							<option value="typescript">TypeScript</option>
-						</select>
-					</div>
-					<label class="line">
-						Theme
-						<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
-					</label>
-					<label class="line">
-						Font
-						<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
-							<option value="FiraCode">Fira Code</option>
-							<option value="Inconsolata">Inconsolata</option>
-							<option value="Monoid">Monoid</option>
-							<option value="FixedSys">FixedSys</option>
-							<option disabled="disabled">----</option>
-							<option value="other">Other font from system</option>
-						</select>
-						<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
-					</label>
-					<label class="line">
-						Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
+				<div class="flex">
 
-					</label>
-					<div class="line">
-						Key bindings
-						<label class="ml-1">
-							<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
+					<div>
+						<label class="line">
+							Default Preprocessors
 						</label>
-						<label class="ml-1">
-							<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
+						<div class="flex line">
+							<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
+								<option value="html">HTML</option>
+								<option value="markdown">Markdown</option>
+								<option value="jade">Pug</option>
+							</select>
+							<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
+								<option value="css">CSS</option>
+								<option value="scss">SCSS</option>
+								<option value="sass">SASS</option>
+								<option value="less">LESS</option>
+								<option value="stylus">Stylus</option>
+								<option value="acss">Atomic CSS</option>
+							</select>
+							<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
+								<option value="js">JS</option>
+								<option value="coffee">CoffeeScript</option>
+								<option value="es6">ES6 (Babel)</option>
+								<option value="typescript">TypeScript</option>
+							</select>
+						</div>
+						<label class="line">
+							Theme
+							<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
+						</label>
+						<label class="line">
+							Font
+							<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
+								<option value="FiraCode">Fira Code</option>
+								<option value="Inconsolata">Inconsolata</option>
+								<option value="Monoid">Monoid</option>
+								<option value="FixedSys">FixedSys</option>
+								<option disabled="disabled">----</option>
+								<option value="other">Other font from system</option>
+							</select>
+							<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
+						</label>
+						<label class="line">
+							Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
+
+						</label>
+						<div class="line">
+							Key bindings
+							<label class="ml-1">
+								<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
+							</label>
+							<label class="ml-1">
+								<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
+							</label>
+						</div>
+					</div>
+          			<div class="ml-2">
+						<label class="line" title="Toggle wrapping of long sentences onto new line">
+							<input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap
+						</label>
+						<label class="line" title="Your Preview will refresh when you resize the preview split">
+							<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
+						</label>
+						<label class="line" title="Turns on the auto-completion suggestions as you type">
+							<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
+						</label>
+						<label class="line" title="Refreshes the preview as you code. Otherwise use the Run button">
+							<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
+						</label>
+						<label class="line" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually">
+							<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
+						</label>
+						<label class="line" title="Loads the last open creation when app starts">
+							<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
+						</label>
+						<label class="line" title="Turning this on will start showing Web Maker in every new tab you open">
+							<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
+						</label>
+						<label class="line" title="Preserves the console logs across your preview refreshes">
+							<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
+						</label>
+						<label class="line" title="Switch to lighter version for better performance. Removes things like blur etc.">
+						  <input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Fast/light version
 						</label>
 					</div>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
-					</label>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
-					</label>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
-					</label>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
-					</label>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
-					</label>
-					<label class="line">
-						<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
-					</label>
-				</p>
+				</div>
+        
 				<hr>
 
 				<h3>Fun</h3>
 				<p>
-					<label class="line">
+					<label class="line" title="Enjoy wonderful particle blasts while you type">
 						<input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
 					</label>
 				</p>
@@ -571,6 +607,9 @@
 		<script src="lib/codemirror/addon/hint/html-hint.js"></script>
 		<script src="lib/codemirror/addon/hint/css-hint.js"></script>
 		<script src="lib/codemirror/addon/selection/active-line.js"></script>
+		<script src="lib/codemirror/addon/search/search.js"></script>
+		<script src="lib/codemirror/addon/dialog/dialog.js"></script>
+		<script src="lib/codemirror/addon/search/jump-to-line.js"></script>
 
 		<script src="lib/codemirror/mode/xml/xml.js"></script>
 		<script src="lib/codemirror/mode/javascript/javascript.js"></script>
diff --git a/src/lib/screenlog.js b/src/lib/screenlog.js
index 010fec8..a6dd519 100644
--- a/src/lib/screenlog.js
+++ b/src/lib/screenlog.js
@@ -1,20 +1,19 @@
-(function () {
-
+(function() {
 	var logEl,
 		isInitialized = false,
 		_console = {}; // backup console obj to contain references of overridden fns.
-		_options = {
-			bgColor: 'black',
-			logColor: 'lightgreen',
-			infoColor: 'blue',
-			warnColor: 'orange',
-			errorColor: 'red',
-			freeConsole: false,
-			css: '',
-			autoScroll: true,
-			proxyCallback: null,
-			noUi: false
-		};
+	_options = {
+		bgColor: 'black',
+		logColor: 'lightgreen',
+		infoColor: 'blue',
+		warnColor: 'orange',
+		errorColor: 'red',
+		freeConsole: false,
+		css: '',
+		autoScroll: true,
+		proxyCallback: null,
+		noUi: false
+	};
 
 	function createElement(tag, css) {
 		var element = document.createElement(tag);
@@ -23,7 +22,13 @@
 	}
 
 	function createPanel() {
-		var div = createElement('div', 'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' + _options.bgColor + ';' + _options.css);
+		var div = createElement(
+			'div',
+			'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' +
+				_options.bgColor +
+				';' +
+				_options.css
+		);
 		return div;
 	}
 
@@ -170,18 +175,19 @@
 		destroy: checkInitDecorator(destroy)
 	};
 })();
+var mainWindow = window.parent.onMessageFromConsole ? window.parent : window.parent.opener;
 screenLog.init({
 	noUi: true,
 	proxyCallback: function () {
-		window.parent.onMessageFromConsole.apply(null, arguments);
+		mainWindow.onMessageFromConsole.apply(null, arguments);
 	}
 });
 window._wmEvaluate = function _wmEvaluate(expr) {
 	try {
 		var result = eval(expr);
 	} catch(e) {
-		window.parent.onMessageFromConsole.call(null, e);
+		mainWindow.onMessageFromConsole.call(null, e);
 		return;
 	}
-	window.parent.onMessageFromConsole.call(null, result);
+	mainWindow.onMessageFromConsole.call(null, result);
 }
\ No newline at end of file
diff --git a/src/library-list.js b/src/library-list.js
index e19b6d4..d58efc6 100644
--- a/src/library-list.js
+++ b/src/library-list.js
@@ -11,16 +11,21 @@ window.jsLibs = [
 	},
 	{
 		url:
-			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js',
-		label: 'Bootstrap 4α',
+			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js',
+		label: 'Bootstrap 4β',
 		type: 'js'
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js',
+			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
 		label: 'Foundation',
 		type: 'js'
 	},
+	{
+		url: 'https://semantic-ui.com/dist/semantic.min.js',
+		label: 'Semantic UI',
+		type: 'js'
+	},
 	{
 		url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
 		label: 'Angular',
@@ -32,12 +37,12 @@ window.jsLibs = [
 		type: 'js'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js',
 		label: 'React DOM',
 		type: 'js'
 	},
 	{
-		url: 'https://unpkg.com/vue@2.4.2/dist/vue.min.js',
+		url: 'https://unpkg.com/vue@2.4.4/dist/vue.min.js',
 		label: 'Vue.js',
 		type: 'js'
 	},
@@ -47,7 +52,7 @@ window.jsLibs = [
 		type: 'js'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js',
 		label: 'D3',
 		type: 'js'
 	},
@@ -69,7 +74,7 @@ window.jsLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js',
 		label: 'UIkit 3',
 		type: 'js'
 	}
@@ -83,21 +88,27 @@ window.cssLibs = [
 	},
 	{
 		url:
-			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css',
-		label: 'Bootstrap 4α',
-		type: 'css'
-	},
-	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
-		label: 'Bulma',
+			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css',
+		label: 'Bootstrap 4β',
 		type: 'css'
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css',
+			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css',
 		label: 'Foundation',
 		type: 'css'
 	},
+	{
+		url: 'https://semantic-ui.com/dist/semantic.min.css',
+		label: 'Semantic UI',
+		type: 'css'
+	},
+	{
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css',
+		label: 'Bulma',
+		type: 'css'
+	},
+
 	{
 		url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css',
 		label: 'Hint.css',
@@ -111,7 +122,7 @@ window.cssLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css',
 		label: 'UIkit 3',
 		type: 'css'
 	},
diff --git a/src/manifest.json b/src/manifest.json
index 3f4d01a..b6da806 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -6,7 +6,7 @@
 	"homepage_url": "https://webmakerapp.com",
 	"permissions": ["storage", "tabs", "<all_urls>"],
 	"optional_permissions": ["downloads"],
-	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
+	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
 	"options_ui": {
 		"page": "options.html",
 		"chrome_style": true
diff --git a/src/preview.html b/src/preview.html
new file mode 100644
index 0000000..32b727b
--- /dev/null
+++ b/src/preview.html
@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="style.css">
+
+<body>
+    
+    <iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
+
+
+    <script src="detached-window.js"></script>
+</body>
diff --git a/src/script.js b/src/script.js
index f3f0faf..64c1bce 100644
--- a/src/script.js
+++ b/src/script.js
@@ -6,7 +6,8 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
-customEditorFontInput
+customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
+globalConsoleContainerEl
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -95,7 +96,8 @@ customEditorFontInput
 		cmPath: 'css',
 		cmMode: 'css',
 		codepenVal: 'notsupported',
-		cmDisable: true
+		cmDisable: true,
+		hasSettings: true
 	};
 
 	const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
@@ -369,6 +371,11 @@ customEditorFontInput
 		currentItem.htmlMode = htmlMode;
 		currentItem.cssMode = cssMode;
 		currentItem.jsMode = jsMode;
+		if (modes[cssMode].hasSettings) {
+			currentItem.cssSettings = {
+				acssConfig: scope.acssSettingsCm.getValue()
+			};
+		}
 		currentItem.updatedOn = Date.now();
 		currentItem.layoutMode = currentLayoutMode;
 		currentItem.externalLibs = {
@@ -592,6 +599,11 @@ customEditorFontInput
 		scope.cm.css.refresh();
 		scope.cm.js.refresh();
 
+		scope.acssSettingsCm.setValue(
+			currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
+		);
+		scope.acssSettingsCm.refresh();
+
 		scope.clearConsole();
 
 		// To have the library count updated
@@ -614,6 +626,7 @@ customEditorFontInput
 		addLibraryModal.classList.remove('is-modal-visible');
 		onboardModal.classList.remove('is-modal-visible');
 		settingsModal.classList.remove('is-modal-visible');
+		cssSettingsModal.classList.remove('is-modal-visible');
 		toggleSavedItemsPane(false);
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
@@ -681,6 +694,9 @@ customEditorFontInput
 		cssModelLabel.parentElement.querySelector('select').value = value;
 		scope.cm.css.setOption('mode', modes[value].cmMode);
 		scope.cm.css.setOption('readOnly', modes[value].cmDisable);
+		cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
+			'hide'
+		);
 		CodeMirror.autoLoadMode(
 			scope.cm.css,
 			modes[value].cmPath || modes[value].cmMode
@@ -768,12 +784,24 @@ customEditorFontInput
 				d.resolve(result);
 			});
 		} else if (cssMode === CssModes.ACSS) {
-			const html = scope.cm.html.getValue();
-			const foundClasses = atomizer.findClassNames(html);
-			const finalConfig = atomizer.getConfig(foundClasses, {});
-			const acss = atomizer.getCss(finalConfig);
-			scope.cm.css.setValue(acss);
-			d.resolve(acss);
+			if (!window.atomizer) {
+				d.resolve('');
+			} else {
+				const html = scope.cm.html.getValue();
+				const foundClasses = atomizer.findClassNames(html);
+				var finalConfig;
+				try {
+					finalConfig = atomizer.getConfig(
+						foundClasses,
+						JSON.parse(scope.acssSettingsCm.getValue())
+					);
+				} catch (e) {
+					finalConfig = atomizer.getConfig(foundClasses, {});
+				}
+				const acss = atomizer.getCss(finalConfig);
+				scope.cm.css.setValue(acss);
+				d.resolve(acss);
+			}
 		}
 
 		return d.promise;
@@ -891,6 +919,9 @@ customEditorFontInput
 	};
 	window.onunload = function() {
 		saveCode('code');
+		if (scope.detachedWindow) {
+			scope.detachedWindow.close();
+		}
 	};
 
 	function cleanupErrors(lang) {
@@ -1038,11 +1069,18 @@ customEditorFontInput
 					chrome.i18n.getMessage('@@extension_id') +
 					'/temporary/' +
 					'preview.html';
+				if (scope.detachedWindow) {
+					scope.detachedWindow.postMessage(frame.src, '*');
+				}
 			});
 		});
 	}
 
 	scope.setPreviewContent = function(isForced) {
+		if (!prefs.preserveConsoleLogs) {
+			scope.clearConsole();
+		}
+
 		var currentCode = {
 			html: scope.cm.html.getValue(),
 			css: scope.cm.css.getValue(),
@@ -1589,6 +1627,9 @@ customEditorFontInput
 		$('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
 		$('[data-setting=autoSave]').checked = prefs.autoSave;
 		$('[data-setting=autoComplete]').checked = prefs.autoComplete;
+		$('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
+		$('[data-setting=lightVersion]').checked = prefs.lightVersion;
+		$('[data-setting=lineWrap]').checked = prefs.lineWrap;
 	}
 
 	/**
@@ -1658,9 +1699,17 @@ customEditorFontInput
 				'keyMap',
 				$('[data-setting=keymap]:checked').value
 			);
+			scope.cm[type].setOption(
+				'lineWrapping',
+				$('[data-setting=lineWrap]').checked
+			);
 			scope.cm[type].refresh();
 		});
 		scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
+		scope.acssSettingsCm.setOption(
+			'theme',
+			$('[data-setting=editorTheme]').value
+		);
 		if (prefs.autoSave) {
 			if (!autoSaveInterval) {
 				autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL);
@@ -1669,6 +1718,10 @@ customEditorFontInput
 			clearInterval(autoSaveInterval);
 			autoSaveInterval = null;
 		}
+
+		document.body.classList[prefs.lightVersion ? 'add' : 'remove'](
+			'light-version'
+		);
 	};
 
 	scope.onNewBtnClick = function() {
@@ -1805,6 +1858,45 @@ customEditorFontInput
 		});
 	}
 
+	scope.openDetachedPreview = function() {
+		if (scope.detachedWindow) {
+			scope.detachedWindow.focus();
+			return;
+		}
+		var iframeBounds = frame.getBoundingClientRect();
+		const iframeWidth = iframeBounds.width;
+		const iframeHeight = iframeBounds.height;
+		document.body.classList.add('is-detached-mode');
+		globalConsoleContainerEl.insertBefore(consoleEl, null);
+
+		scope.detachedWindow = window.open(
+			'./preview.html',
+			'Web Maker',
+			`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
+		);
+		setTimeout(() => {
+			scope.detachedWindow.postMessage(frame.src, '*');
+		}, 1000);
+		function checkWindow() {
+			if (scope.detachedWindow && scope.detachedWindow.closed) {
+				clearInterval(intervalID);
+				document.body.classList.remove('is-detached-mode');
+				$('#js-demo-side').insertBefore(consoleEl, null);
+				scope.detachedWindow = null;
+			}
+		}
+		var intervalID = window.setInterval(checkWindow, 500);
+	};
+
+	scope.openCssSettingsModal = function() {
+		scope.toggleModal(cssSettingsModal);
+		setTimeout(() => {
+			// Refresh is required because codemirror gets scaled inside modal and loses alignement.
+			scope.acssSettingsCm.refresh();
+			scope.acssSettingsCm.focus();
+		}, 500);
+	};
+
 	function init() {
 		var lastCode;
 
@@ -1969,7 +2061,6 @@ customEditorFontInput
 			}
 			// Ctrl/⌘ + Shift + 5
 			if (
-				!prefs.autoPreview &&
 				(event.ctrlKey || event.metaKey) &&
 				event.shiftKey &&
 				event.keyCode === 53
@@ -2155,7 +2246,10 @@ customEditorFontInput
 				editorFont: 'FiraCode',
 				editorCustomFont: '',
 				autoSave: true,
-				autoComplete: true
+				autoComplete: true,
+				preserveConsoleLogs: true,
+				lightVersion: false,
+				lineWrap: true
 			},
 			function syncGetCallback(result) {
 				if (result.preserveLastCode && lastCode) {
@@ -2191,6 +2285,9 @@ customEditorFontInput
 				prefs.editorCustomFont = result.editorCustomFont;
 				prefs.autoSave = result.autoSave;
 				prefs.autoComplete = result.autoComplete;
+				prefs.preserveConsoleLogs = result.preserveConsoleLogs;
+				prefs.lightVersion = result.lightVersion;
+				prefs.lineWrap = result.lineWrap;
 
 				updateSettingsInUi();
 				scope.updateSetting();
@@ -2241,6 +2338,13 @@ customEditorFontInput
 			}
 		);
 
+		scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
+			mode: 'application/ld+json'
+		});
+		scope.acssSettingsCm.on('blur', () => {
+			scope.setPreviewContent(true);
+		});
+
 		var options = '';
 		[
 			'3024-day',
diff --git a/src/style.css b/src/style.css
index 3dcd712..b9b2a1a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,6 +31,7 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
 .opacity--30 { opacity: 0.3; }
 .pointer-none { pointer-events: none; }
 .ml-1 { margin-left: 1rem; }
+.ml-2 { margin-left: 2rem; }
 hr {
 	background: 0;
 	border: 0;
@@ -117,10 +118,11 @@ select, input[type="text"], input[type="number"],  textarea {
 	will-change: -webkit-filter;
 	transition: 0.10s ease 0.2s;
 }
-.overlay-visible .main-container {
+body:not(.light-version).overlay-visible .main-container {
 	transition-duration: 0.5s;
 	transition-delay: 0.4s;
 	-webkit-filter: blur(3px);
+	filter: blur(3px);
 }
 .code-side,
 .demo-side {
@@ -154,6 +156,16 @@ select, input[type="text"], input[type="number"],  textarea {
 .layout-4 .demo-side {
 	width: 100% !important;
 }
+.is-detached-mode .demo-side {
+	display: none;
+}
+.is-detached-mode .code-side {
+	width: 100% !important;
+}
+.is-detached-mode.layout-2 .code-side {
+	height: auto !important;
+}
+
 .code-wrap {
 	display: flex;
 	flex-direction: column;
@@ -284,6 +296,10 @@ li.CodeMirror-hint-active {
 	z-index: 1;
 	background: white;
 }
+/* When demo frame is in detached window */
+body > #demo-frame {
+	height: 100%; /* Because console is no more here */
+}
 .main-header,
 .footer {
 	padding: 5px 10px;
@@ -462,8 +478,8 @@ li.CodeMirror-hint-active {
 /* Make settings modal smaller */
 @media screen and (min-width: 600px) {
 	.modal--settings {
-		width: 600px;
-		margin-left: -300px;
+		/* width: 600px; */
+		/* margin-left: -300px; */
 	}
 }
 .saved-items-pane {
@@ -885,6 +901,19 @@ li.CodeMirror-hint-active {
 .console:not(.is-minimized) .code-wrap__header {
 	cursor: ns-resize;
 }
+.global-console-container {
+	display: none;
+	position: relative;
+	height: 35px;
+}
+/* Detached mode */
+.is-detached-mode .console,
+.is-detached-mode .footer {
+	z-index: 4;
+}
+.is-detached-mode .global-console-container {
+	display: block;
+}
 
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
@@ -925,4 +954,4 @@ while the theme CSS file is loading */
     color: #D1EDFF;
 }
 .cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
-.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
+.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
\ No newline at end of file