diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 24858fd..10b4c15 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -5,6 +5,104 @@
     </div>
     <div class="card-body">
       <div class="overview-container">
+        <div class="metrics-row">
+          <!-- Card 1: Cluster Name -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Cluster</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 2: Version -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Version</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 4: Nodes -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Nodes</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 5: Primary -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Primary Node</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 6: VMs -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">VMs</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 7: OSDs -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">OSDs</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 8: Pools -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Pools</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 9: Volumes -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Volumes</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
+            </div>
+          </div>
+        </div>
+
         <div class="graphs-row">
           <div class="health-card">
             <div class="card-header">
@@ -96,61 +194,6 @@
             </div>
           </div>
         </div>
-        <div class="metrics-row">
-          <!-- Card 2: PVC Version -->
-          <div class="metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
-              <h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
-              <small class="text-muted">
-                Cluster ID: {{ clusterData.cluster_id || 'N/A' }}
-              </small>
-            </div>
-          </div>
-
-          <!-- Card 3: Nodes -->
-          <div class="metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
-              <h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
-              <small class="text-muted">
-                Primary: {{ clusterData.primary_node || 'N/A' }}
-              </small>
-            </div>
-          </div>
-
-          <!-- Card 4: VMs -->
-          <div class="metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">VMs</h6>
-              <h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
-              <small class="text-muted">
-                <template v-if="clusterData.vms?.per_node">
-                  <span v-for="(count, node) in clusterData.vms.per_node" :key="node">
-                    {{ node }}: {{ count }}<br>
-                  </span>
-                </template>
-                <template v-else>
-                  Distribution: N/A
-                </template>
-              </small>
-            </div>
-          </div>
-
-          <!-- Card 5: Storage -->
-          <div class="metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">Storage</h6>
-              <div class="storage-metrics">
-                <small class="text-muted">
-                  OSDs: {{ clusterData.osds?.total || 0 }}<br>
-                  Pools: {{ clusterData.pools || 0 }}<br>
-                  Volumes: {{ clusterData.volumes?.total || 0 }}
-                </small>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -403,7 +446,7 @@ const chartOptions = {
 
 .metrics-row {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(8, 1fr);
   gap: 0.5rem;
 }
 
@@ -578,28 +621,19 @@ const chartOptions = {
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
+  justify-content: center;  /* Center vertically */
+  align-items: center;      /* Center horizontally */
 }
 
 .metric-card .card-body > * {
-  flex: 1;
+  margin: 0;  /* Remove any default margins */
 }
 
-.current-value {
-  font-size: 1.1rem;
+.metric-card .metric-value {
+  font-size: 1.25rem;
   font-weight: bold;
   color: #333;
-}
-
-@media (max-width: 1400px) {
-  .graphs-row {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (max-width: 768px) {
-  .graphs-row {
-    grid-template-columns: 1fr;
-  }
+  line-height: 1;  /* Tighter line height */
 }
 
 .card-header h6 {
@@ -618,4 +652,28 @@ const chartOptions = {
   font-weight: bold;
   color: #333;
 }
+
+@media (max-width: 1400px) {
+  .graphs-row {
+    grid-template-columns: 1fr 1fr;
+  }
+  .metrics-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 992px) {
+  .metrics-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .graphs-row {
+    grid-template-columns: 1fr;
+  }
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>