diff --git a/src/slurmcostmanager.css b/src/slurmcostmanager.css
index 11e5950..8326ad3 100644
--- a/src/slurmcostmanager.css
+++ b/src/slurmcostmanager.css
@@ -31,6 +31,8 @@ nav button:hover {
 
 .table-container {
   overflow-x: auto;
+  width: 350px;
+  margin: 1em;
 }
 
 .summary-table th {
diff --git a/src/slurmcostmanager.js b/src/slurmcostmanager.js
index d3fa646..ed77272 100644
--- a/src/slurmcostmanager.js
+++ b/src/slurmcostmanager.js
@@ -495,12 +495,12 @@ function Summary({ summary, details, daily, monthly }) {
           })
       })
     ),
-    React.createElement('h3', null, 'Historical CPU/GPU-hrs (monthly)'),
-    React.createElement(HistoricalUsageChart, { monthly }),
+    React.createElement('h3', null, 'Top 10 PIs by consumption'),
+    React.createElement(PiConsumptionTable, { details }),
     React.createElement('h3', null, 'CPU/GPU-hrs per Slurm account'),
     React.createElement(AccountsChart, { details }),
-    React.createElement('h3', null, 'Top 10 PIs by consumption'),
-    React.createElement(PiConsumptionTable, { details })
+    React.createElement('h3', null, 'Historical CPU/GPU-hrs (monthly)'),
+    React.createElement(HistoricalUsageChart, { monthly })
   );
 }