diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 963a77a..7f581e8 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -525,14 +525,14 @@ const chartOptions = {
 
 .graphs-row {
   display: grid;
-  grid-template-columns: repeat(4, calc(25% - 0.375rem));  /* Equal 1/4 width minus gap spacing */
+  grid-template-columns: repeat(4, 1fr);  /* Equal width columns */
   gap: 0.5rem;
   width: 100%;
 }
 
 .metrics-row {
   display: grid;
-  grid-template-columns: 1fr minmax(auto, 1.2fr) repeat(6, 1fr);  /* Version card (2nd) gets more space */
+  grid-template-columns: repeat(8, 1fr);  /* Start with 8 equal columns */
   gap: 0.5rem;
   width: 100%;
 }
@@ -641,6 +641,7 @@ const chartOptions = {
 }
 
 .metric-card {
+  min-width: 180px;  /* Prevents cards from becoming too small */
   background: white;
   border: 1px solid rgba(0,0,0,0.125);
   border-radius: 0.25rem;
@@ -712,24 +713,45 @@ const chartOptions = {
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-@media (max-width: 1400px) {
-  .messages-grid {
-    grid-template-columns: repeat(3, 1fr);  /* 3 messages per row */
+@media (max-width: 1500px) {
+  .metrics-row {
+    grid-template-columns: repeat(4, 1fr);  /* 4 cards per row */
   }
-}
-
-@media (max-width: 992px) {
+  
+  .graphs-row {
+    grid-template-columns: repeat(2, 1fr);  /* 2 graphs per row */
+  }
+  
   .messages-grid {
     grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
   }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 1148px) {
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
+  }
+  
+  .graphs-row {
+    grid-template-columns: 1fr;  /* 1 graph per row */
+  }
+  
   .messages-grid {
     grid-template-columns: 1fr;  /* 1 message per row */
   }
 }
 
+/* Fine-tune for very small screens */
+@media (max-width: 740px) {
+  .metrics-row, .graphs-row, .messages-grid {
+    grid-template-columns: 1fr;  /* Everything in single column */
+  }
+  
+  .metric-card {
+    min-width: 0;  /* Allow cards to shrink further on very small screens */
+  }
+}
+
 .status-maintenance {
   color: #0d6efd;  /* Bootstrap blue */
 }