diff --git a/src/components/ErrorMessage.jsx b/src/components/ErrorMessage.jsx
index 0b14dd8..147336c 100644
--- a/src/components/ErrorMessage.jsx
+++ b/src/components/ErrorMessage.jsx
@@ -1,4 +1,31 @@
-export default function ErrorMessage({ error }) {
-  if (!error) return null;
-  return <div className="error">Error: {error.toString()}</div>;
+export default function ErrorMessage({ error, message, onRetry }) {
+  if (!error && !message) return null;
+  
+  const displayMessage = message || error?.toString() || 'An error occurred';
+  
+  return (
+    <div className="error">
+      <div className="error-message">
+        ❌ {displayMessage}
+      </div>
+      {onRetry && (
+        <button 
+          className="retry-button" 
+          onClick={onRetry}
+          style={{
+            marginTop: '10px',
+            padding: '8px 16px',
+            backgroundColor: '#007acc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '14px'
+          }}
+        >
+          🔄 Retry
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/src/styles.css b/src/styles.css
index d837b58..2ab98fd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -56,7 +56,23 @@ input, select { background:var(--bg-alt); }
 
 /* Status */
 .loading { padding:0.5rem 0; opacity:0.8; }
-.error { color:var(--danger); font-weight:600; }
+.error { 
+  color:var(--danger); 
+  font-weight:600; 
+  padding: 1rem;
+  background: var(--bg-alt);
+  border: 1px solid var(--danger);
+  border-radius: var(--radius);
+  margin: 1rem 0;
+  text-align: center;
+}
+.error-message {
+  margin-bottom: 0.5rem;
+}
+.retry-button:hover {
+  background: #005a9e !important;
+  transform: translateY(-1px);
+}
 .correct { background: #16a34a !important; color:#fff; }
 .wrong { background:#dc2626 !important; color:#fff; }