diff --git a/public/index.html b/public/index.html
index 3be7906..638848b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,11 @@
 
 </head>
 <body>
+	<div id="controlBar">
+		<button onclick="slideBack()"><</button>
+		<span id="indexSlide"></span>
+		<button onclick="slideForward()">></button>
+	</div>
     <div id="leaderBoard" class="">
     	<button onclick="toggleLeaderBoard()">LeaderBoard</button>
     	<section id="listBoard">Loading...</section>
@@ -17,6 +22,7 @@
     <section id="honeyComb">
     	
     </section>
+    <section id="renderedHoneyComb"></section>
     <script type="text/javascript" src="scripts/socketSetup.js"></script>
     <script type="text/javascript" src="scripts/functions.js"></script>
     <audio id="bell" controls>
diff --git a/public/scripts/functions.js b/public/scripts/functions.js
index c2a0936..f43a861 100644
--- a/public/scripts/functions.js
+++ b/public/scripts/functions.js
@@ -1,9 +1,11 @@
 var points = 0;
+var totalRenders = 0;
 function updateDimensions( dimension ){
 	less.modifyVars({"@sizeWidth":dimension+"px"});
 }
 
-function populateHoneycomb( honeyCells ){
+function populateHoneycomb( honeyCells , index){
+
 
 	// honeyCells = jsonExample;
 	var height = "innerHeight" in window 
@@ -16,7 +18,7 @@ function populateHoneycomb( honeyCells ){
     // var cellWidth = ( height/honeyCells.height )*Math.sqrt(3);
     // if( width/honeyCells.width < height/honeyCells.height ){
     	
-   		var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
+   	var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
     // }
 
 
@@ -33,10 +35,11 @@ function populateHoneycomb( honeyCells ){
     	honeyCombHorizontal = true;
     }
 
-
-
     var honeyComb = document.getElementById("honeyComb");
-    honeyComb.innerHTML = "";
+    var renderedHoneyComb = document.getElementById("renderedHoneyComb");
+    renderedHoneyComb.innerHTML="";
+
+    honeyComb.innerHTML = "<div class='honeycombIndex'>"+index+"</div>";
 
     for (var i = honeyCells.height - 1; i >= 0; i--) {
     	var even = (i%2 == 0) ? "even" : "";
@@ -67,10 +70,29 @@ function populateHoneycomb( honeyCells ){
 
 
     };
-        setFilled( honeyCells, honeyCells.filled, "active" );
-        setFilled( honeyCells, honeyCells.touched, "touched" );
-        setFilled( honeyCells, honeyCells.unit, "unitMember" );
 
+    addHexDetails( honeyCells );
+    
+    renderImage( index );
+    totalRenders++;
+   	removeHexs();
+
+
+}
+function addHexDetails( honeyCells ){
+	setFilled( honeyCells, honeyCells.filled, "active" );
+
+    if(honeyCells.touched){
+    	setFilled( honeyCells, honeyCells.touched, "touched" );
+    }
+    if(honeyCells.unit){
+    	setFilled( honeyCells, honeyCells.unit, "unitMember" );
+    	
+    }
+}
+function removeHexs(){
+	var honeyComb = document.getElementById("honeyComb");
+	honeyComb.innerHTML = "";
 }
 function setFilled( honeyCells, cellsToCheck, className ){
 		// honeyCells = jsonExample;
@@ -85,6 +107,60 @@ function setFilled( honeyCells, cellsToCheck, className ){
 			honeyCell.className += " "+className;
 		};	
 }
+function renderImage(index){
+	html2canvas(document.getElementById("honeyComb")).then(function(canvas) {
+		canvas.id = "rendered_"+index;
+		canvas.className = "renderedCanvas";
+		if(index == 0){
+			canvas.className += " visible";
+		}
+	    document.getElementById("renderedHoneyComb").appendChild(canvas);
+	    totalRenders--;
+	    if( totalRenders == 0){
+	    	document.getElementById("controlBar").className += " visible";
+	    }
+
+	});
+}
+function orderRenderedCanvas(){
+	renders =  [].slice.call(renders);
+	renders.sort(function(a,b){
+
+		if(a.id.split("_")[1] == 0){
+			a.className += " visible";
+		}		
+
+		if(a.id.split("_")[1] < b.id.split("_")[1] ){
+			return -1;
+		}
+	});
+	var container = document.getElementById("renderedHoneyComb");
+	container.innerHTML = "";
+	for (var i = 0; i < renders.length; i++) {
+		container.appendChild(renders[i]);
+	};
+	// 17:43
+}
+function slideBack(){
+	var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
+	var actualId = actual.id.split("_")[1];
+	if(actualId > 0){
+		actualId--;
+	}
+	actual.className = "renderedCanvas";
+	document.getElementById("rendered_"+actualId).className += " visible";
+}
+
+function slideForward(){
+	var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
+	var actualId = actual.id.split("_")[1];
+	if(actualId < 10){
+		actualId++;
+	}
+	actual.className = "renderedCanvas";
+	document.getElementById("rendered_"+actualId).className += " visible";
+}
+
 function hasClass(el, cls) {
   return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
 }
@@ -141,7 +217,6 @@ function populateBoard(){
 			listBoard.innerHTML = results;
 
 
-
 }
 function updateLeaderBoard(){
 	loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());
diff --git a/public/scripts/socketSetup.js b/public/scripts/socketSetup.js
index d74ab43..8bc08ee 100644
--- a/public/scripts/socketSetup.js
+++ b/public/scripts/socketSetup.js
@@ -10,7 +10,14 @@ socket.on("jsonHoneycomb",function(message){
     */
     console.log("Message from the server arrived")
     var honeyCells = JSON.parse(message);
-    populateHoneycomb( honeyCells );
+    if( honeyCells.constructor === Array){
+        for (var i = 0; i < honeyCells.length; i++) {
+            populateHoneycomb( honeyCells[i], i );
+
+        };
+    }else{        
+        populateHoneycomb( honeyCells , 0);
+    }
     socket.emit('ackMessage', "true");
 
 });
diff --git a/public/style/style.less b/public/style/style.less
index 08c28e6..f77a624 100644
--- a/public/style/style.less
+++ b/public/style/style.less
@@ -26,6 +26,28 @@ audio{
 	-webkit-transition: all .5s ease-in-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
     transition: all .5s ease-in-out;
 }
+#controlBar{
+	position: fixed;
+	top: 0;
+	width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    z-index: 999;	
+    display: none;
+    &.visible{
+    	display: block;
+    }		
+}
+#renderedHoneyComb{
+	canvas{
+		height: 700px;
+    	position: absolute;
+    	display: none;
+	}
+	canvas.visible{
+		display: block;
+	}
+}
 #leaderBoard:extend(.transition)	{
 	position: fixed;
 	top: 0px;
@@ -73,6 +95,16 @@ audio{
 		right: 0;
 		opacity: 1;
 	}
+}
+.honeycombIndex{
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: rgba(185, 5, 198, 0.29);
+	padding: 20px;
+	z-index: 999;
+
+
 }
 .hex {
 	float: left;
