diff --git a/static/main.js b/static/main.js
index ed6b580e..319db5b2 100644
--- a/static/main.js
+++ b/static/main.js
@@ -20,12 +20,31 @@ function hashColor(str) {
   return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
 }
 
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 // function to draw data we recieve from ajax requests
+function hideThis(object) {
+	object.style.visibility = "hidden";
+}
+function sortByKey(array, key) {
+    return array.sort(function(a, b) {
+        var x = Number(a[key]); var y = Number(b[key]);
+        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
+    });
+}
 function drawcontents(data) {
-	keys = Object.keys(data);
+	var data = sortByKey(data, "count");
 	result = "<table>";
 	for(i = 0;i < data.length; i++) {
-		result = result + "<tr><td>" + data[i].name + "</td><td>" + data[i].count + "</td></tr>";
+		var img = "";
+		if(imagedata[data[i].name]){
+			img = "https://wiki.factorio.com/images/" + imagedata[data[i].name] + ".png"
+		} else {
+			img = "https://wiki.factorio.com/images/" + capitalizeFirstLetter(data[i].name) + ".png";
+		}
+		result = result + "<tr><td><image src='" + img + "' onerror='hideThis(this);'></td><td>" + data[i].name + "</td><td>" + data[i].count + "</td></tr>";
 	}
 	result = result + "</table>"
 	document.getElementById("contents").innerHTML = result;
@@ -87,6 +106,7 @@ function drawcharts() {
 		// this is where we generate new data
 		var newDataA =  piedata[0].value - piedataOld[0].value;
 		var newDataB = piedata[1].value - piedataOld[1].value;
+		// not quite sure how this works, where is dataSetA placed in data/the graph?
 		dataSetA.push(newDataA);
 		dataSetB.push(newDataB);
 		dataSetA.shift();
@@ -162,3 +182,47 @@ setInterval(function() {
 	xmlhttp.send();
 }, 500)
 
+// image data
+var imagedata = {
+	["raw-wood"]: "Raw-wood",
+	["alien-artifact"]: "Alien-artifact",
+	["heavy-oil"]: "Heavy-oil",
+	["engine-unit"]: "Engine-unit",
+	["electric-engine-unit"]: "Electric-engine-unit",
+	["flying-robot-frame"]: "Flying-robot-frame",
+	["alien-science_pack"]: "Alien-science-pack",
+	["empty-barrel"]: "Barrel-empty",
+	["transport-belt"]: "Basic-transport-belt",
+	["underground-belt"]: "Basic-transport-belt-to-ground",
+	["fast-underground-belt"]: "Fast-transport-belt-to-ground",
+	["express-underground-belt"]: "Express-transport-belt-to-ground",
+	["splitter"]: "Basic-splitter",
+	["inserter"]: "Inserter-icon",
+	["stack-inserter"]: "Stack_inserter",
+	["stack-filter-inserter"]: "Stack_filter_inserter",
+	["efficiency-module"]: "Effectivity-module",
+	["efficiency-module_2"]: "Effectivity-module-2",
+	["efficiency-module_3"]: "Effectivity-module-3",
+	["low-density-structure"]: "Rocket-structure",
+	["electric-mining-drill"]: "Basic-mining-drill",
+	["burner-mining-drill"]: "Burner-mining-drill",
+	["active-provider-chest"]: "Logistic-chest-active-provider",
+	["passive-provider-chest"]: "Logistic-chest-passive-provider",
+	["storage-chest"]: "Logistic-chest-storage",
+	["requester-chest"]: "Logistic-chest-requester",
+	["wall"]: "Stone-wall",
+	["medium-electric-pole"]: "Medium-electric-pole",
+	["lamp"]: "Small-lamp",
+	["regular-magazine"]: "Basic-bullet-magazine",
+	["piercing-rounds_magazine"]: "Piercing-bullet-magazine",
+	["flamethrower-ammo"]: "Flame-thrower-ammo",
+	["cannon-shells"]: "Cannon-shell",
+	["explosive-cannon-shells"]: "Explosive-cannon-shell",
+	["land-mine"]: "Land-mine-research",
+	["cluster-grenade"]: "Cluster_grenade",
+	["shotgun-shells"]: "Shotgun-shell",
+	["piercing-shotgun-shells"]: "Piercing-shotgun-shell",
+	["accumulator"]: "Basic-accumulator",
+	["beacon"]: "Basic-beacon",
+	
+}
diff --git a/static/style.css b/static/style.css
index b67f4dbb..995fcd40 100644
--- a/static/style.css
+++ b/static/style.css
@@ -22,6 +22,11 @@
 #contents table {
 	border: 1px solid black;
 }
+
+#contents td img {
+	height:32px;
+	width:32px;
+}
 #contentGraph {
 	float:left;
 }