diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 37c09f4..95792bb 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -1,6 +1,6 @@
-<div>
-  <header class="mx-auto max-w-xl">
-    <h1 class="mt-16 lg:text-5xl md:text-4xl text-3xl font-bold text-theme-base">
+<article class="h-entry hentry">
+  <header class="mx-auto max-w-2xl">
+    <h1 class="mt-16 lg:text-5xl md:text-4xl text-3xl font-bold text-theme-base | p-name">
       <%= @note.name %>
     </h1>
     <p class="mt-2 leading-6 text-theme-base">
@@ -9,10 +9,10 @@
       <% else %>
         <span>Unpublished</span>
       <% end %>
-      <time class="font-semibold"><%= pretty_date(@note.published_at) %></time>
+      <time class="font-semibold | dt-published"><%= pretty_date(@note.published_at) %></time>
       <.dot />
       <span>Last Updated</span>
-      <time class="font-semibold"><%= pretty_date(@note.updated_at) %></time>
+      <time class="font-semibold" datetime={datetime(@note.updated_at)}><%= pretty_date(@note.updated_at) %></time>
       <%= if not Enum.empty?(@note.tags) do %>
         <.dot />
         <span>Tags</span>
@@ -31,7 +31,7 @@
     </p>
   </header>
 
-  <section class="mx-auto mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
+  <section class="mx-auto mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl | p-summary e-content">
     <%= Markdown.render(@note.content) |> raw %>
   </section>
 
@@ -56,4 +56,4 @@
       </div>
     <% end %>
   </section>
-</div>
+</article>