diff --git a/src/slurmcostmanager.css b/src/slurmcostmanager.css
index 51ed1a5..ef62a89 100644
--- a/src/slurmcostmanager.css
+++ b/src/slurmcostmanager.css
@@ -79,6 +79,14 @@ nav button:hover {
   color: red;
 }
 
+.error-details {
+  border: 1px solid #ccc;
+  background: #fdd;
+  padding: 0.5em;
+  white-space: pre-wrap;
+  margin-top: 0.5em;
+}
+
 .clickable {
   cursor: pointer;
 }
diff --git a/src/slurmcostmanager.js b/src/slurmcostmanager.js
index 89c1372..b9fe8a6 100644
--- a/src/slurmcostmanager.js
+++ b/src/slurmcostmanager.js
@@ -1050,6 +1050,7 @@ function Rates({ onRatesUpdated }) {
 function App() {
   const [view, setView] = useState('summary');
   const { data, error, reload } = useBillingData();
+  const [showErrorDetails, setShowErrorDetails] = useState(false);
 
   return React.createElement(
     'div',
@@ -1077,9 +1078,26 @@ function App() {
     view !== 'settings' &&
       error &&
       React.createElement(
-        'p',
+        'div',
         { className: 'error' },
-        `Failed to load data: ${error}`
+        React.createElement(
+          'p',
+          null,
+          'Failed to load data ',
+          React.createElement(
+            'a',
+            {
+              href: '#',
+              onClick: e => {
+                e.preventDefault();
+                setShowErrorDetails(v => !v);
+              }
+            },
+            '(Click here to Learn More)'
+          )
+        ),
+        showErrorDetails &&
+          React.createElement('pre', { className: 'error-details' }, error)
       ),
     data &&
       view === 'summary' &&