--- 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 %}

--- a/design/_includes/zone.edit.html	Thu Jun 08 12:39:08 2017 +0200
+++ b/design/_includes/zone.edit.html	Thu Jun 08 14:46:34 2017 +0200
@@ -29,9 +29,10 @@
 </div>
 
 <div class="edit row">
-	<div class="metadata col col-3 small text-muted">
-	<div>10:09</div>
-	<div>10:21</div>
+	<div class="metadata col col-3 small text-muted d-flex  flex-column justify-content-between">
+		<div>10:09</div>
+		<div class="filler"></div>
+		<div>10:21</div>
 	</div>
 	<div class="col col-6">
 		<textarea class="form-control main" row="1" class=""></textarea>

--- a/design/css/main.scss	Thu Jun 08 12:39:08 2017 +0200
+++ b/design/css/main.scss	Thu Jun 08 14:46:34 2017 +0200
@@ -53,3 +53,16 @@
 	}
 }
 
+.note {
+	.metadata {
+		div {
+			line-height: 24px;
+		}
+	}
+
+	.content {
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

--- a/design/index.html	Thu Jun 08 12:39:08 2017 +0200
+++ b/design/index.html	Thu Jun 08 14:46:34 2017 +0200
@@ -25,11 +25,7 @@
 	</div>
 	
 	<div id="notes" class="container">
-		<div class="row justify-content-md-center">
-		        <div class="col col-6">
-		                {% include notes.html %}	
-		        </div>
-		</div>
+	   {% include notes.html %}	
 	</div>
 
 	<div id="editor" class="fixed-bottom">