diff --git a/backend/templates/tablos.templ b/backend/templates/tablos.templ
index 8a58187..7bdf796 100644
--- a/backend/templates/tablos.templ
+++ b/backend/templates/tablos.templ
@@ -124,16 +124,46 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 		data-href={ "/tablos/" + card.Tablo.ID.String() }
 	>
 		<!-- Card view (default: visible in grid layout) -->
-		<div class="bg-white rounded-xl p-6 border border-[#EAECF0] hover:shadow-md transition-shadow cursor-pointer project-card">
-			<!-- Top row: display-status badge + delete button -->
-			<div class="flex items-start justify-between mb-4">
-				if tabloDisplayStatus(card.Progress, card.TotalTasks) == "termine" {
-					<span class="px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-600 border border-green-200">Terminé</span>
-				} else if tabloDisplayStatus(card.Progress, card.TotalTasks) == "en-cours" {
-					<span class="px-3 py-1 rounded-full text-sm font-medium bg-[#FFF4E2] text-[#DB9729] border border-[#DB9729]">En cours</span>
+		<div class="bg-white rounded-xl p-5 border border-[#EAECF0] hover:shadow-md transition-shadow cursor-pointer project-card flex flex-col gap-3">
+			<!-- Row 1: icon + title -->
+			<div class="flex items-center gap-3">
+				if card.Tablo.Color.Valid && card.Tablo.Color.String != "" {
+					<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style={ "background-color: " + card.Tablo.Color.String }>
+						<span class="text-white font-bold text-sm">
+							if len(card.Tablo.Title) > 0 {
+								{ string([]rune(card.Tablo.Title)[0:1]) }
+							}
+						</span>
+					</div>
 				} else {
-					<span class="px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-600 border border-blue-200">À faire</span>
+					<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-blue-500">
+						<span class="text-white font-bold text-sm">
+							if len(card.Tablo.Title) > 0 {
+								{ string([]rune(card.Tablo.Title)[0:1]) }
+							}
+						</span>
+					</div>
 				}
+				<h3 class="text-base font-semibold text-gray-900 flex-1 line-clamp-2">{ card.Tablo.Title }</h3>
+			</div>
+			<!-- Row 2: DB status badge -->
+			<div>
+				if card.Tablo.Status == "archived" {
+					<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">Archivé</span>
+				} else {
+					<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-200">Actif</span>
+				}
+			</div>
+			<!-- Row 3: edit + delete actions -->
+			<div class="flex items-center gap-1 pt-1 border-t border-gray-100">
+				<a
+					href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) }
+					class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
+					aria-label="Edit tablo"
+					onclick="event.stopPropagation()"
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+				</a>
 				<div class="tablo-delete-zone">
 					@ui.IconButton(ui.IconButtonProps{
 						Label:   "Delete tablo",
@@ -149,46 +179,6 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 					})
 				</div>
 			</div>
-			<!-- Avatar + title -->
-			<div class="flex items-center gap-3 mb-4">
-				if card.Tablo.Color.Valid && card.Tablo.Color.String != "" {
-					<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 overflow-hidden" style={ "background-color: " + card.Tablo.Color.String }>
-						<span class="text-white font-bold">
-							if len(card.Tablo.Title) > 0 {
-								{ string([]rune(card.Tablo.Title)[0:1]) }
-							}
-						</span>
-					</div>
-				} else {
-					<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 overflow-hidden bg-blue-500">
-						<span class="text-white font-bold">
-							if len(card.Tablo.Title) > 0 {
-								{ string([]rune(card.Tablo.Title)[0:1]) }
-							}
-						</span>
-					</div>
-				}
-				<h3 class="text-base font-semibold text-gray-900 flex-1 line-clamp-2">{ card.Tablo.Title }</h3>
-			</div>
-			<!-- Date row -->
-			<div class="flex items-center gap-2 text-gray-600 mb-4">
-				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 shrink-0" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
-				<span class="text-sm">{ card.Tablo.CreatedAt.Time.Format("2 Jan 2006") }</span>
-			</div>
-			<!-- Progress row -->
-			<div class="mb-4 project-card-progress-row">
-				<div class="flex justify-between items-center mb-2">
-					<span class="text-sm text-gray-600">Progression :</span>
-					<span class="text-sm font-semibold text-gray-900">{ strconv.Itoa(card.DoneTasks) }/{ strconv.Itoa(card.TotalTasks) } completed tasks</span>
-				</div>
-				<div class="w-full bg-gray-200 rounded-full h-2 project-progress-track">
-					<div class="bg-green-500 h-2 rounded-full project-card-progress-bar" style={ "width: " + strconv.Itoa(card.Progress) + "%" }></div>
-				</div>
-			</div>
-			<!-- Created footer -->
-			<div class="pt-4 border-t border-dashed border-[#D0D5DD]">
-				<span class="text-sm text-gray-500">Créé le <span class="font-semibold text-gray-900">{ card.Tablo.CreatedAt.Time.Format("2 Jan 2006") }</span></span>
-			</div>
 		</div>
 		<!-- List row (hidden by default, shown when data-view="list") -->
 		<div class="tablo-list-row" onclick="event.stopPropagation()">