diff --git a/PatchNotes.Api/Routes/WatchlistRoutes.cs b/PatchNotes.Api/Routes/WatchlistRoutes.cs
index 9b2e5a28..5cf621f3 100644
--- a/PatchNotes.Api/Routes/WatchlistRoutes.cs
+++ b/PatchNotes.Api/Routes/WatchlistRoutes.cs
@@ -76,6 +76,7 @@ public static WebApplication MapWatchlistRoutes(this WebApplication app)
             var packages = await db.Watchlists
                 .AsNoTracking()
                 .Where(w => w.UserId == user.Id)
+                .OrderBy(w => w.Package.GithubOwner).ThenBy(w => w.Package.GithubRepo)
                 .Select(w => new WatchlistPackageDto(
                     w.Package.Id,
                     w.Package.Name,
diff --git a/patchnotes-web/src/pages/WatchlistPage.tsx b/patchnotes-web/src/pages/WatchlistPage.tsx
index b8cfa941..3bc303c2 100644
--- a/patchnotes-web/src/pages/WatchlistPage.tsx
+++ b/patchnotes-web/src/pages/WatchlistPage.tsx
@@ -270,17 +270,27 @@ export function WatchlistPage() {
                   </p>
                 </div>
               ) : (
-                (watchlist ?? []).map((pkg) => (
-                  <WatchedPackageItem
-                    key={pkg.id}
-                    pkg={pkg}
-                    onRemove={() => handleRemove(pkg.id)}
-                    isRemoving={
-                      removeFromWatchlist.isPending &&
-                      removeFromWatchlist.variables === pkg.id
-                    }
-                  />
-                ))
+                [...(watchlist ?? [])]
+                  .sort((a, b) => {
+                    const nameA = (
+                      a.npmName ?? `${a.githubOwner}/${a.githubRepo}`
+                    ).toLowerCase()
+                    const nameB = (
+                      b.npmName ?? `${b.githubOwner}/${b.githubRepo}`
+                    ).toLowerCase()
+                    return nameA.localeCompare(nameB)
+                  })
+                  .map((pkg) => (
+                    <WatchedPackageItem
+                      key={pkg.id}
+                      pkg={pkg}
+                      onRemove={() => handleRemove(pkg.id)}
+                      isRemoving={
+                        removeFromWatchlist.isPending &&
+                        removeFromWatchlist.variables === pkg.id
+                      }
+                    />
+                  ))
               )}
             </Card>
           </div>