diff --git a/Chrono/Web/Pages/Cards.razor.css b/Chrono/Web/Pages/Cards.razor.css
index 713d539..4359dbe 100644
--- a/Chrono/Web/Pages/Cards.razor.css
+++ b/Chrono/Web/Pages/Cards.razor.css
@@ -727,8 +727,16 @@
     }
 
     .card-grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        grid-template-columns: 1fr;
         gap: 0.75rem;
+        max-width: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        max-width: 500px;
     }
 
     .detail-layout {
@@ -753,9 +761,10 @@
 }
 
 @media (max-width: 480px) {
-    .card-grid {
-        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    .card-grid, .card-grid.detailed-view {
+        grid-template-columns: 1fr;
         gap: 0.5rem;
+        max-width: 100%;
     }
 
     .category-tabs {