diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index c82427cc6..92c632b79 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -26,6 +26,11 @@
     "penciller": "pencillers",
     "writer": "writers"
   },
+  "book_card": {
+    "error": "Error",
+    "unknown": "To be analyzed",
+    "unsupported": "Unsupported"
+  },
   "bookreader": {
     "beginning_of_book": "You're at the beginning of the book.",
     "changing_reading_direction": "Changing Reading Direction to",
diff --git a/komga-webui/src/types/items.ts b/komga-webui/src/types/items.ts
index c2d77e329..96afa0338 100644
--- a/komga-webui/src/types/items.ts
+++ b/komga-webui/src/types/items.ts
@@ -3,6 +3,7 @@ import {RawLocation} from 'vue-router/types/router'
 import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from "@/types/komga-series";
 import i18n from "@/i18n";
+import {MediaStatus} from "@/types/enum-books";
 
 export enum ItemTypes {
   BOOK, SERIES, COLLECTION, READLIST
@@ -65,7 +66,13 @@ export class BookItem extends Item<BookDto> {
   }
 
   body (): string {
-    return `<span>${i18n.tc('common.pages_n', this.item.media.pagesCount)}</span>`
+    switch (this.item.media.status) {
+      case MediaStatus.ERROR: return `<div class="text-truncate error--text">${i18n.t('book_card.error')}</div>`
+      case MediaStatus.UNSUPPORTED: return `<div class="text-truncate warning--text">${i18n.t('book_card.unsupported')}</div>`
+      case MediaStatus.UNKNOWN: return `<div class="text-truncate">${i18n.t('book_card.unknown')}</div>`
+      default: return `<div class="text-truncate">${i18n.tc('common.pages_n', this.item.media.pagesCount)}</div>`
+    }
+
   }
 
   to (): RawLocation {