diff --git a/src/index.html b/src/index.html
index 1d75e04..aa72feb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -127,6 +127,11 @@
 							<use xlink:href="#mode-icon" />
 						</svg>
 					</a>
+					<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
+						<svg viewBox="0 0 100 100">
+							<rect x="0" y="0" width="100" height="100" />
+						</svg>
+					</a>
 
 					<div class="footer__separator"></div>
 
diff --git a/src/script.js b/src/script.js
index dc4af33..64cd05e 100644
--- a/src/script.js
+++ b/src/script.js
@@ -139,7 +139,10 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 		mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
 			direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
 			minSize: 34,
-			gutterSize: 6
+			gutterSize: 6,
+			onDragEnd: function () {
+				scope.setPreviewContent();
+			}
 		});
 	}
 	function toggleLayout(mode) {
@@ -153,13 +156,16 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 		layoutBtn1.classList.remove('selected');
 		layoutBtn2.classList.remove('selected');
 		layoutBtn3.classList.remove('selected');
+		layoutBtn4.classList.remove('selected');
 		$('#layoutBtn' + mode).classList.add('selected');
 		document.body.classList.remove('layout-1');
 		document.body.classList.remove('layout-2');
 		document.body.classList.remove('layout-3');
+		document.body.classList.remove('layout-4');
 		document.body.classList.add('layout-' + mode);
 
 		resetSplitting();
+		scope.setPreviewContent();
 	}
 
 	function onExternalLibChange() {
@@ -792,6 +798,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 		layoutBtn1.addEventListener('click', getToggleLayoutButtonListener(1));
 		layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
 		layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
+		layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
 
 		utils.onButtonClick(helpBtn, function () {
 			helpModal.classList.toggle('is-modal-visible');
diff --git a/src/style.css b/src/style.css
index 8f6490f..0c6de6f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -106,6 +106,15 @@ select, input[type="text"], textarea {
 	flex-direction: row;
 	width: auto;
 }
+.layout-4 .code-side {
+	display: none;
+}
+.layout-4 .code-side + .gutter {
+	display: none;
+}
+.layout-4 .demo-side {
+	width: 100% !important;
+}
 .code-wrap {
 	display: flex;
 	flex-direction: column;