diff --git a/src/lib/core/InfoBroker.mjs b/src/lib/core/InfoBroker.mjs
index 7df82dc..8a9ae13 100644
--- a/src/lib/core/InfoBroker.mjs
+++ b/src/lib/core/InfoBroker.mjs
@@ -20,6 +20,7 @@ class InfoBroker {
 			// Note that the order here is the order in the web interface
 			cpu_live: async () => {
 				return {
+					// TODO: Add percentage CPU use here
 					frequency: await sysinfo.cpuCurrentSpeed(),
 					temperature: await sysinfo.cpuTemperature()
 				};
diff --git a/src/static/js/misc/find_in_obj.mjs b/src/static/js/misc/find_in_obj.mjs
new file mode 100644
index 0000000..0c11672
--- /dev/null
+++ b/src/static/js/misc/find_in_obj.mjs
@@ -0,0 +1,10 @@
+"use strict";
+
+export default function(obj, path) {
+	const current = obj;
+	for(const part of path.split(`.`)) {
+		if(typeof current[part] === "undefined") return undefined;
+		current = current[part];
+	}
+	return current;
+}
diff --git a/src/static/js/tabledefs/cpu_live.mjs b/src/static/js/tabledefs/cpu_live.mjs
index fe5d370..b1404f0 100644
--- a/src/static/js/tabledefs/cpu_live.mjs
+++ b/src/static/js/tabledefs/cpu_live.mjs
@@ -24,13 +24,14 @@ export default {
 			name: "Temperature (°C)",
 			type: "guage",
 			guage: { min: 0, max: 100 },
-			content: "main",
+			content: (table) => table.temperature.cores
+				.reduce((acc, next) => acc + next, 0) / table.temperature.cores.length,
 		},
 		{
 			name: "Chipset temperature (°C)",
 			type: "guage",
 			guage: { min: 0, max: 100 },
-			content: "main"
+			content: "temperature.chipset"
 		}
 	]
 };
diff --git a/src/static/js/ui/UIGauge.mjs b/src/static/js/ui/UIGauge.mjs
new file mode 100644
index 0000000..3db0eb8
--- /dev/null
+++ b/src/static/js/ui/UIGauge.mjs
@@ -0,0 +1,107 @@
+"use strict";
+
+import AbstractUIItem from './AbstractUIItem.mjs';
+
+import find_in_obj from '../misc/find_in_obj.mjs';
+
+class UIGauge extends AbstractUIItem {
+	constructor(el, def) {
+		super(el, def);
+		
+		this.chart_options = {
+			series: [{
+				name: def.name,
+				data: [] // TODO: Fill this with data values
+			}],
+			chart: {
+				type: "bar",
+				//height: 350,
+			},
+			plotOptions: { bar: {
+				horizontal: false,
+				
+			} },
+			xaxis: {
+				categories: [], // TODO: Fill this with hostname / ids
+			},
+			fill: { opacity: 1 },
+		}
+	}
+	
+	#__update_chart() {
+		this.chart.updateOptions(this.chart_options);
+		this.chart.render();
+	}
+	
+	clear() {
+		super.clear();
+		
+		this.chart_options.series[0].data.length = 0;
+		this.chart_options.xaxis.categories.length = 0;
+		
+		this.__update_chart();
+	}
+	
+	append(peer, table) {
+		
+		// TODO: Update this.chart_options.series[0].data & this.chart_options.xaxis.categories
+		
+		this.__update_chart();
+	}
+}
+
+export default UIGauge;
+
+
+var options = {
+	series: [{
+		name: 'Net Profit',
+		data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+	}, {
+		name: 'Revenue',
+		data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+	}, {
+		name: 'Free Cash Flow',
+		data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+	}],
+	chart: {
+		type: 'bar',
+		height: 350
+	},
+	plotOptions: {
+		bar: {
+			horizontal: false,
+			columnWidth: '55%',
+			endingShape: 'rounded'
+		},
+	},
+	dataLabels: {
+		enabled: false
+	},
+	stroke: {
+		show: true,
+		width: 2,
+		colors: ['transparent']
+	},
+	xaxis: {
+		categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+	},
+	yaxis: {
+		title: {
+			text: '$ (thousands)'
+		}
+	},
+	fill: {
+		opacity: 1
+	},
+	tooltip: {
+		y: {
+			formatter: function(val) {
+				return "$ " + val + " thousands"
+			}
+		}
+	}
+};
+
+var chart = new ApexCharts(document.querySelector("#chart"), options);
+chart.render();