diff --git a/apps/blog/src/pages/index.astro b/apps/blog/src/pages/index.astro
index c99b059..ad3566c 100644
--- a/apps/blog/src/pages/index.astro
+++ b/apps/blog/src/pages/index.astro
@@ -89,11 +89,15 @@ function extractDomain(url: string): string {
 
 <details open>
   <summary>guestbook</summary>
-<pre set:html={[
-  ...guestbookEntries.map(e => `<span class="muted">${formatDate(e.createdAt)}</span>    ${e.url ? `<a href="${e.url}">${e.name}</a>` : e.name}: ${e.message}`),
-  '',
-  '<a href="#" id="sign-guestbook">sign</a><span id="guestbook-status"></span>'
-].join('\n')} />
+  <div class="guestbook-entries">
+    {guestbookEntries.map(e => (
+      <div class="guestbook-entry">
+        <span class="date">{formatDate(e.createdAt)}</span>
+        <span set:html={`${e.url ? `<a href="${e.url}">${e.name}</a>` : e.name}: ${e.message}`} />
+      </div>
+    ))}
+  </div>
+  <pre class="guestbook-sign"><a href="#" id="sign-guestbook">sign</a><span id="guestbook-status"></span></pre>
 </details>
 
 <script>
diff --git a/apps/blog/src/styles/global.css b/apps/blog/src/styles/global.css
index b919912..545a5c0 100644
--- a/apps/blog/src/styles/global.css
+++ b/apps/blog/src/styles/global.css
@@ -46,3 +46,23 @@ summary::-webkit-details-marker {
 details pre {
   margin: 0;
 }
+
+.guestbook-entries {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.guestbook-entry {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0 4ch;
+}
+
+.guestbook-entry .date {
+  color: #888;
+}
+
+.guestbook-sign {
+  font-family: monospace;
+  white-space: pre;
+}