diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 1ef49bc..054b628 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -20,26 +20,37 @@ tags:
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
 
-	function drawRing(seconds) {
+	function drawCircle(seconds, minutes, hours) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
 		const radius = 128;
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-		const startAngle = -0.5 * Math.PI; // Start at the top
-		const endAngle = startAngle + (2 * Math.PI * (seconds / 60));
+		function drawArc(value, maxValue, radius, strokeStyle) {
+			const startAngle = -0.5 * Math.PI; // Start at the top
+			const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
 
-		ctx.beginPath();
-		ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
-		ctx.lineWidth = 16;
-		ctx.strokeStyle = 'black';
-		ctx.stroke();
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+			ctx.lineWidth = 16;
+			ctx.strokeStyle = strokeStyle;
+			ctx.stroke();
+		}
+
+		drawArc(seconds, 60, radius, 'black');
+		drawArc(minutes, 60, radius - 20, 'lightgrey');
+		// drawArc(hours % 12, 12, radius - 40, 'white');
+		drawArc(hours, 24, radius - 40, 'white');
 	}
 
 	function updateCircle() {
-		const currentSeconds = new Date().getSeconds();
-		drawRing(currentSeconds);
+		const currentDate = new Date();
+		const currentSeconds = currentDate.getSeconds();
+		const currentMinutes = currentDate.getMinutes();
+		const currentHours = currentDate.getHours();
+
+		drawCircle(currentSeconds, currentMinutes, currentHours);
 	}
 
 	updateCircle();