diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index cf46128..b09415e 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -37,7 +37,7 @@
 
   <div id="watchlist-items" class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
     {{range $.AllEntries}}
-      <div class="watchlist-item flex w-full flex-col gap-2" data-status="{{.Status}}" data-created-at="{{.CreatedAt}}">
+      <div class="watchlist-item flex w-full flex-col gap-2" data-status="{{.Status}}" data-updated-at="{{.UpdatedAt.Unix}}">
         <div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
           <a href="/anime/{{.AnimeID}}" class="absolute inset-0 z-10"></a>
           <img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
@@ -136,8 +136,8 @@
         const titleB = b.querySelector('h3').textContent.toLowerCase().trim()
         comparison = titleA.localeCompare(titleB)
       } else {
-        const dateA = new Date(a.dataset.createdAt || 0).getTime()
-        const dateB = new Date(b.dataset.createdAt || 0).getTime()
+        const dateA = parseInt(a.dataset.updatedAt || 0)
+        const dateB = parseInt(b.dataset.updatedAt || 0)
         comparison = dateA - dateB
       }
       return sortOrderDesc ? -comparison : comparison
@@ -147,5 +147,10 @@
       grid.appendChild(item)
     })
   }
+
+  // Ensure items are sorted correctly on initial load
+  window.addEventListener('DOMContentLoaded', () => {
+    sortItems()
+  })
 </script>
 {{end}}
diff --git a/templates/watchlist_partial.gohtml b/templates/watchlist_partial.gohtml
index 9f14a1d..3519bf8 100644
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -41,7 +41,7 @@
         <div class="watchlist-section" data-status="{{$status}}">
           <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
             {{range $entries}}
-              <div class="watchlist-item flex w-full flex-col gap-2" data-created-at="{{.CreatedAt}}">
+              <div class="watchlist-item flex w-full flex-col gap-2" data-updated-at="{{.UpdatedAt.Unix}}">
                 <div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
                   <a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
                   <img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
@@ -139,8 +139,8 @@
           const titleB = b.querySelector('h3').textContent.toLowerCase()
           comparison = titleA.localeCompare(titleB)
         } else {
-          const dateA = new Date(a.dataset.createdAt || 0).getTime()
-          const dateB = new Date(b.dataset.createdAt || 0).getTime()
+          const dateA = parseInt(a.dataset.updatedAt || 0)
+          const dateB = parseInt(b.dataset.updatedAt || 0)
           comparison = dateA - dateB
         }
         return sortOrderDesc ? -comparison : comparison
@@ -151,5 +151,14 @@
       })
     })
   }
+
+  // Handle HTMX partial swaps
+  if (document.readyState === 'complete') {
+    sortItems()
+  } else {
+    window.addEventListener('DOMContentLoaded', () => {
+      sortItems()
+    })
+  }
 </script>
 {{end}}
\ No newline at end of file