apps/frontend/src/app/components/books/books-list.component.ts

@@ -595,6 +595,11 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
               <div class="book-info">
                 <h3>{{ book.title }}</h3>
                 <p class="author">by {{ book.author }}</p>
+                @if (book.series) {
+                  <p class="series">
+                    📚 {{ book.series }}@if (book.seriesOrder) { #{{ book.seriesOrder }}}
+                  </p>
+                }
 
                 <span class="status status-{{ book.status }}">
                   {{ getStatusLabel(book.status) }}
@@ -1011,6 +1016,14 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       margin: 0.5rem 0;
     }
 
+    .series {
+      color: #8b6f47;
+      font-size: 0.85rem;
+      margin: 0.5rem 0;
+      font-weight: 500;
+      font-style: italic;
+    }
+
     .status {
       display: inline-block;
       padding: 0.25rem 0.5rem;
@@ -1747,7 +1760,9 @@ export class BooksListComponent implements OnInit {
       notes: book.notes,
       coverImage: book.coverImage,
       tags: [...(book.tags || [])],
-      links: [...(book.links || [])]
+      links: [...(book.links || [])],
+      series: book.series,
+      seriesOrder: book.seriesOrder
     };
     this.editBookImagePreview.set(book.coverImage || null);
     this.showAddForm.set(false);

apps/frontend/src/app/components/games/games-list.component.ts

@@ -557,6 +557,11 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
                 @if (game.platform) {
                   <p class="platform">{{ game.platform }}</p>
                 }
+                @if (game.series) {
+                  <p class="series">
+                    📚 {{ game.series }}@if (game.seriesOrder) { #{{ game.seriesOrder }}}
+                  </p>
+                }
                 <span class="status status-{{ game.status }}">
                   {{ getStatusLabel(game.status) }}
                 </span>
@@ -898,6 +903,14 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       margin: 0.5rem 0;
     }
 
+    .series {
+      color: #8b6f47;
+      font-size: 0.85rem;
+      margin: 0.5rem 0;
+      font-weight: 500;
+      font-style: italic;
+    }
+
     .status {
       display: inline-block;
       padding: 0.25rem 0.5rem;
@@ -1542,7 +1555,9 @@ export class GamesListComponent implements OnInit {
       notes: game.notes,
       coverImage: game.coverImage,
       tags: [...(game.tags || [])],
-      links: [...(game.links || [])]
+      links: [...(game.links || [])],
+      series: game.series,
+      seriesOrder: game.seriesOrder
     };
     this.editGameImagePreview.set(game.coverImage || null);
     this.showAddForm.set(false);