diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 4bbc571..8b26b2a 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -312,7 +312,9 @@ const proposalId = id ?? '';
               </summary>
               <div class="panel-body">
                 <div id="detailed-results" class="detailed-results">
-                  <p class="loading-small">Loading results…</p>
+                  <div class="state-card ui-card ui-card-soft">
+                    <p class="loading">Loading results…</p>
+                  </div>
                 </div>
               </div>
             </details>
@@ -434,15 +436,39 @@ const proposalId = id ?? '';
     if (!container) return;
 
     try {
+      container.innerHTML = `
+        <div class="state-card ui-card ui-card-soft">
+          <p class="loading">Loading results…</p>
+        </div>
+      `;
+
       if (!token) {
-        container.innerHTML = '<p class="error">Login required to view results</p>';
+        container.innerHTML = `
+          <div class="state-card ui-card ui-card-soft">
+            <p class="error">Login required to view results.</p>
+            <p class="hint">Sign in to see the final breakdown and method details.</p>
+            <div class="state-actions">
+              <a class="ui-btn ui-btn-primary" href="/login">Login</a>
+            </div>
+          </div>
+        `;
         return;
       }
 
       const host = document.getElementById('results-chart-host');
       const chart = host?.querySelector('.results-chart');
       if (!host || !chart) {
-        container.innerHTML = '<p class="error">Results chart unavailable</p>';
+        container.innerHTML = `
+          <div class="state-card ui-card ui-card-soft">
+            <p class="error">Results chart unavailable.</p>
+            <p class="hint">Try reloading the results.</p>
+            <div class="state-actions">
+              <button type="button" class="ui-btn ui-btn-secondary" id="retry-results">Retry</button>
+            </div>
+          </div>
+        `;
+
+        document.getElementById('retry-results')?.addEventListener('click', loadDetailedResults);
         return;
       }
 
@@ -456,7 +482,17 @@ const proposalId = id ?? '';
 
       chart.dataset.enabled = '1';
     } catch (error) {
-      container.innerHTML = '<p class="error">Error loading results</p>';
+      container.innerHTML = `
+        <div class="state-card ui-card ui-card-soft">
+          <p class="error">Error loading results.</p>
+          <p class="hint">Please try again.</p>
+          <div class="state-actions">
+            <button type="button" class="ui-btn ui-btn-secondary" id="retry-results">Retry</button>
+          </div>
+        </div>
+      `;
+
+      document.getElementById('retry-results')?.addEventListener('click', loadDetailedResults);
     }
   }