diff --git a/planetstack/core/static/main.js b/planetstack/core/static/main.js
new file mode 100644
index 0000000..f6f7475
--- /dev/null
+++ b/planetstack/core/static/main.js
@@ -0,0 +1,153 @@
+$(document).ready(function() {
+
+	
+	function getServerData(url, label, value) {
+		var jqxhr = $.getJSON( url, function(data) {
+			if (value == 'nodesValue') {
+				var unit = '';
+				window.nodesCnt = data;
+			} else if (value == 'cpuValue'){
+				var unit = '%';
+				window.cpuCnt = data;
+			} else if (value == 'bandwidthValue'){
+				var unit = '';
+				window.bandData = data;
+			}
+			var legend = data.legend;
+			var data = data.data;
+			var dataLength = data.length - 1;
+			$('.'+label).text(legend).show();
+			$('.'+value).text(Math.round(data[dataLength][1])+unit).show();
+		})
+		
+	}
+	var selectedNodeTxt = $('.currentOriginalNode').text();
+	selectedNodeTxt = selectedNodeTxt.trim();
+	selectedNodeTxt = selectedNodeTxt.split(' ').join('');//selectedNodeTxt.replace(" ", "")
+	var parentNodeTxt = $('.selectedMainNav').text();
+	parentNodeTxt = parentNodeTxt.replace("/\n","");
+ 	parentNodeTxt = parentNodeTxt.replace("»","");
+	parentNodeTxt = parentNodeTxt.trim();
+	
+	baseNodeQuery = 'SELECT Minute(time) as Minute,COUNT(distinct %hostname) FROM [vicci.demoevents]';
+	baseCpuQuery = 'SELECT Minute(time) as Minute,AVG(i0) as Cpu FROM [vicci.demoevents]';
+	baseBwQuery = 'SELECT Minute(time) as Minute,AVG(i1) as Requests FROM [vicci.demoevents]';
+	groupByClause = ' GROUP BY Minute ORDER BY Minute';
+
+	if (selectedNodeTxt ) {
+		if (parentNodeTxt.length > 0 && parentNodeTxt.charAt(parentNodeTxt.length-1)=='s') {
+			parentNodeTxt = parentNodeTxt.substring(0, parentNodeTxt.length-1);
+		}
+		if (parentNodeTxt=='Slice') {
+			whereClause = " WHERE s3='"+selectedNodeTxt+"'";
+		} 
+		else if (parentNodeTxt=='Site') {
+			whereClause = " WHERE s2='"+selectedNodeTxt+"' OR %hostname CONTAINS '"+selectedNodeTxt+"'";
+		} 
+		else if (parentNodeTxt=='Node') {
+			whereClause = " WHERE %hostname='"+selectedNodeTxt+"'";
+			alert(whereClause);
+		} else {
+			console.log('Error: Unkown object type:'+parentNodeTxt)
+		}
+	} else {
+		whereClause = ''
+	}
+	finalNodeQuery = encodeURIComponent(baseNodeQuery + whereClause + groupByClause)
+	finalCpuQuery = encodeURIComponent(baseCpuQuery + whereClause + groupByClause)
+	finalBwQuery = encodeURIComponent(baseBwQuery + whereClause + groupByClause)
+	getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Node+Count&tqx=saber&q='+finalNodeQuery,'nodesLabel','nodesValue')
+	getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Load&tqx=saber&q='+finalCpuQuery,'cpuLabel','cpuValue')
+	getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Bandwidth&tqx=saber&q='+finalBwQuery,'bandwidthLabel','bandwidthValue')
+
+	$('.nodesLabel, .nodesValue').click(function() {
+		var jsonData = window.nodesCnt;
+		renderChart(jsonData);
+	});
+	$('.cpuLabel, .cpuValue').click(function() {
+		var jsonData = window.cpuCnt;
+		renderChart(jsonData);
+	});
+	$('.bandwidthLabel, .bandwidthValue').click(function() {
+		var jsonData = window.bandData;
+		renderChart(jsonData);
+	});
+
+	function renderChart(jsonData) {
+		$('#graph').empty();
+		$('#chartsModal').modal('show');
+		$('.modal-body').scrollTop(0)
+		var margin = {top: 0, right: 100, bottom: 100, left: 175},
+		width = 520 - margin.left - margin.right,
+		height = 300 - margin.top - margin.bottom;
+
+		var parseDate = d3.time.format("%Y-%m-%m-%H-%M").parse;
+
+		var x = d3.time.scale()
+		.range([0, width]);
+
+		var y = d3.scale.linear()
+		.range([height, 0]);
+
+		var xAxis = d3.svg.axis()
+		.scale(x)
+		.ticks(d3.time.minutes, 15)
+		.orient("bottom");
+
+		var yAxis = d3.svg.axis()
+		.scale(y)
+		.ticks(4)
+		.orient("left");
+
+		var line = d3.svg.line()
+		.x(function(d) { return x(d.date); })
+		.y(function(d) { return y(d.value); });
+
+		var svg = d3.select("#graph").append("svg")
+		.attr("width", width + margin.left + margin.right)
+		.attr("height", height + margin.top + margin.bottom)
+		.append("g")
+		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+		/*var data_path = "http://sabertooth.cs.princeton.edu/graphs/UpNodes";
+		d3.json(data_path, function(error, input) {*/
+			//jsonData = JSON.stringify(eval("(" + jsonData + ")"));
+			data = jsonData.data;//input['data'];
+			legend = jsonData.legend;//input['legend']
+			$('#chartHeading').text(legend);
+			data.forEach(function(d) {
+				d.date = new Date(d[0]*1000);
+				d.value = +d[1];
+				});
+					x.domain(d3.extent(data, function(d) { return d.date; }));
+
+					var e = d3.extent(data, function(d) { return d.value;});
+					e = [e[0]-1,e[1]+1];
+
+					y.domain(e);
+
+					svg.append("g")
+					.attr("class", "x axis")
+					.attr("transform", "translate(0," + height + ")")
+					.attr("x", 5)
+					.call(xAxis);
+
+					svg.append("g")
+					.attr("class", "y axis")
+					.call(yAxis)
+					.append("text")
+					.attr("transform", "rotate(-90)")
+					.attr("y", 6)
+					.attr("dy", ".71em")
+					.style("text-anchor", "end")
+					.text(legend)
+					.attr("class", "legend");
+
+					svg.append("path")
+					.datum(data)
+					.attr("class", "line")
+					.attr("d", line);
+				//});
+	}
+
+})
diff --git a/planetstack/core/static/planetstack.css b/planetstack/core/static/planetstack.css
index 59b2199..d59adb7 100644
--- a/planetstack/core/static/planetstack.css
+++ b/planetstack/core/static/planetstack.css
@@ -488,15 +488,12 @@
     background-position: 0;*/
 }
 
