--- a/design/_includes/notes.html	Thu Jun 08 12:39:08 2017 +0200
+++ b/design/_includes/notes.html	Thu Jun 08 14:46:34 2017 +0200
@@ -1,3 +1,17 @@
 {% for note in site.data.bacon %}
-	{{ note | markdownify }}
+<div class="row note mb-2">
+	<div class="col col-3 d-flex flex-column justify-content-between small text-muted text-right metadata">
+		<div>10:20</div>
+		<div class="filler"></div>
+		<div>10:30</div>
+	</div>
+
+	<div class="col col-6 content">
+		{{ note | markdownify }}
+	</div>
+
+	<div class="margin col col-3 small text-muted">
+		{{ note | truncate: "100" | markdownify }}
+	</div>
+</div>
 {% endfor %}