diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index d42c728..d2b0953 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -109,7 +109,21 @@ h1 {
 .cards {
   display: grid;
   gap: 28px;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.card-options {
+  grid-column: span 4;
+}
+
+.card-equities {
+  grid-column: span 2;
+}
+
+.card-flow,
+.card-alerts,
+.card-classifiers {
+  grid-column: span 2;
 }
 
 .status {
@@ -431,3 +445,31 @@ h1 {
     text-align: left;
   }
 }
+
+@media (max-width: 1100px) {
+  .cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .card-options,
+  .card-equities,
+  .card-flow,
+  .card-alerts,
+  .card-classifiers {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 860px) {
+  .cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-options,
+  .card-equities,
+  .card-flow,
+  .card-alerts,
+  .card-classifiers {
+    grid-column: span 1;
+  }
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 26cf52d..2b39715 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -905,7 +905,7 @@ export default function HomePage() {
       </header>
 
       <div className="cards">
-        <section className="card">
+        <section className="card card-options">
           <div className="card-header">
             <div>
               <h2>Options Tape</h2>
@@ -958,7 +958,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-equities">
           <div className="card-header">
             <div>
               <h2>Equities Tape</h2>
@@ -1013,7 +1013,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-flow">
           <div className="card-header">
             <div>
               <h2>Flow Packets</h2>
@@ -1077,7 +1077,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-alerts">
           <div className="card-header">
             <div>
               <h2>Alerts</h2>
@@ -1138,7 +1138,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-classifiers">
           <div className="card-header">
             <div>
               <h2>Classifier Hits</h2>