From 0cc2c566ab5fbbfea6ed47bb9b8da326d0b7b586 Mon Sep 17 00:00:00 2001
From: Uchechukwu Orji <orjiuchechukwu52@yahoo.com>
Date: Wed, 1 Jul 2026 21:17:31 +0100
Subject: [PATCH] filter books by offliner or issues and show books as cards

---
 backend/src/cms_backend/api/routes/books.py   |  39 +---
 backend/src/cms_backend/db/book.py            |   1 +
 backend/src/cms_backend/db/books.py           |  96 ++++-----
 backend/src/cms_backend/db/title.py           |   1 +
 .../mill/mark_staging_books_for_deletion.py   |  17 +-
 backend/src/cms_backend/schemas/models.py     |  24 +++
 backend/src/cms_backend/schemas/orms.py       |   1 +
 backend/tests/api/routes/test_books.py        |  51 +++++
 backend/tests/api/routes/test_titles.py       |   1 +
 backend/tests/db/test_books.py                |  67 ++++---
 dev/frontend-dev/config.json                  |   1 +
 frontend/public/config.json                   |   1 +
 frontend/src/components/BookCard.vue          | 174 ++++++++++++++++
 .../src/components/BookIssuesIndicator.vue    |  70 +++++++
 frontend/src/components/BookLocationChip.vue  |  48 +++++
 frontend/src/components/BookStatus.vue        | 185 ------------------
 .../src/components/BookStatusIndicator.vue    |  59 ++++++
 frontend/src/components/BookTable.vue         | 106 ++++++++--
 frontend/src/components/BooksViewFilters.vue  |   6 +-
 frontend/src/components/EventFilters.vue      |   2 +-
 frontend/src/components/InboxBookFilters.vue  |  64 +++++-
 .../components/ZimfarmNotificationFilters.vue |   2 +-
 frontend/src/config.ts                        |   1 +
 frontend/src/stores/book.ts                   |   4 +
 frontend/src/stores/zimfarm/offliner.ts       |  46 +++++
 frontend/src/types/book.ts                    |   1 +
 frontend/src/utils/format.ts                  |   9 +
 frontend/src/views/BookView.vue               |  30 ++-
 frontend/src/views/InboxView.vue              |  35 +++-
 frontend/src/views/TitleView.vue              |  38 ++--
 30 files changed, 831 insertions(+), 349 deletions(-)
 create mode 100644 frontend/src/components/BookCard.vue
 create mode 100644 frontend/src/components/BookIssuesIndicator.vue
 create mode 100644 frontend/src/components/BookLocationChip.vue
 delete mode 100644 frontend/src/components/BookStatus.vue
 create mode 100644 frontend/src/components/BookStatusIndicator.vue
 create mode 100644 frontend/src/stores/zimfarm/offliner.ts

diff --git a/backend/src/cms_backend/api/routes/books.py b/backend/src/cms_backend/api/routes/books.py
index cf929e2e..59464d62 100644
--- a/backend/src/cms_backend/api/routes/books.py
+++ b/backend/src/cms_backend/api/routes/books.py
@@ -1,4 +1,3 @@
-import datetime
 from http import HTTPStatus
 from typing import Annotated, Literal
 from uuid import UUID
