diff --git a/TallyFlow/TallyFlow-Architecture-Diagram.html b/TallyFlow/TallyFlow-Architecture-Diagram.html
index 2209d9e..2ffff34 100644
--- a/TallyFlow/TallyFlow-Architecture-Diagram.html
+++ b/TallyFlow/TallyFlow-Architecture-Diagram.html
@@ -31,17 +31,14 @@
       margin-bottom: 1.5rem;
     }
     svg { width: 100%; min-width: 1050px; display: block; }
+
+    /* Centered row of component cards */
     .components-row {
       display: flex;
       justify-content: center;
+      align-items: flex-start;
       gap: 1rem;
       flex-wrap: wrap;
-      margin-bottom: 1.5rem;
-    }
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-      gap: 1rem;
       max-width: 1180px;
       margin: 0 auto;
     }
@@ -49,6 +46,8 @@
       background: rgba(15, 23, 42, 0.5);
       border-radius: 0.75rem; border: 1px solid #1e293b;
       padding: 1.1rem;
+      flex: 1 1 180px;
+      max-width: 220px;
     }
     .card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
     .card-dot { width: 8px; height: 8px; border-radius: 50%; }
@@ -57,6 +56,7 @@
     .card-dot.violet { background: #a78bfa; }
     .card-dot.amber { background: #fbbf24; }
     .card-dot.orange { background: #fb923c; }
+    .card-dot.rose { background: #fb7185; }
     .card h3 { font-size: 0.875rem; font-weight: 600; }
     .card ul { list-style: none; color: #94a3b8; font-size: 0.75rem; }
     .card li { margin-bottom: 0.35rem; }
@@ -196,7 +196,7 @@
       </svg>
     </div>
 
-    <!-- Centered component boxes + cards -->
+    <!-- Centered row of 5 component cards -->
     <div class="components-row">
       <div class="card">
         <div class="card-header">