diff --git a/public/admin/index.php b/public/admin/index.php
index d9b619e..63969bc 100644
--- a/public/admin/index.php
+++ b/public/admin/index.php
@@ -1,7 +1,7 @@
 <?php
 // Bootstrap application
 require_once __DIR__ . "/../../config/bootstrap.php";
-require_once __DIR__ . '/../../lib/AdminAuth.php';
+require_once __DIR__ . '/../../src/AdminAuth.php';
 
 // PHP-level auth guard (defence-in-depth behind nginx Basic Auth)
 AdminAuth::requireLogin();
@@ -285,4 +285,4 @@ try {
     <?php endif; ?>
 </main>
 
-<?php require_once APP_ROOT . '/templates/admin/footer.php'; ?>
+<?php require_once APP_ROOT . '/templates/admin/footer.php'; ?>
\ No newline at end of file
diff --git a/public/assets/main.css b/public/assets/main.css
index 9db9ba6..98d7a50 100644
--- a/public/assets/main.css
+++ b/public/assets/main.css
@@ -127,16 +127,68 @@ header nav a {
 
 main {
   background: #3c856bff;
-  display: grid;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  grid-auto-flow: column;
-  grid-auto-columns: 260px;
-  gap: 1rem;
+  position: relative;
   padding: 1rem;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cards-container {
+  display: grid;
+  gap: 0.75rem;
+  flex: 1;
+  min-height: 0;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+
+/* Default: 3 rows × 4 columns = 12 items */
+.cards-container {
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-flow: row;
+}
+
+/* Small screens: 2 rows × 3 columns = 6 items */
+@media (max-width: 1200px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Medium screens: 3 rows × 4 columns = 12 items */
+@media (min-width: 1201px) and (max-width: 1500px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Large screens: 3 rows × 6 columns = 18 items */
+@media (min-width: 1701px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Extra large screens: 4 rows × 6 columns = 24 items */
+@media (min-width: 2000px) {
+  .cards-container {
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Mobile placeholder (will adjust later) */
+@media (max-width: 768px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .card-link {
@@ -148,14 +200,17 @@ main {
 
 .card {
   background: #eee;
-  border-radius: 10px;
-  padding: 1rem;
-  scroll-snap-align: start;
+  border-radius: 8px;
+  padding: 0.5rem;
   height: 100%;
+  width: 100%;
   box-sizing: border-box;
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
 }
 
 .card:hover {
@@ -166,30 +221,61 @@ main {
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.3rem;
+  height: 100%;
+  overflow: hidden;
 }
 
 .card .title {
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 600;
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.15;
   color: #333;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .authors {
-  font-size: 0.9rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .year {
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #9557b5;
   font-weight: 600;
 }
 
+.card .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  margin-top: auto;
+  padding-top: 0.2rem;
+}
+
+.card .tag {
+  font-size: 0.55rem;
+  padding: 0.15rem 0.25rem;
+  background: rgba(149, 87, 181, 0.15);
+  color: #7a3d95;
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-weight: 500;
+}
+
 footer {
   background: #222222ff;
   overflow: hidden;
@@ -253,11 +339,13 @@ footer {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
-  margin: 1rem auto;
+  margin-top: 1rem;
   width: fit-content;
+  align-self: center;
+  flex-shrink: 0;
 }
 
 .pagination-btn {
diff --git a/public/index.php b/public/index.php
index fa585f8..741f793 100644
--- a/public/index.php
+++ b/public/index.php
@@ -6,7 +6,8 @@ require_once APP_ROOT . '/src/Database.php';
 $pageTitle = "Liste des TFE";
 $page = isset($_GET["page"]) ? intval($_GET["page"]) : 1;
 $year = isset($_GET["year"]) ? intval($_GET["year"]) : null;
-$itemsPerPage = 10;
+// Default to 12 items (4 cols × 3 rows)
+$itemsPerPage = 12;
 
 try {
     $db = Database::getInstance();
@@ -43,59 +44,71 @@ include APP_ROOT . '/templates/header.php';
 <?php endif; ?>
 
 <main>
-    <?php foreach ($itemsToLoad as $item): ?>
-        <a href="tfe.php?id=<?= (int)$item["id"] ?>" class="card-link">
-            <div class="card">
-                <div class="card-content">
-                    <h2 class="title"><?= htmlspecialchars($item["title"]) ?></h2>
-                    <p class="authors"><?= htmlspecialchars($item["authors"]) ?></p>
-                    <p class="year"><?= htmlspecialchars($item["year"]) ?></p>
+    <div class="cards-container">
+        <?php foreach ($itemsToLoad as $item): ?>
+            <a href="tfe.php?id=<?= (int)$item["id"] ?>" class="card-link">
+                <div class="card">
+                    <div class="card-content">
+                        <h2 class="title"><?= htmlspecialchars($item["title"]) ?></h2>
+                        <p class="authors"><?= htmlspecialchars($item["authors"]) ?></p>
+                        <p class="year"><?= htmlspecialchars($item["year"]) ?></p>
+                        <?php if (!empty($item["keywords"])): ?>
+                            <div class="tags">
+                                <?php 
+                                $keywords = explode(',', $item["keywords"]);
+                                foreach (array_slice($keywords, 0, 3) as $keyword): 
+                                ?>
+                                    <span class="tag"><?= htmlspecialchars(trim($keyword)) ?></span>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
+                    </div>
                 </div>
-            </div>
-        </a>
-    <?php endforeach; ?>
+            </a>
+        <?php endforeach; ?>
 
-    <?php if (empty($itemsToLoad)): ?>
-        <p>Aucun mémoire trouvé.</p>
+        <?php if (empty($itemsToLoad)): ?>
+            <p>Aucun mémoire trouvé.</p>
+        <?php endif; ?>
+    </div>
+
+    <?php if ($totalPages > 1): ?>
+    <nav class="pagination">
+        <?php 
+        $yearParam = $year ? '&year=' . (int)$year : '';
+        ?>
+        
+        <a href="?page=1<?= $yearParam ?>" 
+           class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>" 
+           <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+            ‹‹
+        </a>
+        
+        <a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>" 
+           class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
+           <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+            ‹
+        </a>
+        
+        <span class="pagination-info">
+            <span class="page-current"><?= (int)$page ?></span>
+            <span class="page-separator">/</span>
+            <span class="page-total"><?= (int)$totalPages ?></span>
+        </span>
+        
+        <a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>" 
+           class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+           <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+            ›
+        </a>
+        
+        <a href="?page=<?= $totalPages . $yearParam ?>" 
+           class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+           <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+            ››
+        </a>
+    </nav>
     <?php endif; ?>
 </main>
 
-<?php if ($totalPages > 1): ?>
-<nav class="pagination">
-    <?php 
-    $yearParam = $year ? '&year=' . (int)$year : '';
-    ?>
-    
-    <a href="?page=1<?= $yearParam ?>" 
-       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>" 
-       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
-        ‹‹
-    </a>
-    
-    <a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>" 
-       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
-       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
-        ‹
-    </a>
-    
-    <span class="pagination-info">
-        <span class="page-current"><?= (int)$page ?></span>
-        <span class="page-separator">/</span>
-        <span class="page-total"><?= (int)$totalPages ?></span>
-    </span>
-    
-    <a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>" 
-       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
-       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
-        ›
-    </a>
-    
-    <a href="?page=<?= $totalPages . $yearParam ?>" 
-       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
-       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
-        ››
-    </a>
-</nav>
-<?php endif; ?>
-
 <?php include APP_ROOT . '/templates/footer.php'; ?>