diff --git a/src/index.html b/src/index.html
index b5c370c..1097f31 100644
--- a/src/index.html
+++ b/src/index.html
@@ -155,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">
diff --git a/src/script.js b/src/script.js
index c0b0bdf..33db7ca 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, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
+customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
+globalConsoleContainerEl
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -1864,6 +1865,7 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 		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',
@@ -1877,6 +1879,8 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 			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);
diff --git a/src/style.css b/src/style.css
index 3e912c2..b9b2a1a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -296,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;
@@ -897,7 +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 */