diff --git a/src/components/ErrorMessage.jsx b/src/components/ErrorMessage.jsx
index 0b14dd8..44ad492 100644
--- a/src/components/ErrorMessage.jsx
+++ b/src/components/ErrorMessage.jsx
@@ -1,4 +1,42 @@
-export default function ErrorMessage({ error }) {
-  if (!error) return null;
-  return <div className="error">Error: {error.toString()}</div>;
+export default function ErrorMessage({ message, error, onRetry }) {
+  const errorText = message || error?.toString() || "An error occurred";
+  
+  if (!message && !error) return null;
+  
+  return (
+    <div className="error" style={{ 
+      padding: '16px', 
+      margin: '16px 0',
+      backgroundColor: '#fee',
+      border: '1px solid #fcc',
+      borderRadius: '8px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '12px'
+    }}>
+      <span style={{ flex: 1 }}>
+        ⚠️ <strong>Error:</strong> {errorText}
+      </span>
+      {onRetry && (
+        <button 
+          onClick={onRetry}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: '#ff4444',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            fontWeight: 'bold',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseOver={(e) => e.target.style.backgroundColor = '#cc0000'}
+          onMouseOut={(e) => e.target.style.backgroundColor = '#ff4444'}
+        >
+          🔄 Retry
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/src/pages/Weather.jsx b/src/pages/Weather.jsx
index 7c46851..941ff98 100644
--- a/src/pages/Weather.jsx
+++ b/src/pages/Weather.jsx
@@ -407,7 +407,7 @@ export default function Weather() {
 
         {loading && <Loading />}
         {error && (
-          <ErrorMessage message={error.message} onRetry={() => fetchWeather(city)} />
+          <ErrorMessage message={error} onRetry={() => fetchWeather(city)} />
         )}
 
         {data && !loading && (