diff --git a/src/App.css b/src/App.css
index b49bca9..a404137 100644
--- a/src/App.css
+++ b/src/App.css
@@ -781,46 +781,124 @@
   }
 }
 
-.hardware-dashboard { max-width: 1200px; }
-.hardware-nodes { display: grid; gap: 24px; margin-top: 24px; }
-.hardware-node {
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--bg);
-  padding: 20px;
-  min-width: 0;
+.main-content:has(.hardware-dashboard) {
+  padding: 1.2%;
 }
+
+.hardware-dashboard {
+  width: 100%;
+  max-width: none;
+  container-type: inline-size;
+}
+
+.hardware-dashboard > .eyebrow {
+  margin-bottom: 0.3%;
+  font-size: 65%;
+}
+
+.hardware-dashboard > h1 {
+  margin: 0 0 0.5%;
+  font-size: clamp(1.25rem, 2.2cqw, 1.75rem);
+}
+
+.hardware-dashboard p {
+  font-size: clamp(0.625rem, 0.85cqw, 0.75rem);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.hardware-nodes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 0.8%;
+  row-gap: 0.8cqw;
+  margin-top: 1%;
+  align-items: start;
+}
+
+.hardware-node {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  padding: 2%;
+}
+
 .hardware-node-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
+  gap: 0.3em 2%;
+  margin-bottom: 2%;
+  padding-bottom: 1.5%;
+  border-bottom: 1px solid var(--border);
   overflow-wrap: anywhere;
 }
-.hardware-node-header h2, .hardware-node-header p { margin: 0 0 6px; }
+
+.hardware-node-header > div { min-width: 0; }
+.hardware-node-header h2 {
+  margin: 0 0 0.2em;
+  font-size: clamp(0.75rem, 1.1cqw, 0.95rem);
+  line-height: 1.25;
+  font-weight: 600;
+}
+.hardware-node-header p { margin: 0; }
+
+.hardware-dashboard .secondary-button {
+  min-height: 2.2em;
+  margin-top: 0.3em;
+  padding: 0.35em 0.8em;
+  font-size: clamp(0.65rem, 0.85cqw, 0.75rem);
+}
+
 .hardware-metrics {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2%;
 }
+
 .hardware-metric {
   min-width: 0;
-  padding: 18px;
+  padding: 5%;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--surface);
+  overflow-wrap: anywhere;
+}
+.hardware-metric h3 {
+  font-size: clamp(0.625rem, 0.85cqw, 0.75rem);
+  margin: 0 0 3%;
+  line-height: 1.25;
 }
-.hardware-metric h3 { font-size: 15px; margin: 0 0 12px; }
 .hardware-metric strong {
   display: block;
   color: var(--text-h);
-  font-size: 30px;
+  font-size: clamp(1rem, 1.5cqw, 1.3rem);
+  line-height: 1.2;
   font-variant-numeric: tabular-nums;
 }
-.hardware-metric meter { width: 100%; height: 16px; margin-top: 12px; }
-.hardware-metric p, .hardware-updated { font-size: 13px; margin: 12px 0 0; }
+.hardware-metric meter { width: 100%; height: 0.65em; margin-top: 3%; }
+.hardware-metric p { margin: 3% 0 0; }
+.hardware-updated { margin: 1.5% 0 0; }
+
+@container (min-width: 1400px) {
+  .hardware-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@container (max-width: 700px) {
+  .hardware-nodes {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: 1.5cqw;
+  }
+}
+
+@container (max-width: 320px) {
+  .hardware-metrics {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.4em;
+  }
+}
 
 .database-connections {
   margin-bottom: 28px;