diff --git a/priv/static/js/jenot.js b/priv/static/js/jenot.js
index 3dcb5a5..e917477 100644
--- a/priv/static/js/jenot.js
+++ b/priv/static/js/jenot.js
@@ -185,10 +185,15 @@ function renderNote(note) {
 
     note.content.forEach((task) => {
       const item = document.createElement("li");
+      if (task.checked) {
+        item.classList.add("checked");
+      }
       const check = document.createElement("p");
+      check.classList.add("checkbox");
       check.textContent = task.checked ? "☑" : "☐";
       item.appendChild(check);
       const itemContent = document.createElement("p");
+      itemContent.classList.add("content");
       itemContent.replaceChildren(...renderText(task.content));
       item.appendChild(itemContent);
       list.append(item);
diff --git a/priv/static/style.css b/priv/static/style.css
index 3fe6875..54c1146 100644
--- a/priv/static/style.css
+++ b/priv/static/style.css
@@ -280,6 +280,8 @@ button {
 }
 
 .note.readonly ul {
+  display: flex;
+  flex-direction: column;
   wdith: 100%;
   list-style-type: none;
   margin: 0;
@@ -293,10 +295,15 @@ button {
   margin-bottom: 4px;
 }
 
-task-list li:has(.checkbox input:checked) {
+.note.readonly ul li.checked {
   order: 1;
 }
 
+.note.readonly ul li.checked .content {
+  text-decoration: line-through;
+  color: var(--inactive-color);
+}
+
 .hidden {
   display: none;
 }