diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index 95f89bd..1c2e0d1 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -119,16 +119,16 @@ function MediaCard({ item, onClick }: MediaCardProps) {
             <ImageOff className="w-12 h-12" />
           </div>
         )}
-      </div>
 
-      {/* Contenu */}
-      <div className="flex flex-col p-2">
-        <h3 className="font-medium line-clamp-2 text-sm">{title}</h3>
-        {isSeries && (
-          <p className="text-xs text-muted-foreground mt-1">
-            {item.booksCount} tome{item.booksCount > 1 ? "s" : ""}
-          </p>
-        )}
+        {/* Overlay avec les informations au survol */}
+        <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
+          <h3 className="font-medium text-sm text-white line-clamp-2">{title}</h3>
+          {isSeries && (
+            <p className="text-xs text-white/80 mt-1">
+              {item.booksCount} tome{item.booksCount > 1 ? "s" : ""}
+            </p>
+          )}
+        </div>
       </div>
     </button>
   );
diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx
index fecf4cc..10f8378 100644
--- a/src/components/library/SeriesGrid.tsx
+++ b/src/components/library/SeriesGrid.tsx
@@ -12,7 +12,7 @@ interface SeriesGridProps {
 }
 
 // Fonction utilitaire pour obtenir les informations de lecture d'une série
-const getReadingStatusInfo = (series: KomgaSeries): { label: string; className: string } => {
+const getReadingStatusInfo = (series: KomgaSeries) => {
   const { booksCount, booksReadCount, booksUnreadCount } = series;
   const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount);
 
@@ -25,7 +25,7 @@ const getReadingStatusInfo = (series: KomgaSeries): { label: string; className:
 
   if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
     return {
-      label: "En cours",
+      label: `${booksReadCount}/${booksCount}`,
       className: "bg-blue-500/10 text-blue-500",
     };
   }
@@ -74,41 +74,35 @@ function SeriesCard({ series, onClick, serverUrl }: SeriesCardProps) {
   return (
     <button
       onClick={onClick}
-      className="group relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
+      className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
     >
-      {/* Image de couverture */}
-      <div className="relative aspect-[2/3] bg-muted">
-        {!imageError ? (
-          <Image
-            src={`/api/komga/images/series/${series.id}/thumbnail`}
-            alt={`Couverture de ${series.metadata.title}`}
-            fill
-            className="object-cover"
-            sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
-            onError={() => setImageError(true)}
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center">
-            <ImageOff className="w-12 h-12" />
-          </div>
-        )}
-      </div>
+      {!imageError ? (
+        <Image
+          src={`/api/komga/images/series/${series.id}/thumbnail`}
+          alt={`Couverture de ${series.metadata.title}`}
+          fill
+          className={`object-cover ${
+            series.booksCount === series.booksReadCount ? "opacity-50" : ""
+          }`}
+          sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <div className="w-full h-full flex items-center justify-center">
+          <ImageOff className="w-12 h-12" />
+        </div>
+      )}
 
-      {/* Contenu */}
-      <div className="flex flex-col p-2">
-        <h3 className="font-medium line-clamp-2 text-sm">{series.metadata.title}</h3>
-        <div className="mt-1 text-xs text-muted-foreground space-y-1">
-          <div className="flex items-center gap-1">
-            <Book className="h-3 w-3" />
-            <span>
-              {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
-            </span>
-          </div>
-          <div className="flex items-center">
-            <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${statusInfo.className}`}>
-              {statusInfo.label}
-            </span>
-          </div>
+      {/* Overlay avec les informations au survol */}
+      <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
+        <h3 className="font-medium text-sm text-white line-clamp-2">{series.metadata.title}</h3>
+        <div className="flex items-center gap-2">
+          <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
+            {statusInfo.label}
+          </span>
+          <span className="text-xs text-white/80">
+            {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+          </span>
         </div>
       </div>
     </button>
diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index f4d93e1..6476c50 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -11,6 +11,38 @@ interface BookGridProps {
   getBookThumbnailUrl: (bookId: string) => string;
 }
 
+// Fonction utilitaire pour obtenir les informations de statut de lecture
+const getReadingStatusInfo = (book: KomgaBook) => {
+  if (!book.readProgress) {
+    return {
+      label: "Non lu",
+      className: "bg-yellow-500/10 text-yellow-500",
+    };
+  }
+
+  if (book.readProgress.completed) {
+    const readDate = book.readProgress.readDate
+      ? new Date(book.readProgress.readDate).toLocaleDateString()
+      : null;
+    return {
+      label: readDate ? `Lu le ${readDate}` : "Lu",
+      className: "bg-green-500/10 text-green-500",
+    };
+  }
+
+  if (book.readProgress.page > 0) {
+    return {
+      label: `Page ${book.readProgress.page}/${book.media.pagesCount}`,
+      className: "bg-blue-500/10 text-blue-500",
+    };
+  }
+
+  return {
+    label: "Non lu",
+    className: "bg-yellow-500/10 text-yellow-500",
+  };
+};
+
 export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridProps) {
   if (!books.length) {
     return (
@@ -22,26 +54,34 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
 
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      {books.map((book) => (
-        <button
-          key={book.id}
-          onClick={() => onBookClick(book)}
-          className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-80 transition-opacity"
-        >
-          <Image
-            src={getBookThumbnailUrl(book.id)}
-            alt={book.metadata.title}
-            fill
-            className="object-cover"
-            sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
-          />
-          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4">
-            <p className="text-sm font-medium text-white text-left line-clamp-2">
-              {book.metadata.title}
-            </p>
-          </div>
-        </button>
-      ))}
+      {books.map((book) => {
+        const statusInfo = getReadingStatusInfo(book);
+        return (
+          <button
+            key={book.id}
+            onClick={() => onBookClick(book)}
+            className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
+          >
+            <Image
+              src={getBookThumbnailUrl(book.id)}
+              alt={book.metadata.title}
+              fill
+              className={`object-cover ${book.readProgress?.completed ? "opacity-50" : ""}`}
+              sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
+            />
+            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
+              <p className="text-sm font-medium text-white text-left line-clamp-2">
+                {book.metadata.title || `Tome ${book.metadata.number}`}
+              </p>
+              <div className="flex items-center gap-2">
+                <span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
+                  {statusInfo.label}
+                </span>
+              </div>
+            </div>
+          </button>
+        );
+      })}
     </div>
   );
 }