diff --git a/octoprint_fullscreen/static/css/fullscreen.css b/octoprint_fullscreen/static/css/fullscreen.css
index f6fbada..6690a82 100644
--- a/octoprint_fullscreen/static/css/fullscreen.css
+++ b/octoprint_fullscreen/static/css/fullscreen.css
@@ -98,46 +98,76 @@ _:-ms-lang(x), _:-webkit-full-screen, .fullscreen img {
 	width: 100vh;
 }
 .fullscreen + #fullscreen-bar {
-	display: block;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+#fullscreen-bar,
+#fullscreen-tool-info,
+#fullscreen-tool-info .temp,
+#fullscreen-print-info .estimated {
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
 }
 #fullscreen-bar {
 	pointer-events: all;
 	display: none;
 	position: absolute;
-	left: 0;
 	right: 0;
 	bottom: 0;
-	background: rgba(0,0,0,.5);
 	font-size: 85%;
 	color: #fff;
-	padding: 10px 20px 10px;
-}
-#fullscreen-bar * {
-	display: inline-block;
+	padding: 10px;
 }
-#fullscreen-cancel,
-#fullscreen-cancel .user-buttons,
-#fullscreen-cancel button {
-	float: right;
+#fullscreen-buttons .user-buttons {
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-justify-content: flex-end;
+	-ms-justify-content: flex-end;
+	justify-content: flex-end;
+	margin: 5px 0;
 }
-#fullscreen-cancel button {
+#fullscreen-bar #fullscreen-buttons button {
 	width: auto;
 	margin: 0 0 0 10px;
+	-webkit-border-radius: 10px !important;
+	-ms-border-radius: 10px !important;
+	border-radius: 10px !important;
+}
+#fullscreen-tool-info p,
+#fullscreen-print-info p {
+	text-align: right;
+	line-height: 10px;
+	margin: 2px 0;
+}
+#fullscreen-bar #fullscreen-tool-info p span,
+#fullscreen-bar #fullscreen-print-info p > span {
+	margin: 0;
+	background: rgba(0, 0, 0, 0.25);
+	padding: 5px 10px;
+	display: inline-block;
+	line-height: 20px;
+	-webkit-border-radius: 10px !important;
+	-ms-border-radius: 10px !important;
+	border-radius: 10px !important;
+	overflow: hidden;
 }
-#fullscreen-cancel p,
-#fullscreen-info .temp p {
-	line-height: 30px;
-	margin: 0 10px 0 0;
-}
-#fullscreen_progressBar {
-	position: absolute;
+#fullscreen-progress-bar {
+	position: fixed;
 	left: 0;
 	width: 100%;
 	height: 5px;
-	border-radius: 0;
-	background: transparent;
+	background: transparent !important;
 	bottom: 0;
 	margin: 0;
+	-webkit-border-radius: 0;
+	-ms-border-radius: 0;
+	border-radius: 0;
 }
 .inlineFullscreen {
 	overflow: hidden;
diff --git a/octoprint_fullscreen/static/js/fullscreen.js b/octoprint_fullscreen/static/js/fullscreen.js
index 96cbf3d..0ec1dae 100644
--- a/octoprint_fullscreen/static/js/fullscreen.js
+++ b/octoprint_fullscreen/static/js/fullscreen.js
@@ -29,14 +29,14 @@ $(function() {
 		}
 
 		self.tempModel = parameters[0];
-		self.printer = parameters[2];
-		self.settings = parameters[1];
+		self.printer = parameters[1];
+		self.printer.fsp = {};
 
-		self.printer.printLayerProgress = ko.observable('');
-		self.printer.hasLayerProgress = ko.observable(false);
+		self.printer.fsp.printLayerProgress = ko.observable('');
+		self.printer.fsp.hasLayerProgress = ko.observable(false);
 
-		self.printer.isFullscreen = ko.observable(false);
-		self.printer.fullscreen = function() {
+		self.printer.fsp.isFullscreen = ko.observable(false);
+		self.printer.fsp.fullscreen = function() {
 			$fullscreenContainer.toggleFullScreen();
 		}
 
@@ -46,18 +46,18 @@ $(function() {
 					touchtime = new Date().getTime();
 					$webcam.trigger("click");
 					onceOpenInlineFullscreen = false;
-				}, 0);
+				}, 100);
 			}
 		}
 
 		self.onDataUpdaterPluginMessage = function (plugin, data) {
 			if (plugin.indexOf('DisplayLayerProgress') !== -1) {
-				if (!self.printer.hasLayerProgress()) {
-					self.printer.hasLayerProgress(true);
+				if (!self.printer.fsp.hasLayerProgress()) {
+					self.printer.fsp.hasLayerProgress(true);
 				}
 
 				if (data.currentLayer && data.totalLayer) {
-					self.printer.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer);
+					self.printer.fsp.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer);
 				}
 			}
 		};