-.icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation, .icon-app{
+.icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation{
 background-position: left center;
 width:22px;
 height:22px;	
 }
 
-.icon-app {
-background-image: url("opencloudApp.png");
-}
 .icon-home {
 background-image: url("Home.png");
 }
@@ -564,3 +561,132 @@
     width: 700px;
     height: 400px;
 }
+
+
+
+
+
+/* Charts CSS */
+p.numeral
+{
+	font-size:32pt;
+	color:#ffffff;
+	opacity: 0.7;
+	font-family:Helvetica Neue;
+	font-weight:100;
+	text-align:center;
+	line-height:75%;
+}
+
+.helper-text
+{
+	border: 1px solid #fff;
+	padding: 7px;
+	border-radius: 18px;
+	font-size:13pt;
+	color:#ffffff;
+	opacity: 0.7;
+	font-family:Helvetica Neue;
+	font-weight:200;
+	text-align:center;
+	line-height:100%;
+}
+p.osobject
+{
+	font-size:12pt;
+	color:#ffffff;
+	opacity: 0.7;
+	font-family:Helvetica Neue;
+	font-weight:200;
+	text-align:center;
+	line-height:100%;
+}
+
+p.heading
+{
+	font-size:20pt;
+	color:#ffffff;
+	opacity: 0.7;
+	font-family:Helvetica Neue;
+	font-weight:200;
+	text-align:center;
+}
+
+/*p.heading
+{
+	font-size:32pt;
+	color:#ffffff;
+	opacity: 0.7;
+	font-family:Helvetica Neue;
+	font-weight:200;
+	text-align:center;
+}*/
+
+div.graph 
+{
+	height:340px;
+}
+
+div.numeral 
+{
+	height:120px;
+}
+
+div.heading 
+{
+	height:10px;
+}
+
+div.padding 
+{
+	height:20px;
+}
+
+div.chartContainer
+{
+	background-image:url('chartsBg.jpg');
+	width:527px;
+	height:400px;
+	border:1px;
+}
+
+/* D3 */
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #ffffff;
+  opacity: 0.7;
+  shape-rendering: crispEdges;
+}
+
+
+.x.axis path {
+  display: none;
+}
+
+.x.axis text {
+  fill: white;
+  opacity: 0.5;
+}
+
+.y.axis text {
+  opacity: 0.5;
+  fill: white;
+}
+
+.y.axis text.legend {
+  opacity: 1.0;
+  fill: white;
+  font-size:8pt;
+}
+
+.line {
+  fill: none;
+  stroke: white;
+  stroke-width: 3px;
+  opacity: 0.6;
+}
+
+
+/* Charts CSS */