diff --git a/static/index.html b/static/index.html
index ae504e47..c734eedf 100644
--- a/static/index.html
+++ b/static/index.html
@@ -14,10 +14,10 @@
 		<div id="logo">
 			<h1>Clusterio</h1>
 		</div>
-		<div id="storage" class="button-black">
+		<div id="storage-menu" onclick="display('storage');" class="button-black menuItem">
 			<p>Storage</p>
 		</div>
-		<div id="production" class="button-black">
+		<div id="production-menu" onclick="display('production');" class="button-black menuItem">
 			<p>Production</p>
 		</div>
 	</div>
@@ -33,6 +33,7 @@
 			<div id="legend">
 				
 			</div>
+			<canvas id="productionChart" width="400" height="150"></canvas>
 		</div>
 	</div>
 </body>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 21f4256c..ed6b580e 100644
--- a/static/main.js
+++ b/static/main.js
@@ -3,7 +3,7 @@ contents = {
 	"iron-plate":100,
 	"copper-plate":7312,
 }
-
+// nice functions
 function djb2(str){
   var hash = 5381;
   for (var i = 0; i < str.length; i++) {
@@ -20,6 +20,7 @@ function hashColor(str) {
   return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
 }
 
+// function to draw data we recieve from ajax requests
 function drawcontents(data) {
 	keys = Object.keys(data);
 	result = "<table>";
@@ -30,6 +31,100 @@ function drawcontents(data) {
 	document.getElementById("contents").innerHTML = result;
 }
 
+// handle the navigation buttons
+function display(page) {
+	var pages = document.querySelector("#body").childNodes;
+	for(i=0;i<pages.length;i++){
+		if(pages[i].style){
+			pages[i].style.display = "none";
+		}
+	}
+	if(typeof page == "string" && document.querySelector("#" + page)) {
+		document.querySelector("#" + page).style.display = "block";
+	}
+}
+
+// Function to redraw charts in case they bug out
+function drawcharts() {
+	// create chart of items in master storage
+	ctx = document.querySelector("#contentGraph").getContext('2d');
+    PieChart = new Chart(ctx);
+	
+	// production chart
+	// https://codepen.io/statuswoe/pen/hyldD
+	var count = 20;
+	var data = {
+		labels : ["1","2","3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
+		datasets : [
+			{
+				fillColor : "rgba(220,220,220,0.5)",
+				strokeColor : "rgba(220,220,220,1)",
+				pointColor : "rgba(220,220,220,1)",
+				pointStrokeColor : "#fff",
+				title:"one",
+				data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			},
+			{
+				fillColor : "rgba(151,187,205,0.5)",
+				strokeColor : "rgba(151,187,205,1)",
+				pointColor : "rgba(151,187,205,1)",
+				pointStrokeColor : "#fff",
+				title:"two",
+				data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+			}
+		]
+	}
+	// this is ugly, don't judge me
+	var updateData = function(oldData){
+		//console.log(piedata)
+		var labels = oldData["labels"];
+		var dataSetA = oldData["datasets"][0]["data"];
+		var dataSetB = oldData["datasets"][1]["data"];
+		
+		labels.shift();
+		count++;
+		labels.push(count.toString());
+		// this is where we generate new data
+		var newDataA =  piedata[0].value - piedataOld[0].value;
+		var newDataB = piedata[1].value - piedataOld[1].value;
+		dataSetA.push(newDataA);
+		dataSetB.push(newDataB);
+		dataSetA.shift();
+		dataSetB.shift();
+	};
+	
+	// Not sure why the scaleOverride isn't working...
+	var optionsNoAnimation = {
+		animation : false,
+		//Boolean - If we want to override with a hard coded scale
+		scaleOverride : true,
+		//** Required if scaleOverride is true **
+		//Number - The number of steps in a hard coded scale
+		scaleSteps : 20,
+		//Number - The value jump in the hard coded scale
+		scaleStepWidth : 10,
+		//Number - The scale starting value
+		scaleStartValue : 0
+	}
+	
+	//Get the context of the canvas element we want to select
+	var ctx = document.getElementById("productionChart").getContext("2d");
+	var optionsNoAnimation = {animation : false}
+	productionChart = new Chart(ctx);
+	productionChart.Line(data, optionsNoAnimation);	
+	
+	setInterval(function(){
+		updateData(data);
+		productionChart.Line(data, optionsNoAnimation);
+	},1000);
+}
+
+// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done
+setTimeout(function(){
+	drawcharts();
+},10)
+
+var piedata = false;
 setInterval(function() {
 	var xmlhttp = new XMLHttpRequest();
 	xmlhttp.onreadystatechange = function() {
@@ -37,6 +132,10 @@ setInterval(function() {
 			data = JSON.parse(xmlhttp.responseText);
 			drawcontents(data);
 			// render our piechart with up to date information
+			// items-in-network-chart
+			if(piedata) {
+				piedataOld = piedata;
+			}
 			piedata = [];
 			for(i=0;i<data.length;i++) {
 				piedata[piedata.length] = {
@@ -63,9 +162,3 @@ setInterval(function() {
 	xmlhttp.send();
 }, 500)
 
-// create chart of items in master storage
-// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done
-setTimeout(function(){
-	ctx = document.querySelector("#contentGraph").getContext('2d');
-    PieChart = new Chart(ctx);
-},10)
\ No newline at end of file