diff --git a/src/index.html b/src/index.html
index 7ff6f4d..8a9a878 100644
--- a/src/index.html
+++ b/src/index.html
@@ -301,7 +301,7 @@
 			overflow: hidden;
 			opacity: 0;
 			visibility: hidden;
-			transition: 0.3s ease;
+			transition: 0.25s ease;
 			transform: translateY(10px);
 			z-index: 5;
 			background: white;
@@ -340,9 +340,9 @@
 							<div class="btn-group" dropdown>
 								<span id="js-css-mode-label">CSS</span><span class="caret"></span>
 								<ul class="js-modes-menu  dropdown__menu">
-									<li><a data-mode-type="css" data-mode="css">CSS</a></li>
-									<li><a data-mode-type="css" data-mode="scss">SCSS</a></li>
-									<li><a data-mode-type="css" data-mode="less">LESS</a></li>
+									<li><a data-type="css" data-mode="css">CSS</a></li>
+									<li><a data-type="css" data-mode="scss">SCSS</a></li>
+									<li><a data-type="css" data-mode="less">LESS</a></li>
 								</ul>
 							</div>
 						</div>
@@ -352,9 +352,9 @@
 							<div class="btn-group" dropdown>
 								<span id="js-js-mode-label">JS</span><span class="caret"></span>
 								<ul class="js-modes-menu  dropdown__menu">
-									<li><a data-mode-type="js" data-mode="js">JS</a></li>
-									<li><a data-mode-type="js" data-mode="coffee">CoffeeScript</a></li>
-									<li><a data-mode-type="js" data-mode="es6">ES6 (Babel)</a></li>
+									<li><a data-type="js" data-mode="js">JS</a></li>
+									<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
+									<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
 								</ul>
 							</div>
 						</div>
diff --git a/src/script.js b/src/script.js
index 6906627..b019aca 100644
--- a/src/script.js
+++ b/src/script.js
@@ -128,11 +128,17 @@
 		cssMode = value;
 		cssModelLabel.textContent = value;
 		editur.cm.css.setOption('mode', value);
+		chrome.storage.sync.set({
+			cssMode: value
+		}, function () {});
 	}
 	function updateJsMode(value) {
 		jsMode = value;
 		jsModelLabel.textContent = value;
 		editur.cm.js.setOption('mode', value);
+		chrome.storage.sync.set({
+			jsMode: value
+		}, function () {});
 	}
 	function computeHtml() {
 		return editur.cm.html.getValue();
@@ -203,9 +209,9 @@
 
 	editur.setPreviewContent = function () {
 		var html = computeHtml();
-		var cssPromise = css = computeCss();
-		var js = computeJs();
-		Promise.all([html, cssPromise, js]).then(function (result) {
+		var cssPromise = computeCss();
+		var jsPromise = computeJs();
+		Promise.all([html, cssPromise, jsPromise]).then(function (result) {
 			createPreviewFile(result[0], result[1], result[2]);
 		});
 	};
@@ -321,7 +327,7 @@
 				var type = e.currentTarget.dataset.type;
 				var currentMode = type === 'js' ? jsMode : cssMode;
 				if (currentMode !== mode) {
-					if (type = 'js') {
+					if (type === 'js') {
 						updateJsMode(mode);
 					} else {
 						updateCssMode(mode);
@@ -329,8 +335,6 @@
 				}
 			});
 		});
-		updateJsMode(jsMode);
-		updateCssMode(cssMode);
 
 		window.addEventListener('keydown', function (event) {
 			if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)){
@@ -375,7 +379,9 @@
 
 		// Get synced `preserveLastCode` setting to get back last code (or not).
 		chrome.storage.sync.get({
-			preserveLastCode: true
+			preserveLastCode: true,
+			jsMode: 'js',
+			cssMode: 'css'
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				editur.cm.html.setValue(lastCode.html);
@@ -385,6 +391,8 @@
 				editur.cm.css.refresh();
 				editur.cm.js.refresh();
 			}
+			updateJsMode(result.jsMode);
+			updateCssMode(result.cssMode);
 		});
 
 		// Check for new version notifications