@@ -90,7 +90,7 @@ $(function() {
 						}
 					}
 
-					if(self.printer.isFullscreen()) {
+					if(self.printer.fsp.isFullscreen()) {
 						$fullscreenContainer.toggleFullScreen();
 					}
 					touchtime = 0;
@@ -101,19 +101,21 @@ $(function() {
 		});
 
 		$(document).bind("fullscreenchange", function() {
-			self.printer.isFullscreen($(document).fullScreen());
+			self.printer.fsp.isFullscreen($(document).fullScreen());
 		});
 
 		$info.insertAfter($container);
 		$(".print-control #job_pause").clone().appendTo("#fullscreen-bar .user-buttons").attr('id', 'job_pause_clone');
 
-		ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-cancel").get(0));
+		ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-print-info").get(0));
+		ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-buttons").get(0));
+		ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-progress-bar").get(0));
 	}
 
 	OCTOPRINT_VIEWMODELS.push({
 		construct: FullscreenViewModel,
-		dependencies: ["temperatureViewModel", "settingsViewModel", "printerStateViewModel"],
+		dependencies: ["temperatureViewModel", "printerStateViewModel"],
 		optional: [],
-		elements: ["#fullscreen-info"]
+		elements: ["#fullscreen-tool-info"]
 	});
 });
diff --git a/octoprint_fullscreen/templates/fullscreen.jinja2 b/octoprint_fullscreen/templates/fullscreen.jinja2
index d9c8447..f01de35 100644
--- a/octoprint_fullscreen/templates/fullscreen.jinja2
+++ b/octoprint_fullscreen/templates/fullscreen.jinja2
@@ -1,31 +1,39 @@
 <div id="fullscreen-bar">
 
 	<!-- ko allowBindings: false -->
-		<div id="fullscreen-info">
-			<div class="temp">
-				<!-- ko foreach: tempModel.tools -->
-				<p data-bind="template: { name: 'tempFullscreenTemplate' }"></p>
-				<!-- /ko -->
-				<p data-bind="template: { name: 'tempFullscreenTemplate', data: tempModel.bedTemp }, visible: tempModel.hasBed"></p>
-			</div>
+	<div id="fullscreen-tool-info">
+		<div class="temp">
+			<!-- ko foreach: tempModel.tools -->
+			<p data-bind="template: { name: 'tempFullscreenTemplate' }"></p>
+			<!-- /ko -->
+			<p data-bind="template: { name: 'tempFullscreenTemplate', data: tempModel.bedTemp }, visible: tempModel.hasBed"></p>
 		</div>
+	</div>
 	<!-- /ko -->
 
+
 	<!-- ko allowBindings: false -->
-		<div id="fullscreen-cancel">
-			<div class="estimated">
-				<p>{{ _('Print Time') }}: <strong data-bind="text: printTimeString"></strong></p>
-				<p>{{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong></p>
-				<p data-bind="visible: hasLayerProgress">{{ _('Layer') }}: <strong data-bind="text: printLayerProgress"></strong></p>
-			</div>
-			<div class="progress" id="fullscreen_progressBar">
-				<div class="bar" data-bind="style: { width: progressString() + '%' }"></div>
-			</div>
+	<div id="fullscreen-print-info">
+		<div class="estimated">
+			<p><span>{{ _('Print Time') }}: <span data-bind="text: printTimeString"></span></span></p>
+			<p><span>{{ _('Print Time Left') }}: <span data-bind="text: printTimeLeftString"></span></span></p>
+			<p data-bind="visible: fsp.hasLayerProgress"><span>{{ _('Layer') }}: <span data-bind="text: fsp.printLayerProgress"></span></span></p>
+		</div>
+	</div>
+	<!-- /ko -->
 
-			<button class="btn" id="fullscreen-toggle" data-bind="click: fullscreen"><i class="icon-resize-full" aria-hidden="true" data-bind="css: { 'icon-resize-small': isFullscreen(), 'icon-resize-full': !isFullscreen() }"></i></button>
-			<div class="user-buttons" data-bind="visible: loginState.isUser">
-			</div>
+	<!-- ko allowBindings: false -->
+	<div id="fullscreen-buttons">
+		<div class="user-buttons" data-bind="visible: loginState.isUser">
+			<button class="btn" id="fullscreen-toggle" data-bind="click: fsp.fullscreen"><i class="icon-resize-full" aria-hidden="true" data-bind="css: { 'icon-resize-small': fsp.isFullscreen(), 'icon-resize-full': !fsp.isFullscreen() }"></i></button>
 		</div>
+	</div>
+	<!-- /ko -->
+
+	<!-- ko allowBindings: false -->
+	<div id="fullscreen-progress-bar" class="progress">
+		<div class="bar" data-bind="style: { width: progressString() + '%' }"></div>
+	</div>
 	<!-- /ko -->
 
 </div>