diff --git a/assets/css/app.css b/assets/css/app.css
index 7ac8a4e..a91ed90 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -118,6 +118,12 @@
   The components layer is for class-based styles that you want to be able to override with utilities.
 */
 @layer components {
+  .note {
+    .note-link {
+      @apply text-center text-neutral-900 dark:text-neutral-100;
+    }
+  }
+
   .divider {
     @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden before:bg-neutral-500/25 after:bg-neutral-500/25 before:mr-2 after:ml-2;
   }
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 1d1e168..8d05149 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 @@
 <section class="page-grid">
   <section>
-    <article class="h-entry hentry | stack container">
+    <article class="h-entry hentry note | stack container">
       <header class="prose max-w-none">
         <h1 class="p-name">
           <%= @note.name %>
@@ -16,7 +16,7 @@
       </section>
 
       <%= if String.length(@note.url || "") > 0 do %>
-        <section class="text-center">
+        <section class="note-link">
           <.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
         </section>
       <% end %>