diff --git a/src/octoprint/templates/mrbeam_index.jinja2 b/src/octoprint/templates/mrbeam_index.jinja2
index 3e6ec539..733b1bb7 100644
--- a/src/octoprint/templates/mrbeam_index.jinja2
+++ b/src/octoprint/templates/mrbeam_index.jinja2
@@ -9,13 +9,26 @@
 
 		{% include 'stylesheets.jinja2' %}
         {% include 'initscript.jinja2' %}
+		
+		<script type="text/javascript" >
+			function cycle_bg(){
+				var path = $('#cam').attr('xlink:href');
+				var m = path.match(/[0-9]+/);
+				var number = 0;
+				if(m.length > 0){
+					number = (parseInt(m[0]) + 1) % 12;
+				}
+				var nPath = "/plugin/svgtogcode/static/img/wa_preview/" + number + ".jpg";
+				$('#cam').attr('xlink:href', nPath);
+			}
+		</script>
     </head>
     <body>
 		<div class="container octoprint-container">
 		<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
 			<div class="container">
-				<div class="navbar-header brand" style="min-width: 272px;">
-					<a class="navbar-brand" href="#">
+				<div class="navbar-header brand" style="min-width: 272px;" onclick="cycle_bg()">
+					<a class="navbar-brand" href="#" >
 						<img alt="Mr Beam Logo" src="{{ url_for('static', filename='img/mr-typo-red_x120.png') }}">
 					</a>
 				</div>
@@ -316,6 +329,9 @@
 											<feFuncB type="table" tableValues="0.2 1"></feFuncB>
 										</feComponentTransfer>
 									</filter>
+									<image id="cam" xlink:href="/plugin/svgtogcode/static/img/wa_preview/0.jpg" x="0" y="0" 
+										   height="0px" width="0px" data-bind="attr: { width: workingAreaWidthPx()+'px', height: workingAreaHeightPx()+'px'}" />
+
 									<g id="scaleGroup" data-bind="attr: { transform: scaleMatrix() }">
 
 										<text