@@ -35,6 +34,7 @@
 from cms_backend.schemas.models import (
     BookLanguagesSchema,
     BookUpdateSchema,
+    GetBooksSchema,
     ZimUrlsSchema,
 )
 from cms_backend.schemas.orms import (
@@ -50,51 +50,18 @@ class BookMoveSchema(BaseModel):
     destination: Literal["prod", "staging"]
 
 
-class BooksGetSchema(BaseModel):
-    skip: SkipField = 0
-    limit: LimitFieldMax200 = 20
-    id: NotEmptyString | None = None
-    has_title: bool | None = None
-    needs_processing: bool | None = None
-    has_error: bool | None = None
-    needs_file_operation: bool | None = None
-    location_kinds: list[NotEmptyString] | None = None
-    needs_attention: bool | None = None
-    has_backup: bool | None = None
-    updated_before: datetime.datetime | None = None
-    updated_after: datetime.datetime | None = None
-    name: NotEmptyString | None = None
-    flavour: NotEmptyString | None = None
-
-
 class RevertBookSchema(BaseModel):
     comment: NotEmptyString | None = None
 
 
 @router.get("")
 def get_books(
-    params: Annotated[BooksGetSchema, Query()],
+    params: Annotated[GetBooksSchema, Query()],
     session: Annotated[OrmSession, Depends(gen_dbsession)],
 ) -> ListResponse[BookLightSchema]:
     """Get a list of books"""
 
-    results = db_get_books(
-        session,
-        skip=params.skip,
-        limit=params.limit,
-        book_id=params.id,
-        has_title=params.has_title,
-        needs_processing=params.needs_processing,
-        has_error=params.has_error,
-        needs_file_operation=params.needs_file_operation,
-        location_kinds=params.location_kinds,
-        needs_attention=params.needs_attention,
-        updated_before=params.updated_before,
-        updated_after=params.updated_after,
-        name=params.name,
-        flavour=params.flavour,
-        has_backup=params.has_backup,
-    )
+    results = db_get_books(session, params=params)
 
     return ListResponse[BookLightSchema](
         meta=calculate_pagination_metadata(
diff --git a/backend/src/cms_backend/db/book.py b/backend/src/cms_backend/db/book.py
index d975d5fe..f5c03804 100644
--- a/backend/src/cms_backend/db/book.py
+++ b/backend/src/cms_backend/db/book.py
@@ -139,6 +139,7 @@ def create_book_full_schema(book: Book) -> BookFullSchema:
         zimcheck_summary=ZimcheckSummarySchema.model_validate(book.zimcheck_summary)
         if book.zimcheck_summary
         else None,
+        offliner=book.zim_metadata.get("Scraper"),
     )
 
 
diff --git a/backend/src/cms_backend/db/books.py b/backend/src/cms_backend/db/books.py
index f6e46bdc..77cfdb04 100644
--- a/backend/src/cms_backend/db/books.py
+++ b/backend/src/cms_backend/db/books.py
@@ -1,4 +1,3 @@
-import datetime
 from pathlib import Path
 from uuid import UUID
 
@@ -10,30 +9,19 @@
 from cms_backend.db import count_from_stmt
 from cms_backend.db.models import Book, BookLocation, Collection, CollectionTitle, Title
 from cms_backend.db.rules import has_flavour_mismatch
-from cms_backend.schemas.models import BookLanguagesSchema, ZimUrlSchema, ZimUrlsSchema
+from cms_backend.schemas.models import (
+    BookLanguagesSchema,
+    GetBooksSchema,
+    ZimUrlSchema,
+    ZimUrlsSchema,
+)
 from cms_backend.schemas.orms import BookLightSchema, ListResult
 from cms_backend.utils.filename import construct_download_url
 
 
 def get_books(
     session: OrmSession,
-    *,
-    skip: int,
-    limit: int,
-    book_id: str | None = None,
-    name: str | None = None,
-    flavour: str | None = None,
-    has_title: bool | None = None,
-    needs_processing: bool | None = None,
-    has_error: bool | None = None,
-    needs_file_operation: bool | None = None,
-    location_kinds: list[str] | None = None,
-    needs_attention: bool | None = None,
-    has_backup: bool | None = None,
-    updated_before: datetime.datetime | None = None,
-    updated_after: datetime.datetime | None = None,
-    created_before: datetime.datetime | None = None,
-    omit_book_ids: list[UUID] | None = None,
+    params: GetBooksSchema,
 ) -> ListResult[BookLightSchema]:
     """Get a list of books"""
 
@@ -52,48 +40,58 @@ def get_books(
         Book.flavour,
         Book.issues,
         Title.flavours,
+        Book.zim_metadata["Scraper"].astext.label("scraper"),
     ).join(Title, Book.title_id == Title.id, isouter=True)
 
-    if book_id is not None:
-        stmt = stmt.where(Book.id.cast(String).ilike(f"%{book_id}%"))
+    if params.id is not None:
+        stmt = stmt.where(Book.id.cast(String).ilike(f"%{params.id}%"))
 
-    if name is not None:
-        stmt = stmt.where(Book.name.ilike(f"%{name}%"))
+    if params.name is not None:
+        stmt = stmt.where(Book.name.ilike(f"%{params.name}%"))
 
-    if flavour is not None:
-        stmt = stmt.where(Book.flavour == flavour)
+    if params.flavour is not None:
+        stmt = stmt.where(Book.flavour == params.flavour)
 
-    if has_title is not None:
-        if has_title:
+    if params.has_title is not None:
+        if params.has_title:
             stmt = stmt.where(Book.title_id.is_not(None))
         else:
             stmt = stmt.where(Book.title_id.is_(None))
 
-    if needs_processing is not None:
-        stmt = stmt.where(Book.needs_processing == needs_processing)
+    if params.needs_processing is not None:
+        stmt = stmt.where(Book.needs_processing == params.needs_processing)
 
-    if has_error is not None:
-        stmt = stmt.where(Book.has_error == has_error)
+    if params.has_error is not None:
+        stmt = stmt.where(Book.has_error == params.has_error)
 
-    if needs_file_operation is not None:
-        stmt = stmt.where(Book.needs_file_operation == needs_file_operation)
+    if params.needs_file_operation is not None:
+        stmt = stmt.where(Book.needs_file_operation == params.needs_file_operation)
 
-    if location_kinds is not None:
-        stmt = stmt.where(Book.location_kind.in_(location_kinds))
+    if params.location_kinds is not None:
+        stmt = stmt.where(Book.location_kind.in_(params.location_kinds))
 
-    if updated_before is not None:
-        stmt = stmt.where(Book.updated_at < updated_before)
+    if params.updated_before is not None:
+        stmt = stmt.where(Book.updated_at < params.updated_before)
 
-    if updated_after is not None:
-        stmt = stmt.where(Book.updated_at > updated_after)
+    if params.updated_after is not None:
+        stmt = stmt.where(Book.updated_at > params.updated_after)
 
-    if created_before is not None:
-        stmt = stmt.where(Book.created_at < created_before)
+    if params.created_before is not None:
+        stmt = stmt.where(Book.created_at < params.created_before)
 
-    if omit_book_ids is not None:
-        stmt.where(Book.id.not_in(omit_book_ids))
+    if params.omit_book_ids is not None:
+        stmt = stmt.where(Book.id.not_in(params.omit_book_ids))
 
-    if needs_attention is True:
+    if params.offliner is not None:
+        stmt = stmt.where(
+            Book.zim_metadata.has_key("Scraper"),
+            Book.zim_metadata["Scraper"].astext.ilike(f"%{params.offliner}%"),
+        )
+
+    if params.issue is not None:
+        stmt = stmt.where(Book.issues.contains([params.issue]))
+
+    if params.needs_attention is True:
         stmt = stmt.where(
             or_(
                 Book.location_kind.in_(["quarantine", "staging"]),
@@ -103,7 +101,7 @@ def get_books(
                 Book.has_error.is_(True),
             )
         )
-    elif needs_attention is False:
+    elif params.needs_attention is False:
         stmt = stmt.where(
             and_(
                 Book.location_kind.not_in(["quarantine", "staging", "deleted"]),
@@ -114,7 +112,7 @@ def get_books(
             )
         )
 
-    if has_backup:
+    if params.has_backup:
         backup_books = (
             select(BookLocation.book_id)
             .where(BookLocation.status == "current", BookLocation.is_backup.is_(True))
@@ -122,7 +120,7 @@ def get_books(
         )
         stmt = stmt.where(Book.id.in_(backup_books))
 
-    if needs_attention is True:
+    if params.needs_attention is True:
         order_clauses = [
             Book.has_error,
             Book.location_kind.in_(["staging", "to_delete"]).desc(),
@@ -167,6 +165,7 @@ def get_books(
                 has_flavour_mismatch=has_flavour_mismatch(flavour, title_flavours)
                 if title_flavours is not None
                 else False,
+                offliner=scraper,
             )
             for (
                 book_id_result,
@@ -183,8 +182,9 @@ def get_books(
                 flavour,
                 book_issues,
                 title_flavours,
+                scraper,
             ) in session.execute(
-                stmt.offset(skip).limit(limit).order_by(*order_clauses)
+                stmt.offset(params.skip).limit(params.limit).order_by(*order_clauses)
             ).all()
         ],
     )
diff --git a/backend/src/cms_backend/db/title.py b/backend/src/cms_backend/db/title.py
index 70304dcb..3fca1c5a 100644
--- a/backend/src/cms_backend/db/title.py
+++ b/backend/src/cms_backend/db/title.py
@@ -80,6 +80,7 @@ def create_title_full_schema(title: Title) -> TitleFullSchema:
                 flavour=book.flavour,
                 issues=book.issues,
                 has_flavour_mismatch=has_flavour_mismatch(book.flavour, title.flavours),
+                offliner=book.zim_metadata.get("Scraper"),
             )
             for book in sorted(
                 title.books,
diff --git a/backend/src/cms_backend/mill/mark_staging_books_for_deletion.py b/backend/src/cms_backend/mill/mark_staging_books_for_deletion.py
index 5046c170..0a993fd3 100644
--- a/backend/src/cms_backend/mill/mark_staging_books_for_deletion.py
+++ b/backend/src/cms_backend/mill/mark_staging_books_for_deletion.py
@@ -6,6 +6,7 @@
 from cms_backend.db.book import delete_book
 from cms_backend.db.books import get_books
 from cms_backend.mill.context import Context as MillContext
+from cms_backend.schemas.models import GetBooksSchema
 from cms_backend.utils.datetime import getnow
 
 
@@ -16,13 +17,15 @@ def mark_staging_books_for_deletion(session: OrmSession):
     while True:
         results = get_books(
             session,
-            needs_file_operation=False,
-            needs_processing=False,
-            created_before=getnow() - MillContext.staging_books_lifespan,
-            skip=0,
-            limit=50,
-            location_kinds=["staging"],
-            omit_book_ids=omit_book_ids,
+            GetBooksSchema(
+                needs_file_operation=False,
+                needs_processing=False,
+                created_before=getnow() - MillContext.staging_books_lifespan,
+                skip=0,
+                limit=50,
+                location_kinds=["staging"],
+                omit_book_ids=omit_book_ids,
+            ),
         )
         if not results.records:
             break
diff --git a/backend/src/cms_backend/schemas/models.py b/backend/src/cms_backend/schemas/models.py
index 8ecba0ff..8cfa5002 100644
--- a/backend/src/cms_backend/schemas/models.py
+++ b/backend/src/cms_backend/schemas/models.py
@@ -1,3 +1,4 @@
+import datetime
 import re
 from dataclasses import dataclass
 from pathlib import Path
@@ -10,7 +11,9 @@
     Base64Str,
     GraphemeLength,
     LangCode,
+    LimitFieldMax200,
     NotEmptyString,
+    SkipField,
     ZimFlavour,
 )
 from cms_backend.context import Context
@@ -37,6 +40,27 @@ class ZimUrlsSchema(BaseModel):
     urls: dict[UUID, list[ZimUrlSchema]]
 
 
+class GetBooksSchema(BaseModel):
+    skip: SkipField = 0
+    limit: LimitFieldMax200 = 20
+    id: NotEmptyString | None = None
+    name: NotEmptyString | None = None
+    flavour: NotEmptyString | None = None
+    has_title: bool | None = None
+    needs_processing: bool | None = None
+    has_error: bool | None = None
+    needs_file_operation: bool | None = None
+    location_kinds: list[NotEmptyString] | None = None
+    needs_attention: bool | None = None
+    has_backup: bool | None = None
+    updated_before: datetime.datetime | None = None
+    updated_after: datetime.datetime | None = None
+    created_before: datetime.datetime | None = None
+    omit_book_ids: list[UUID] | None = None
+    offliner: NotEmptyString | None = None
+    issue: NotEmptyString | None = None
+
+
 class BookLanguagesSchema(BaseModel):
     languages: list[str]
 
diff --git a/backend/src/cms_backend/schemas/orms.py b/backend/src/cms_backend/schemas/orms.py
index f8e6af1c..f813c210 100644
--- a/backend/src/cms_backend/schemas/orms.py
+++ b/backend/src/cms_backend/schemas/orms.py
@@ -135,6 +135,7 @@ class BookLightSchema(BaseModel):
     date: str | None
     flavour: str | None
     issues: list[str]
+    offliner: str | None
     has_flavour_mismatch: bool
 
 
diff --git a/backend/tests/api/routes/test_books.py b/backend/tests/api/routes/test_books.py
index bf18f413..88d04f12 100644
--- a/backend/tests/api/routes/test_books.py
+++ b/backend/tests/api/routes/test_books.py
@@ -277,6 +277,57 @@ def test_get_books_filter_by_id(
     assert response_doc["items"][0]["id"] == str(book1.id)
 
 
+def test_get_books_filter_by_offliner(
+    client: TestClient,
+    create_book: Callable[..., Book],
+):
+    """Test get books endpoint passes offliner filter to database layer"""
+
+    book1 = create_book(
+        _id=UUID("12345678-1234-5678-1234-567812345678"),
+        zim_metadata={"test": "book1", "Scraper": "mwoffliner 1.17.5"},
+    )
+    create_book(
+        _id=UUID("87654321-4321-8765-4321-876543218765"),
+        zim_metadata={"test": "book2", "Scraper": "sotoki 1.14"},
+    )
+
+    # Test that offliner parameter is passed through and filters correctly
+    response = client.get("/v1/books?offliner=mwoffliner")
+    assert response.status_code == HTTPStatus.OK
+    response_doc = response.json()
+    assert response_doc["meta"]["count"] == 1
+    assert response_doc["items"][0]["id"] == str(book1.id)
+
+
+def test_get_books_filter_by_issues(
+    dbsession: OrmSession,
+    client: TestClient,
+    create_book: Callable[..., Book],
+):
+    """Test get books endpoint passes scraper filter to database layer"""
+
+    book1 = create_book(
+        _id=UUID("12345678-1234-5678-1234-567812345678"),
+        zim_metadata={"test": "book1", "Scraper": "mwoffliner 1.17.5"},
+    )
+    book1.issues = ["flavour mismatch"]
+    dbsession.add(book1)
+    dbsession.flush()
+
+    create_book(
+        _id=UUID("87654321-4321-8765-4321-876543218765"),
+        zim_metadata={"test": "book2", "Scraper": "sotoki 1.14"},
+    )
+
+    # Test that scraper parameter is passed through and filters correctly
+    response = client.get("/v1/books?issue=flavour mismatch")
+    assert response.status_code == HTTPStatus.OK
+    response_doc = response.json()
+    assert response_doc["meta"]["count"] == 1
+    assert response_doc["items"][0]["id"] == str(book1.id)
+
+
 def test_get_book_languages(
     client: TestClient,
     dbsession: OrmSession,
diff --git a/backend/tests/api/routes/test_titles.py b/backend/tests/api/routes/test_titles.py
index 901d5799..fd4519b8 100644
--- a/backend/tests/api/routes/test_titles.py
+++ b/backend/tests/api/routes/test_titles.py
@@ -395,6 +395,7 @@ def test_get_title_by_id_with_books(
         "deletion_date",
         "issues",
         "has_flavour_mismatch",
+        "offliner",
     }
     assert data["books"][0]["title_id"] == str(title.id)
     assert data["books"][1]["title_id"] == str(title.id)
diff --git a/backend/tests/db/test_books.py b/backend/tests/db/test_books.py
index 006424b5..0ceac1ff 100644
--- a/backend/tests/db/test_books.py
+++ b/backend/tests/db/test_books.py
@@ -24,6 +24,7 @@
     Title,
     Warehouse,
 )
+from cms_backend.schemas.models import GetBooksSchema
 from cms_backend.utils.datetime import getnow
 
 
@@ -54,7 +55,7 @@ def test_get_book_exist(dbsession: OrmSession, book: Book):
 
 def test_get_books_empty(dbsession: OrmSession):
     """Returns empty list when no books exist"""
-    results = get_books(dbsession, skip=0, limit=20)
+    results = get_books(dbsession, GetBooksSchema(skip=0, limit=20))
     assert results.nb_records == 0
     assert len(results.records) == 0
 
@@ -70,7 +71,7 @@ def test_get_books_with_data(
         book = create_book()
         books.append(book)
 
-    results = get_books(dbsession, skip=0, limit=20)
+    results = get_books(dbsession, GetBooksSchema(skip=0, limit=20))
     assert results.nb_records == 5
     assert len(results.records) == 5
 
@@ -103,8 +104,10 @@ def test_get_books_pagination(
 
     results = get_books(
         dbsession,
-        skip=skip,
-        limit=limit,
+        GetBooksSchema(
+            skip=skip,
+            limit=limit,
+        ),
     )
     assert results.nb_records == 8
     assert len(results.records) <= limit
@@ -144,9 +147,11 @@ def test_get_books_filter_by_has_title(
 
     results = get_books(
         dbsession,
-        skip=0,
-        limit=20,
-        has_title=has_title,
+        GetBooksSchema(
+            skip=0,
+            limit=20,
+            has_title=has_title,
+        ),
     )
     assert results.nb_records == expected_count
     assert len(results.records) == expected_count
@@ -202,9 +207,11 @@ def test_get_books_book_id_filter(
 
     results = get_books(
         dbsession,
-        skip=0,
-        limit=20,
-        book_id=book_id_filter,
+        GetBooksSchema(
+            skip=0,
+            limit=20,
+            id=book_id_filter,
+        ),
     )
 
     assert results.nb_records == expected_count
@@ -245,21 +252,27 @@ def test_get_books_book_id_combined_with_other_filters(
     dbsession.flush()
 
     # Filter by ID pattern "aaaa" - should match book1 and book2
-    results = get_books(dbsession, skip=0, limit=20, book_id="aaaa")
+    results = get_books(dbsession, GetBooksSchema(skip=0, limit=20, id="aaaa"))
     assert results.nb_records == 2
 
     # Filter by ID pattern "aaaa" AND has_title=true - should only match book1
-    results = get_books(dbsession, skip=0, limit=20, book_id="aaaa", has_title=True)
+    results = get_books(
+        dbsession, GetBooksSchema(skip=0, limit=20, id="aaaa", has_title=True)
+    )
     assert results.nb_records == 1
     assert results.records[0].id == book1.id
 
     # Filter by ID pattern "aaaa" AND has_title=false - should only match book2
-    results = get_books(dbsession, skip=0, limit=20, book_id="aaaa", has_title=False)
+    results = get_books(
+        dbsession, GetBooksSchema(skip=0, limit=20, id="aaaa", has_title=False)
+    )
     assert results.nb_records == 1
     assert results.records[0].id == book2.id
 
     # Filter by ID pattern "bbbb" AND has_title=true - should only match book3
-    results = get_books(dbsession, skip=0, limit=20, book_id="bbbb", has_title=True)
+    results = get_books(
+        dbsession, GetBooksSchema(skip=0, limit=20, id="bbbb", has_title=True)
+    )
     assert results.nb_records == 1
     assert results.records[0].id == book3.id
 
@@ -307,9 +320,11 @@ def test_get_books_filter_by_needs_attention(
 
     results = get_books(
         dbsession,
-        skip=0,
-        limit=20,
-        needs_attention=needs_attention,
+        GetBooksSchema(
+            skip=0,
+            limit=20,
+            needs_attention=needs_attention,
+        ),
     )
 
     assert results.nb_records == expected_count
@@ -1226,10 +1241,12 @@ def test_get_books_time_filters(
 
     results = get_books(
         dbsession,
-        skip=0,
-        limit=20,
-        updated_after=updated_after,
-        updated_before=updated_before,
+        GetBooksSchema(
+            skip=0,
+            limit=20,
+            updated_after=updated_after,
+            updated_before=updated_before,
+        ),
     )
     assert results.nb_records == expected_count
     assert len(results.records) == expected_count
@@ -1270,9 +1287,11 @@ def test_get_books_created_before_filters(
 
     results = get_books(
         dbsession,
-        skip=0,
-        limit=20,
-        created_before=created_before,
+        GetBooksSchema(
+            skip=0,
+            limit=20,
+            created_before=created_before,
+        ),
     )
     assert results.nb_records == expected_count
     assert len(results.records) == expected_count
diff --git a/dev/frontend-dev/config.json b/dev/frontend-dev/config.json
index b8aafe84..2909dfe5 100644
--- a/dev/frontend-dev/config.json
+++ b/dev/frontend-dev/config.json
@@ -1,5 +1,6 @@
 {
   "CMS_API": "http://localhost:37601/v1",
+  "ZIMFARM_API": "http://localhost:8000/v2",
   "OAUTH_BASE_URL": "https://ory.login-staging.kiwix.org",
   "LOGIN_MODES": ["local", "oauth"]
 }
diff --git a/frontend/public/config.json b/frontend/public/config.json
index 2d5e951c..683097ad 100644
--- a/frontend/public/config.json
+++ b/frontend/public/config.json
@@ -1,5 +1,6 @@
 {
   "CMS_API": "https://api.cms.openzim.org/v1",
+  "ZIMFARM_API": "https://api.farm.openzim.org/v2",
   "MATOMO_ENABLED": false,
   "MATOMO_HOST": "https://stats.kiwix.org",
   "MATOMO_SITE_ID": 12,
diff --git a/frontend/src/components/BookCard.vue b/frontend/src/components/BookCard.vue
new file mode 100644
index 00000000..a79f18df
--- /dev/null
+++ b/frontend/src/components/BookCard.vue
@@ -0,0 +1,174 @@
+<template>
+  <v-card elevation="2" class="h-100 d-flex flex-column border">
+    <v-card-title class="d-flex flex-column align-start pa-4">
+      <div class="d-flex align-center flex-wrap w-100">
+        <div class="text-subtitle-1 text-truncate flex-grow-1">
+          {{ displayName }}
+        </div>
+      </div>
+
+      <div class="d-flex align-center flex-wrap mt-2 ga-2">
+        <v-chip v-if="book.flavour" size="small" variant="tonal" color="primary">
+          {{ book.flavour }}
+        </v-chip>
+
+        <v-chip v-if="book.date" size="small" variant="outlined">
+          <v-icon start size="small">mdi-calendar</v-icon>
+          {{ book.date }}
+        </v-chip>
+
+        <v-chip v-if="offlinerName !== 'Unknown'" size="small" variant="outlined" color="teal">
+          <v-icon start size="small">mdi-cogs</v-icon>
+          {{ offlinerName }}
+        </v-chip>
+
+        <v-chip v-if="book.deletion_date" size="small" variant="outlined" color="red">
+          <v-icon start size="small">mdi-delete-clock</v-icon>
+          {{ formatDt(book.deletion_date, 'ff') }}
+        </v-chip>
+      </div>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-4">
+      <div class="d-flex flex-column ga-2">
+        <!-- Status -->
+        <div class="d-flex justify-space-between align-center">
+          <div class="text-body-2 font-weight-medium">Status</div>
+          <BookStatusIndicator :book="book" />
+        </div>
+
+        <!-- Location -->
+        <div v-if="showLocationChip" class="d-flex justify-space-between align-center">
+          <div class="text-body-2 font-weight-medium">Location</div>
+          <BookLocationChip :book="book" />
+        </div>
+
+        <!-- Issues -->
+        <div
+          v-if="book.issues && book.issues.length"
+          class="d-flex justify-space-between align-start"
+        >
+          <div class="text-body-2 font-weight-medium">Issues</div>
+          <div class="d-flex flex-column ga-1">
+            <v-chip
+              v-for="(issue, idx) in book.issues"
+              :key="idx"
+              size="x-small"
+              color="red"
+              variant="outlined"
+              class="align-self-end"
+            >
+              <span class="text-truncate d-block">{{ issue }}</span>
+            </v-chip>
+          </div>
+        </div>
+      </div>
+    </v-card-text>
+    <v-divider />
+
+    <v-card-actions class="pa-3 justify-end">
+      <v-tooltip location="top">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn
+            v-bind="tooltipProps"
+            :to="{ name: 'book-detail', params: { id: book.id } }"
+            variant="text"
+            size="small"
+            icon
+            @click.stop
+          >
+            <v-icon>mdi-information</v-icon>
+          </v-btn>
+        </template>
+        <span>View Book</span>
+      </v-tooltip>
+
+      <template v-if="showUrls && zimUrls && zimUrls[book.id]">
+        <ZimUrlButtons
+          :urls="zimUrls[book.id]"
+          :loading="loadingUrls"
+          :compact="true"
+          empty-text=""
+        />
+      </template>
+
+      <v-tooltip v-if="canViewBookIssues && book.issues && book.issues.length" location="top">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn
+            v-bind="tooltipProps"
+            :to="{
+              name: 'book-detail-tab',
+              params: { id: book.id, selectedTab: 'issues' },
+            }"
+            variant="text"
+            size="small"
+            icon
+            @click.stop
+          >
+            <v-icon>mdi-bell-alert</v-icon>
+          </v-btn>
+        </template>
+        <span>View Issues</span>
+      </v-tooltip>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import BookStatusIndicator from '@/components/BookStatusIndicator.vue'
+import BookLocationChip from '@/components/BookLocationChip.vue'
+import ZimUrlButtons from '@/components/ZimUrlButtons.vue'
+import type { BookLight, ZimUrl } from '@/types/book'
+import { formatDt, matchOffliner } from '@/utils/format'
+import { useAuthStore } from '@/stores/auth'
+import { useZimfarmOfflinerStore } from '@/stores/zimfarm/offliner'
+import { computed, onMounted } from 'vue'
+
+const authStore = useAuthStore()
+const offlinerStore = useZimfarmOfflinerStore()
+
+onMounted(async () => {
+  await offlinerStore.fetchOffliners()
+})
+
+interface Props {
+  book: BookLight
+  showUrls?: boolean
+  zimUrls?: Record<string, ZimUrl[]>
+  loadingUrls?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showUrls: false,
+  zimUrls: undefined,
+  loadingUrls: false,
+})
+
+const displayName = computed(() => {
+  return props.book.title_name || props.book.name || props.book.id
+})
+
+const isErrored = computed(() => props.book.has_error)
+const isProcessing = computed(() => props.book.needs_processing && !props.book.has_error)
+const isDeleted = computed(() => props.book.location_kind === 'deleted')
+const isToBeDeleted = computed(() => props.book.location_kind === 'to_delete')
+
+const showLocationChip = computed(() => {
+  // If the evaluated status is 'Errored' or 'Processing', we want to show the location chip
+  // even if the location is 'deleted' or 'to_delete' so the user knows where the errored/processing book is.
+  if (isErrored.value) return true
+  if (isProcessing.value) return true
+  // Otherwise, if the status evaluates exactly to 'Deleted' or 'To Be Deleted', we hide the redundant chip.
+  if (isDeleted.value) return false
+  if (isToBeDeleted.value) return false
+  return true
+})
+
+const offlinerName = computed(() => matchOffliner(props.book.offliner, offlinerStore.offliners))
+
+const canViewBookIssues = computed(() => {
+  return authStore.hasPermission('book', 'update')
+})
+</script>
diff --git a/frontend/src/components/BookIssuesIndicator.vue b/frontend/src/components/BookIssuesIndicator.vue
new file mode 100644
index 00000000..18c12068
--- /dev/null
+++ b/frontend/src/components/BookIssuesIndicator.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-menu
+    v-if="book.issues && book.issues.length"
+    :close-on-content-click="false"
+    v-model="menuOpen"
+  >
+    <template #activator="{ props: menuProps }">
+      <v-chip
+        v-bind="menuProps"
+        size="x-small"
+        color="warning"
+        variant="flat"
+        style="width: fit-content"
+      >
+        <v-icon size="x-small" class="mr-1">mdi-alert</v-icon>
+        {{ book.issues.length }}
+      </v-chip>
+    </template>
+
+    <v-list class="pa-2" density="compact">
+      <v-list-item
+        v-for="(warning, index) in book.issues"
+        :key="index"
+        class="py-0"
+        style="min-height: unset"
+      >
+        <template #prepend>
+          <span class="mr-2">•</span>
+        </template>
+        <v-list-item-title class="text-wrap">{{ warning }}</v-list-item-title>
+      </v-list-item>
+
+      <div v-if="canViewBookIssues">
+        <v-divider class="my-0" />
+        <v-btn
+          color="primary"
+          variant="elevated"
+          size="small"
+          block
+          :to="{
+            name: 'book-detail-tab',
+            params: { id: book.id, selectedTab: 'issues' },
+          }"
+          @click="menuOpen = false"
+        >
+          <v-icon size="small" class="mr-1">mdi-alert-circle</v-icon>
+          View Issues
+        </v-btn>
+      </div>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Book, BookLight } from '@/types/book'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+const menuOpen = ref(false)
+
+defineProps<{
+  book: Book | BookLight
+}>()
+
+const canViewBookIssues = computed(() => {
+  return authStore.hasPermission('book', 'update')
+})
+</script>
diff --git a/frontend/src/components/BookLocationChip.vue b/frontend/src/components/BookLocationChip.vue
new file mode 100644
index 00000000..a0971a7c
--- /dev/null
+++ b/frontend/src/components/BookLocationChip.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-chip size="x-small" :color="locationColor" variant="flat" style="width: fit-content">
+    {{ locationLabel }}
+  </v-chip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Book, BookLight } from '@/types/book'
+
+const props = defineProps<{
+  book: Book | BookLight
+}>()
+
+const locationLabel = computed(() => {
+  switch (props.book.location_kind) {
+    case 'quarantine':
+      return 'Quarantine'
+    case 'staging':
+      return 'Staging'
+    case 'prod':
+      return 'Production'
+    case 'to_delete':
+      return 'To Delete'
+    case 'deleted':
+      return 'Deleted'
+    default:
+      return 'Unknown'
+  }
+})
+
+const locationColor = computed(() => {
+  switch (props.book.location_kind) {
+    case 'quarantine':
+      return 'warning'
+    case 'staging':
+      return 'secondary'
+    case 'prod':
+      return 'success'
+    case 'to_delete':
+      return 'info'
+    case 'deleted':
+      return 'red-lighten-1'
+    default:
+      return 'grey'
+  }
+})
+</script>
diff --git a/frontend/src/components/BookStatus.vue b/frontend/src/components/BookStatus.vue
deleted file mode 100644
index 70ec3e20..00000000
--- a/frontend/src/components/BookStatus.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <div
-    class="d-flex ga-1 py-md-1 ga-md-0"
-    :class="
-      forceRow ? 'flex-row justify-start' : 'flex-row flex-md-column justify-end justify-md-end'
-    "
-  >
-    <div class="d-flex align-center" :class="forceRow ? 'mb-0 mr-2' : 'mb-1 mb-md-0 mr-md-2'">
-      <template v-if="isErrored">
-        <v-icon size="small" color="error" icon="mdi-alert-circle-outline"></v-icon>
-        <span class="text-caption ml-1">Errored</span>
-      </template>
-      <template v-else-if="isProcessing">
-        <v-icon size="small" color="grey" icon="mdi-clock-outline"></v-icon>
-        <span class="text-caption ml-1">Processing</span>
-      </template>
-      <template v-else-if="isDeleted">
-        <v-icon size="small" color="grey-darken-2" icon="mdi-delete"></v-icon>
-        <span class="text-caption ml-1">Deleted</span>
-      </template>
-      <template v-else-if="isToBeDeleted">
-        <v-icon size="small" color="warning" icon="mdi-delete-clock"></v-icon>
-        <span class="text-caption ml-1">To Be Deleted</span>
-      </template>
-      <template v-else-if="isMovingFiles">
-        <v-icon size="small" color="info" icon="mdi-truck-delivery-outline"></v-icon>
-        <span class="text-caption ml-1">Moving Files</span>
-      </template>
-      <template v-else-if="!hasTitle">
-        <v-icon size="small" color="warning" icon="mdi-alert-circle-outline"></v-icon>
-        <span class="text-caption ml-1">Pending Title</span>
-      </template>
-      <template v-else-if="isStaging">
-        <v-icon size="small" color="warning" icon="mdi-eye-outline"></v-icon>
-        <span class="text-caption ml-1">Staging</span>
-      </template>
-      <template v-else>
-        <v-icon size="small" color="success" icon="mdi-check-circle"></v-icon>
-        <span class="text-caption ml-1">Published</span>
-      </template>
-    </div>
-    <v-chip
-      v-if="showLocationChip"
-      size="x-small"
-      :color="locationColor"
-      variant="flat"
-      class="align-self-start mb-1 mr-1"
-    >
-      {{ locationLabel }}
-    </v-chip>
-
-    <!-- Issues indicator -->
-    <v-menu v-if="hasIssues" :close-on-content-click="false" v-model="menuOpen">
-      <template #activator="{ props: menuProps }">
-        <v-chip
-          v-bind="menuProps"
-          size="x-small"
-          color="warning"
-          variant="flat"
-          :class="forceRow ? 'mb-0 mr-2' : 'mb-1 mb-md-0 mr-md-2'"
-          class="align-self-start"
-        >
-          <v-icon size="x-small" class="mr-1">mdi-alert</v-icon>
-          {{ book.issues.length }}
-        </v-chip>
-      </template>
-
-      <v-list class="pa-2 pt-0" density="compact">
-        <v-list-item
-          v-for="(warning, index) in book.issues"
-          :key="index"
-          class="py-0"
-          style="min-height: unset"
-        >
-          <template #prepend>
-            <span class="mr-2">•</span>
-          </template>
-          <v-list-item-title class="text-wrap">{{ warning }}</v-list-item-title>
-        </v-list-item>
-
-        <div v-if="canViewBookIssues">
-          <v-divider class="my-0" />
-          <v-btn
-            color="primary"
-            variant="elevated"
-            size="small"
-            block
-            :to="{
-              name: 'book-detail-tab',
-              params: { id: book.id, selectedTab: 'issues' },
-            }"
-            @click="menuOpen = false"
-          >
-            <v-icon size="small" class="mr-1">mdi-alert-circle</v-icon>
-            View Issues
-          </v-btn>
-        </div>
-      </v-list>
-    </v-menu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { Book, BookLight } from '@/types/book'
-import { useAuthStore } from '@/stores/auth'
-
-const authStore = useAuthStore()
-
-const canViewBookIssues = computed(() => {
-  return authStore.hasPermission('book', 'update')
-})
-
-const menuOpen = ref(false)
-
-const props = withDefaults(
-  defineProps<{
-    book: Book | BookLight
-    forceRow?: boolean
-  }>(),
-  {
-    forceRow: false,
-  },
-)
-
-const isErrored = computed(() => props.book.has_error)
-const isDeleted = computed(() => props.book.location_kind === 'deleted')
-const isToBeDeleted = computed(() => props.book.location_kind === 'to_delete')
-const isStaging = computed(() => props.book.location_kind === 'staging')
-const isProcessing = computed(() => props.book.needs_processing && !props.book.has_error)
-const isMovingFiles = computed(
-  () =>
-    props.book.needs_file_operation &&
-    !props.book.has_error &&
-    props.book.location_kind !== 'to_delete' &&
-    props.book.location_kind !== 'deleted',
-)
-const hasTitle = computed(() => props.book.title_id)
-const hasIssues = computed(() => props.book.issues && props.book.issues.length > 0)
-
-const showLocationChip = computed(() => {
-  // If the evaluated status is 'Errored' or 'Processing', we want to show the location chip
-  // even if the location is 'deleted' or 'to_delete' so the user knows where the errored/processing book is.
-  if (isErrored.value) return true
-  if (isProcessing.value) return true
-  // Otherwise, if the status evaluates exactly to 'Deleted' or 'To Be Deleted', we hide the redundant chip.
-  if (isDeleted.value) return false
-  if (isToBeDeleted.value) return false
-  return true
-})
-
-const locationLabel = computed(() => {
-  switch (props.book.location_kind) {
-    case 'quarantine':
-      return 'Quarantine'
-    case 'staging':
-      return 'Staging'
-    case 'prod':
-      return 'Production'
-    case 'to_delete':
-      return 'To Be Deleted'
-    case 'deleted':
-      return 'Deleted'
-    default:
-      return 'Unknown'
-  }
-})
-
-const locationColor = computed(() => {
-  switch (props.book.location_kind) {
-    case 'quarantine':
-      return 'warning'
-    case 'staging':
-      return 'secondary'
-    case 'prod':
-      return 'success'
-    case 'to_delete':
-      return 'info'
-    case 'deleted':
-      return 'red-lighten-1'
-    default:
-      return 'grey'
-  }
-})
-</script>
diff --git a/frontend/src/components/BookStatusIndicator.vue b/frontend/src/components/BookStatusIndicator.vue
new file mode 100644
index 00000000..0a7c0585
--- /dev/null
+++ b/frontend/src/components/BookStatusIndicator.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="d-inline-flex align-center">
+    <template v-if="isErrored">
+      <v-icon size="small" color="error" icon="mdi-alert-circle-outline" />
+      <span class="text-caption ml-1">Errored</span>
+    </template>
+    <template v-else-if="isProcessing">
+      <v-icon size="small" color="grey" icon="mdi-clock-outline" />
+      <span class="text-caption ml-1">Processing</span>
+    </template>
+    <template v-else-if="isDeleted">
+      <v-icon size="small" color="grey-darken-2" icon="mdi-delete" />
+      <span class="text-caption ml-1">Deleted</span>
+    </template>
+    <template v-else-if="isToBeDeleted">
+      <v-icon size="small" color="warning" icon="mdi-delete-clock" />
+      <span class="text-caption ml-1">To Be Deleted</span>
+    </template>
+    <template v-else-if="isMovingFiles">
+      <v-icon size="small" color="info" icon="mdi-truck-delivery-outline" />
+      <span class="text-caption ml-1">Moving Files</span>
+    </template>
+    <template v-else-if="!hasTitle">
+      <v-icon size="small" color="warning" icon="mdi-alert-circle-outline" />
+      <span class="text-caption ml-1">Pending Title</span>
+    </template>
+    <template v-else-if="isStaging">
+      <v-icon size="small" color="warning" icon="mdi-eye-outline" />
+      <span class="text-caption ml-1">Staging</span>
+    </template>
+    <template v-else>
+      <v-icon size="small" color="success" icon="mdi-check-circle" />
+      <span class="text-caption ml-1">Published</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Book, BookLight } from '@/types/book'
+
+const props = defineProps<{
+  book: Book | BookLight
+}>()
+
+const isErrored = computed(() => props.book.has_error)
+const isDeleted = computed(() => props.book.location_kind === 'deleted')
+const isToBeDeleted = computed(() => props.book.location_kind === 'to_delete')
+const isStaging = computed(() => props.book.location_kind === 'staging')
+const isProcessing = computed(() => props.book.needs_processing && !props.book.has_error)
+const isMovingFiles = computed(
+  () =>
+    props.book.needs_file_operation &&
+    !props.book.has_error &&
+    props.book.location_kind !== 'to_delete' &&
+    props.book.location_kind !== 'deleted',
+)
+const hasTitle = computed(() => props.book.title_id)
+</script>
diff --git a/frontend/src/components/BookTable.vue b/frontend/src/components/BookTable.vue
index b000e1b1..e9d68a66 100644
--- a/frontend/src/components/BookTable.vue
+++ b/frontend/src/components/BookTable.vue
@@ -12,7 +12,7 @@
         :items-per-page-options="isServerSide ? limits : undefined"
         :mobile="smAndDown"
         :density="smAndDown ? 'compact' : 'comfortable'"
-        class="elevation-1 book-table"
+        :class="['elevation-1', 'book-table', { 'card-mode': displayMode === 'card' }]"
         item-value="id"
         hover
         @update:options="isServerSide ? onUpdateOptions($event) : undefined"
@@ -29,6 +29,19 @@
           </div>
         </template>
 
+        <template v-if="displayMode === 'card'" #tbody>
+          <v-row>
+            <v-col v-for="book in books" :key="book.id" cols="12" sm="12" md="4" lg="3" xl="3">
+              <BookCard
+                :book="book"
+                :show-urls="showUrls"
+                :zim-urls="zimUrls"
+                :loading-urls="loadingUrls"
+              />
+            </v-col>
+          </v-row>
+        </template>
+
         <template #[`item.id`]="{ item }">
           <router-link :to="{ name: 'book-detail', params: { id: item.id } }" @click.stop>
             {{ item.id }}
@@ -43,15 +56,7 @@
         <template #[`item.flavour`]="{ item }">
           <div>
             <span v-if="item.flavour">{{ item.flavour }}</span>
-            <span v-else class="text-grey"></span>
-            <v-tooltip v-if="item.has_flavour_mismatch" location="top">
-              <template #activator="{ props: tooltipProps }">
-                <v-icon v-bind="tooltipProps" color="warning" size="small" class="ml-2">
-                  mdi-alert
-                </v-icon>
-              </template>
-              <span>Book flavour does not match title flavour</span>
-            </v-tooltip>
+            <span v-else class="text-grey">-</span>
           </div>
         </template>
 
@@ -61,13 +66,57 @@
         </template>
 
         <template #[`item.status`]="{ item }">
-          <BookStatus :book="item" />
+          <div class="d-flex flex-md-column ga-1 justify-end">
+            <BookStatusIndicator :book="item" />
+            <BookLocationChip :book="item" />
+            <BookIssuesIndicator :book="item" />
+          </div>
         </template>
 
         <template #[`item.deletion_date`]="{ item }">
           {{ item.deletion_date ? formatDt(item.deletion_date, 'ff') : '-' }}
         </template>
 
+        <template #[`item.issues`]="{ item }">
+          <div v-if="item.issues && item.issues.length" class="d-flex flex-column align-end">
+            <v-chip
+              v-for="(issue, idx) in item.issues"
+              :key="idx"
+              size="x-small"
+              class="mb-1"
+              color="red"
+              variant="outlined"
+            >
+              <span class="text-truncate d-block">{{ issue }}</span>
+            </v-chip>
+            <div v-if="canViewBookIssues">
+              <v-divider class="my-0" />
+              <v-btn
+                variant="outlined"
+                size="x-small"
+                color="primary"
+                block
+                rounded
+                :to="{
+                  name: 'book-detail-tab',
+                  params: { id: item.id, selectedTab: 'issues' },
+                }"
+              >
+                <v-icon size="small" class="mr-1">mdi-alert-circle</v-icon>
+                View Issues
+              </v-btn>
+            </div>
+          </div>
+          <span v-else class="text-grey">-</span>
+        </template>
+
+        <template #[`item.offliner`]="{ item }">
+          <span v-if="item.offliner">{{
+            matchOffliner(item.offliner, offlinerStore.offliners)
+          }}</span>
+          <span v-else class="text-grey">-</span>
+        </template>
+
         <template #[`item.urls`]="{ item }">
           <ZimUrlButtons
             v-if="showUrls && zimUrls"
@@ -90,21 +139,27 @@
 </template>
 
 <script setup lang="ts">
-import BookStatus from '@/components/BookStatus.vue'
+import BookStatusIndicator from '@/components/BookStatusIndicator.vue'
+import BookLocationChip from '@/components/BookLocationChip.vue'
+import BookIssuesIndicator from '@/components/BookIssuesIndicator.vue'
+import BookCard from '@/components/BookCard.vue'
 import ZimUrlButtons from '@/components/ZimUrlButtons.vue'
 import type { Paginator } from '@/types/base'
-import { formatDt } from '@/utils/format'
+import { formatDt, matchOffliner } from '@/utils/format'
 import type { BookLight, ZimUrl } from '@/types/book'
 import { useRouter, useRoute } from 'vue-router'
 import { useDisplay } from 'vuetify'
-import { computed } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useZimfarmOfflinerStore } from '@/stores/zimfarm/offliner'
+import { computed, onMounted } from 'vue'
 
 const router = useRouter()
 const route = useRoute()
+const authStore = useAuthStore()
+const offlinerStore = useZimfarmOfflinerStore()
 
 const { smAndDown } = useDisplay()
 
-// Props
 interface Props {
   headers: { title: string; value: string }[]
   books: BookLight[]
@@ -121,6 +176,7 @@ interface Props {
   showUrls?: boolean
   zimUrls?: Record<string, ZimUrl[]>
   loadingUrls?: boolean
+  displayMode?: 'table' | 'card'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -132,18 +188,27 @@ const props = withDefaults(defineProps<Props>(), {
   isServerSide: true,
   showUrls: false,
   loadingUrls: false,
+  displayMode: 'table',
 })
 
-// Define emits
 const emit = defineEmits<{
   limitChanged: [limit: number]
   loadData: [limit: number, skip: number]
 }>()
 
+onMounted(async () => {
+  await offlinerStore.fetchOffliners()
+})
+
 const computedHeaders = computed(() => {
+  if (props.displayMode === 'card') return []
   return props.headers
 })
 
+const canViewBookIssues = computed(() => {
+  return authStore.hasPermission('book', 'update')
+})
+
 const limits = [10, 20, 50, 100]
 
 function onUpdateOptions(options: { page: number; itemsPerPage: number }) {
@@ -164,7 +229,7 @@ function onUpdateOptions(options: { page: number; itemsPerPage: number }) {
 }
 
 function handleRowClick(event: Event, { item }: { item: BookLight }) {
-  // Prevent navigation if the user clicked on a link or button
+  if (props.displayMode === 'card') return
   const target = event.target as HTMLElement
   if (target.closest('a') || target.closest('button')) {
     return
@@ -177,4 +242,11 @@ function handleRowClick(event: Event, { item }: { item: BookLight }) {
 .book-table :deep(tbody tr) {
   cursor: pointer;
 }
+
+.book-table.card-mode :deep(.v-table__wrapper) {
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+  height: auto !important;
+}
 </style>
diff --git a/frontend/src/components/BooksViewFilters.vue b/frontend/src/components/BooksViewFilters.vue
index f34f914e..325e58f0 100644
--- a/frontend/src/components/BooksViewFilters.vue
+++ b/frontend/src/components/BooksViewFilters.vue
@@ -2,7 +2,7 @@
   <v-card flat class="mb-4">
     <v-card-text>
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-text-field
             v-model="localFilters.name"
             label="Name"
@@ -13,7 +13,7 @@
             @change="emitFilters"
           />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-select
             v-model="localFilters.flavour"
             label="Flavour"
@@ -27,7 +27,7 @@
             @update:model-value="emitFilters"
           />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-select
             v-model="localFilters.location_kind"
             label="Location"
diff --git a/frontend/src/components/EventFilters.vue b/frontend/src/components/EventFilters.vue
index 9cd31f22..f32712df 100644
--- a/frontend/src/components/EventFilters.vue
+++ b/frontend/src/components/EventFilters.vue
@@ -2,7 +2,7 @@
   <v-card flat class="mb-4">
     <v-card-text>
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-text-field
             v-model="localFilters.topic"
             label="Topic"
diff --git a/frontend/src/components/InboxBookFilters.vue b/frontend/src/components/InboxBookFilters.vue
index e41170c0..030a2d1d 100644
--- a/frontend/src/components/InboxBookFilters.vue
+++ b/frontend/src/components/InboxBookFilters.vue
@@ -2,7 +2,7 @@
   <v-card flat class="mb-4">
     <v-card-text>
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-text-field
             v-model="localFilters.name"
             label="Name"
@@ -13,7 +13,7 @@
             @change="emitFilters"
           />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-select
             v-model="localFilters.location_kind"
             label="Location"
@@ -26,7 +26,7 @@
             @update:model-value="emitFilters"
           />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-select
             v-model="localFilters.flag"
             label="Flag"
@@ -39,6 +39,32 @@
             @update:model-value="emitFilters"
           />
         </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+            v-model="localFilters.offliner"
+            label="Offliner"
+            :items="formattedOfflinerOptions"
+            placeholder="Select offliner"
+            variant="outlined"
+            density="compact"
+            hide-details
+            clearable
+            @update:model-value="emitFilters"
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+            v-model="localFilters.issue"
+            label="Issue"
+            :items="issueOptions"
+            placeholder="Select issue"
+            variant="outlined"
+            density="compact"
+            hide-details
+            clearable
+            @update:model-value="emitFilters"
+          />
+        </v-col>
         <v-col
           v-if="hasActiveFilters"
           cols="12"
@@ -63,12 +89,16 @@ interface Props {
     name: string
     location_kind: string
     flag: string
+    offliner: string
+    issue: string
   }
   locationKindOptions?: string[]
+  offlinerOptions?: string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
   locationKindOptions: () => [],
+  offlinerOptions: () => [],
 })
 
 // Define emits
@@ -78,6 +108,8 @@ const emit = defineEmits<{
       name: string
       location_kind: string
       flag: string
+      offliner: string
+      issue: string
     },
   ]
   clearFilters: []
@@ -88,6 +120,8 @@ const localFilters = ref({
   name: props.filters.name,
   location_kind: props.filters.location_kind,
   flag: props.filters.flag,
+  offliner: props.filters.offliner,
+  issue: props.filters.issue,
 })
 
 // Watch for prop changes and update local state
@@ -98,6 +132,8 @@ watch(
       name: newFilters.name,
       location_kind: newFilters.location_kind,
       flag: newFilters.flag,
+      offliner: newFilters.offliner,
+      issue: newFilters.issue,
     }
   },
 )
@@ -109,6 +145,13 @@ const formattedLocationKindOptions = computed(() => {
   }))
 })
 
+const formattedOfflinerOptions = computed(() => {
+  return props.offlinerOptions.map((option) => ({
+    title: option,
+    value: option,
+  }))
+})
+
 const flagOptions = [
   { title: 'Needs File Operation', value: 'needs_file_operation' },
   { title: 'Needs Processing', value: 'needs_processing' },
@@ -116,11 +159,22 @@ const flagOptions = [
   { title: 'Pending Title', value: 'no_title' },
 ]
 
+const issueOptions = [
+  { title: 'Bad Metadata', value: 'bad metadata' },
+  { title: 'Article Count', value: 'article count' },
+  { title: 'Media Count', value: 'media count' },
+  { title: 'Invalid Language Code', value: 'invalid language code' },
+  { title: 'Flavour Mismatch', value: 'flavour mismatch' },
+  { title: 'Zimcheck Error', value: 'zimcheck error' },
+]
+
 const hasActiveFilters = computed(() => {
   return (
     props.filters.name.length > 0 ||
     props.filters.location_kind.length > 0 ||
-    props.filters.flag?.length > 0
+    props.filters.flag?.length > 0 ||
+    props.filters.offliner.length > 0 ||
+    props.filters.issue?.length > 0
   )
 })
 
@@ -130,6 +184,8 @@ function emitFilters() {
     name: localFilters.value.name,
     location_kind: localFilters.value.location_kind,
     flag: localFilters.value.flag,
+    offliner: localFilters.value.offliner,
+    issue: localFilters.value.issue,
   })
 }
 
diff --git a/frontend/src/components/ZimfarmNotificationFilters.vue b/frontend/src/components/ZimfarmNotificationFilters.vue
index ac3d5268..b1750dca 100644
--- a/frontend/src/components/ZimfarmNotificationFilters.vue
+++ b/frontend/src/components/ZimfarmNotificationFilters.vue
@@ -2,7 +2,7 @@
   <v-card flat class="mb-4">
     <v-card-text>
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col cols="12" sm="6" md="4">
           <v-text-field
             v-model="localFilters.id"
             label="ID"
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 7bf45c5f..8e9ca4a0 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -5,6 +5,7 @@ import { inject } from 'vue'
 
 export interface Config {
   CMS_API: string
+  ZIMFARM_API: string
   MATOMO_ENABLED: boolean
   MATOMO_HOST: string
   MATOMO_SITE_ID: number
diff --git a/frontend/src/stores/book.ts b/frontend/src/stores/book.ts
index c05d74ce..bf87ea85 100644
--- a/frontend/src/stores/book.ts
+++ b/frontend/src/stores/book.ts
@@ -51,6 +51,8 @@ export const useBookStore = defineStore('book', () => {
     name: string | undefined = undefined,
     flavour: string | undefined = undefined,
     has_backup: boolean | undefined = undefined,
+    offliner: string | undefined = undefined,
+    issue: string | undefined = undefined,
   ) => {
     const service = await authStore.getApiService('books')
 
@@ -74,6 +76,8 @@ export const useBookStore = defineStore('book', () => {
         name,
         flavour,
         has_backup,
+        offliner,
+        issue,
       }).filter(
         ([name, value]) => !!value || (!['limit', 'skip'].includes(name) && value !== undefined),
       ),
diff --git a/frontend/src/stores/zimfarm/offliner.ts b/frontend/src/stores/zimfarm/offliner.ts
new file mode 100644
index 00000000..1c685f16
--- /dev/null
+++ b/frontend/src/stores/zimfarm/offliner.ts
@@ -0,0 +1,46 @@
+import type { ListResponse } from '@/types/base'
+import type { Config } from '@/config'
+import httpRequest from '@/utils/httpRequest'
+import type { ErrorResponse } from '@/types/errors'
+import constants from '@/constants'
+import { translateErrors } from '@/utils/errors'
+import { defineStore } from 'pinia'
+import { inject, ref } from 'vue'
+
+export const useZimfarmOfflinerStore = defineStore('zimfarmOffliner', () => {
+  const offliners = ref<string[]>([])
+  const errors = ref<string[]>([])
+
+  const config = inject<Config>(constants.config)
+
+  if (!config) {
+    throw new Error('Config is not defined')
+  }
+
+  const fetchOffliners = async (limit: number = 100) => {
+    if (offliners.value.length > 0) {
+      return offliners.value
+    }
+    const apiService = httpRequest({
+      baseURL: `${config.ZIMFARM_API}/offliners`,
+    })
+    try {
+      const response = await apiService.get<null, ListResponse<string>>('', { params: { limit } })
+      offliners.value = response.items
+      errors.value = []
+      return offliners.value
+    } catch (_error) {
+      console.error('Failed to fetch offliners', _error)
+      errors.value = translateErrors(_error as ErrorResponse)
+      return null
+    }
+  }
+
+  return {
+    // state
+    offliners,
+    errors,
+    // actions
+    fetchOffliners,
+  }
+})
diff --git a/frontend/src/types/book.ts b/frontend/src/types/book.ts
index c7485223..a7c777ff 100644
--- a/frontend/src/types/book.ts
+++ b/frontend/src/types/book.ts
@@ -33,6 +33,7 @@ export interface BookLight {
   location_kind: LocationKind
   created_at: string
   issues: string[]
+  offliner: string | null
   deletion_date?: string
   name?: string
   date?: string
diff --git a/frontend/src/utils/format.ts b/frontend/src/utils/format.ts
index b02aaaed..ac46c921 100644
--- a/frontend/src/utils/format.ts
+++ b/frontend/src/utils/format.ts
@@ -40,3 +40,12 @@ export function base64FormattedSize(base64String: string): string {
   if (bytes === 0) return ''
   return formattedBytesSize(bytes)
 }
+
+export function matchOffliner(rawOffliner: string | null, offlinerNames: string[]): string {
+  if (!rawOffliner) return 'Unknown'
+  const lower = rawOffliner.toLowerCase()
+  for (const name of offlinerNames) {
+    if (lower.includes(name.toLowerCase())) return name
+  }
+  return 'Unknown'
+}
diff --git a/frontend/src/views/BookView.vue b/frontend/src/views/BookView.vue
index 3f776dea..bd64e54f 100644
--- a/frontend/src/views/BookView.vue
+++ b/frontend/src/views/BookView.vue
@@ -226,7 +226,11 @@
                     <div class="text-subtitle-2">Status</div>
                   </v-col>
                   <v-col cols="12" md="9">
-                    <BookStatus :book="book" force-row />
+                    <div class="d-flex ga-2 align-center">
+                      <BookStatusIndicator :book="book" />
+                      <BookLocationChip :book="book" />
+                      <BookIssuesIndicator :book="book" />
+                    </div>
                   </v-col>
                 </v-row>
                 <v-divider class="my-2"></v-divider>
@@ -331,6 +335,17 @@
                 </v-row>
                 <v-divider class="my-2"></v-divider>
 
+                <v-row no-gutters class="py-2">
+                  <v-col cols="12" md="3">
+                    <div class="text-subtitle-2">Offliner</div>
+                  </v-col>
+                  <v-col cols="12" md="9">
+                    <span v-if="offlinerName !== 'Unknown'">{{ offlinerName }}</span>
+                    <span v-else class="text-grey">-</span>
+                  </v-col>
+                </v-row>
+                <v-divider class="my-2"></v-divider>
+
                 <v-row no-gutters class="py-2">
                   <v-col cols="12" md="3">
                     <div class="text-subtitle-2">URLs</div>
@@ -697,7 +712,9 @@
 </template>
 
 <script setup lang="ts">
-import BookStatus from '@/components/BookStatus.vue'
+import BookStatusIndicator from '@/components/BookStatusIndicator.vue'
+import BookLocationChip from '@/components/BookLocationChip.vue'
+import BookIssuesIndicator from '@/components/BookIssuesIndicator.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import DeleteBookDialog from '@/components/DeleteBookDialog.vue'
 import DiffViewer from '@/components/DiffViewer.vue'
@@ -716,9 +733,10 @@ import { useNotificationStore } from '@/stores/notification'
 import { useBookStore } from '@/stores/book'
 import { useTitleStore } from '@/stores/title'
 import { useBookHistoryStore } from '@/stores/bookHistory'
+import { useZimfarmOfflinerStore } from '@/stores/zimfarm/offliner'
 import type { Book, ZimUrl } from '@/types/book'
 import type { Title } from '@/types/title'
-import { formatDt, fromNow } from '@/utils/format'
+import { formatDt, fromNow, matchOffliner } from '@/utils/format'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
 import { diff } from 'deep-diff'
@@ -732,6 +750,7 @@ const notificationStore = useNotificationStore()
 const authStore = useAuthStore()
 const titleStore = useTitleStore()
 const bookHistoryStore = useBookHistoryStore()
+const offlinerStore = useZimfarmOfflinerStore()
 
 const error = ref<string | null>(null)
 const book = ref<Book | null>(null)
@@ -914,6 +933,10 @@ const isDeletionDatePast = computed(() => {
   return new Date(book.value.deletion_date) < new Date()
 })
 
+const offlinerName = computed(() =>
+  matchOffliner(book.value?.offliner ?? null, offlinerStore.offliners),
+)
+
 const titleDataFromBook = computed<Title | null>(() => {
   if (!book.value) return null
 
@@ -1033,6 +1056,7 @@ const loadZimUrls = async () => {
 }
 
 onMounted(async () => {
+  await offlinerStore.fetchOffliners()
   await loadData(true, props.selectedTab === 'history', true, props.selectedTab === 'issues')
 })
 
diff --git a/frontend/src/views/InboxView.vue b/frontend/src/views/InboxView.vue
index d78f3667..411052a9 100644
--- a/frontend/src/views/InboxView.vue
+++ b/frontend/src/views/InboxView.vue
@@ -6,6 +6,7 @@
     v-if="currentTab == 'books'"
     :filters="bookFilters"
     :location-kind-options="['quarantine', 'staging']"
+    :offliner-options="offlinerOptions"
     @filters-changed="handleBookFiltersChange"
     @clear-filters="clearFilters"
   />
@@ -30,6 +31,7 @@
     :loading-text="loadingStore.loadingText"
     :errors="errors"
     :filters="bookFilters"
+    display-mode="card"
     @limit-changed="handleLimitChange"
     @load-data="loadData"
   />
@@ -68,6 +70,7 @@ import EventFilters from '@/components/EventFilters.vue'
 import EventTable from '@/components/EventTable.vue'
 import { useLoadingStore } from '@/stores/loading'
 import { useBookStore } from '@/stores/book'
+import { useZimfarmOfflinerStore } from '@/stores/zimfarm/offliner'
 import { useZimfarmNotificationStore } from '@/stores/zimfarmNotification'
 import { useEventStore } from '@/stores/event'
 import type { BookLight } from '@/types/book'
@@ -81,6 +84,7 @@ const router = useRouter()
 const route = useRoute()
 
 const bookStore = useBookStore()
+const zimfarmOfflinerStore = useZimfarmOfflinerStore()
 const zimfarmNotificationStore = useZimfarmNotificationStore()
 const eventStore = useEventStore()
 const loadingStore = useLoadingStore()
@@ -100,6 +104,8 @@ const headers = computed(() => {
         { title: 'Name', value: 'name' },
         { title: 'Flavour', value: 'flavour' },
         { title: 'Status', value: 'status' },
+        { title: 'Issues', value: 'issues' },
+        { title: 'Offliner', value: 'offliner' },
         { title: 'Date', value: 'date' },
         { title: 'Deletion Date', value: 'deletion_date' },
       ]
@@ -148,6 +154,7 @@ const paginator = ref<Paginator>({
   limit: defaultLimit.value,
   count: 0,
 })
+const offlinerOptions = ref<string[]>([])
 const errors = ref<string[]>([])
 
 const bookFilters = computed(() => {
@@ -156,6 +163,8 @@ const bookFilters = computed(() => {
     location_kind: '',
     name: '',
     flag: '',
+    offliner: '',
+    issue: '',
   }
   if (query.name && typeof query.name === 'string') {
     derived.name = query.name
@@ -169,6 +178,14 @@ const bookFilters = computed(() => {
     derived.flag = query.flag
   }
 
+  if (query.offliner && typeof query.offliner === 'string') {
+    derived.offliner = query.offliner
+  }
+
+  if (query.issue && typeof query.issue === 'string') {
+    derived.issue = query.issue
+  }
+
   return derived
 })
 
@@ -242,6 +259,9 @@ async function loadData(limit: number, skip: number, tab?: string, hideLoading:
         bookFilters.value.flag || undefined,
         bookFilters.value.name || undefined,
         undefined, // flavour not used in inbox
+        undefined, // has_backup not used in inbox
+        bookFilters.value.offliner || undefined,
+        bookFilters.value.issue || undefined,
       )
       books.value = bookStore.books
       errors.value = bookStore.errors
@@ -335,6 +355,14 @@ function updateUrlFilters(
     query.topic = sourceFilters.topic
   }
 
+  if ('offliner' in sourceFilters && sourceFilters.offliner) {
+    query.offliner = sourceFilters.offliner
+  }
+
+  if ('issue' in sourceFilters && sourceFilters.issue) {
+    query.issue = sourceFilters.issue
+  }
+
   router.push({
     name: route.name,
     query: Object.keys(query).length > 0 ? query : undefined,
@@ -344,7 +372,7 @@ function updateUrlFilters(
 async function clearFilters() {
   switch (currentTab.value) {
     case 'books':
-      updateUrlFilters({ name: '', location_kind: '', flag: '' })
+      updateUrlFilters({ name: '', location_kind: '', flag: '', offliner: '', issue: '' })
       break
     case 'zimfarm_notifications':
       updateUrlFilters({ id: '' })
@@ -385,6 +413,11 @@ watch(
 )
 
 onMounted(async () => {
+  const fetchedOffliners = await zimfarmOfflinerStore.fetchOffliners()
+  if (fetchedOffliners) {
+    offlinerOptions.value = fetchedOffliners
+  }
+
   intervalId.value = window.setInterval(async () => {
     await loadData(paginator.value.limit, paginator.value.skip, currentTab.value, true)
   }, 60000)
diff --git a/frontend/src/views/TitleView.vue b/frontend/src/views/TitleView.vue
index ed800515..1a93ff15 100644
--- a/frontend/src/views/TitleView.vue
+++ b/frontend/src/views/TitleView.vue
@@ -284,15 +284,24 @@
                     <div class="text-subtitle-2">Books</div>
                   </v-col>
                   <v-col cols="12" md="9">
-                    <BookTable
-                      v-if="title.books.length > 0"
-                      :headers="bookHeaders"
-                      :books="sortedBooks"
-                      :is-server-side="false"
-                      :show-urls="true"
-                      :zim-urls="zimUrls"
-                      :loading-urls="loadingUrls"
-                    />
+                    <v-row v-if="title.books.length > 0">
+                      <v-col
+                        v-for="book in sortedBooks"
+                        :key="book.id"
+                        cols="12"
+                        sm="12"
+                        md="6"
+                        lg="4"
+                        xl="3"
+                      >
+                        <BookCard
+                          :book="book"
+                          :show-urls="true"
+                          :zim-urls="zimUrls"
+                          :loading-urls="loadingUrls"
+                        />
+                      </v-col>
+                    </v-row>
                     <span v-else class="text-grey">No books</span>
                   </v-col>
                 </v-row>
@@ -432,7 +441,7 @@
 </template>
 
 <script setup lang="ts">
-import BookTable from '@/components/BookTable.vue'
+import BookCard from '@/components/BookCard.vue'
 import EventsList from '@/components/EventsList.vue'
 import ArchiveTitle from '@/components/ArchiveTitle.vue'
 import TitleForm from '@/components/TitleForm.vue'
@@ -514,15 +523,6 @@ const props = withDefaults(defineProps<Props>(), {
   selectedTab: 'details',
 })
 
-const bookHeaders = [
-  { title: 'Name', value: 'name', sortable: false },
-  { title: 'Flavour', value: 'flavour', sortable: false },
-  { title: 'Status', value: 'status', sortable: false },
-  { title: 'Date', value: 'date', sortable: false },
-  { title: 'Deletion Date', value: 'deletion_date', sortable: false },
-  { title: 'URLs', value: 'urls', sortable: false },
-]
-
 const canEditTitle = computed(
   () => authStore.hasPermission('title', 'update') && title.value && !title.value.archived,
 )