diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 92e6c51..7e93bfe 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -1,39 +1,39 @@
-<article class="h-entry hentry">
-  <.header class="max-w-2xl mx-auto" class_title="p-name">
-    <%= @note.name %>
-  </.header>
+<article class="h-entry hentry | stack container">
+  <header class=">
+    <h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
+      <%= @note.name %>
+    </h1>
+  </header>
 
-  <%= if @current_user do %>
-    <section class="max-w-2xl mx-auto mt-8 print:hidden">
-      <ul class="flex gap-3">
-        <li>
-          <a href={~p"/admin/notes/#{@note}/edit"} class="button">
-            <.icon name="hero-pencil-square" /> Edit
-          </a>
-        </li>
-        <li><a href={~p"/admin/notes/#{@note}"} class="button">Show in Admin</a></li>
-      </ul>
-    </section>
-  <% end %>
+  <section class="print:hidden">
+    <ul class="flex gap-3">
+      <li>
+        <a href={~p"/admin/notes/#{@note}/edit"} class="button">
+          <.icon name="hero-pencil-square" /> Edit
+        </a>
+      </li>
+      <li><a href={~p"/admin/notes/#{@note}"} class="button">Show in Admin</a></li>
+    </ul>
+  </section>
 
-  <aside class="max-w-2xl mx-auto mt-8">
+  <aside>
     <.featured_images note={@note} />
   </aside>
 
   <%= if has_outline?(@note) do %>
-    <aside class="max-w-2xl mx-auto mt-8 prose prose-gruvbox print:hidden">
+    <aside class="prose print:hidden">
       <div class="bg-theme-background1 rounded p-2">
         <%= raw(render_outline(@note)) %>
       </div>
     </aside>
   <% end %>
 
-  <section class="mt-8 mx-auto max-w-2xl prose prose-gruvbox md:prose-lg lg:prose-xl | p-summary e-content">
+  <section class="p-summary e-content | prose">
     <%= Markdown.render(@note.content) |> raw %>
   </section>
 
   <%= if not Enum.empty?(@note.links_to) do %>
-    <section class="mt-8 prose prose-gruvbox max-w-2xl mx-auto">
+    <section class="prose ">
       Notes linking here:
       <ul>
         <%= for link <- @note.links_to do %>
@@ -44,12 +44,12 @@
   <% end %>
 
   <%= if String.length(@note.url || "") > 0 do %>
-    <section class="mt-8 max-w-2xl mx-auto text-center text-lg">
+    <section class="text-center">
       <.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
     </section>
   <% end %>
 
-  <footer class="max-w-2xl mx-auto mt-8 text-theme-base">
+  <footer>
     <%= if @note.published_at do %>
       <span>Published</span>
     <% else %>
@@ -74,7 +74,7 @@
     <a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
   </footer>
 
-  <section class="max-w-2xl mx-auto mt-8">
+  <section>
     <%= if !Enum.empty?(@note.images) do %>
       <div class="flex flex-wrap gap-3">
         <%= for image <- @note.images do %>