diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
new file mode 100644
index 0000000..4541525
--- /dev/null
+++ b/source/screens/demo/examples/clock.liquid
@@ -0,0 +1,34 @@
+---
+title: Clock
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign bodyClass = "body_clock" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<canvas id="clock" width="512" height="512"></canvas>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('clock');
+	const ctx = canvas.getContext('2d');
+
+	function drawRing(x, y, outerRadius, innerRadius, color) {
+		ctx.beginPath();
+		ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
+		ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
+		ctx.closePath();
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	drawRing(256, 256, 128, 96, 'black');
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 98e355e..fe2b7e8 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -14,4 +14,5 @@
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
 @use "modules/start";
+@use "modules/clock";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
new file mode 100644
index 0000000..74265da
--- /dev/null
+++ b/source/style/modules/_clock.scss
@@ -0,0 +1,9 @@
+@use "../../hippie-style/hippie";
+
+.body_clock {
+	main {
+		@extend .sec_main_center;
+		display: flex;
+		justify-content: center;
+	}
+}
\ No newline at end of file