diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
index 7529df0..5a32745 100644
--- a/src/components/Weather.tsx
+++ b/src/components/Weather.tsx
@@ -33,6 +33,29 @@ function getWeatherIcon(forecast: string, className?: string) {
   return <Sun className={className} />;
 }
 
+function getWeatherTheme(forecast: string) {
+  const f = forecast.toLowerCase();
+  if (f.includes("thunder") || f.includes("lightning"))
+    return { tint: "from-purple-500/20", icon: "text-purple-300" };
+  if (f.includes("snow") || f.includes("flurr"))
+    return { tint: "from-cyan-300/20", icon: "text-cyan-200" };
+  if (f.includes("rain") || f.includes("shower") || f.includes("drizzle"))
+    return { tint: "from-blue-500/20", icon: "text-blue-300" };
+  if (f.includes("fog") || f.includes("mist") || f.includes("haze"))
+    return { tint: "from-slate-400/15", icon: "text-slate-300" };
+  if (f.includes("partly cloudy"))
+    return { tint: "from-amber-400/15", icon: "text-amber-200" };
+  if (
+    f.includes("mostly cloudy") ||
+    f.includes("cloud") ||
+    f.includes("overcast")
+  )
+    return { tint: "from-zinc-400/10", icon: "text-zinc-300" };
+  if (f.includes("sunny") || f.includes("clear"))
+    return { tint: "from-amber-500/20", icon: "text-amber-300" };
+  return { tint: "from-amber-500/20", icon: "text-amber-300" };
+}
+
 export function Weather() {
   const [weather, setWeather] = useState<{
     temperature: number;
@@ -69,10 +92,15 @@ export function Weather() {
     return <div>Loading weather...</div>;
   }
 
+  const theme = getWeatherTheme(weather.shortForecast);
+
   return (
-    <div className="card p-4">
-      <div className="flex items-center gap-4">
-        {getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")}
+    <div className="card p-4 relative overflow-hidden">
+      <div
+        className={`absolute inset-0 bg-gradient-to-br ${theme.tint} to-transparent pointer-events-none`}
+      />
+      <div className="relative flex items-center gap-4">
+        {getWeatherIcon(weather.shortForecast, `w-12 h-12 ${theme.icon}`)}
         <div>
           <div className="flex items-baseline gap-2">
             <span className="text-4xl font-light">{weather.temperature}°</span>
diff --git a/src/index.css b/src/index.css
index 3e84bdc..bb189ad 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,8 +11,8 @@
 
 body {
     background:
-        radial-gradient(ellipse 120% 80% at 0% 0%, rgba(244, 63, 94, 0.12), transparent 70%),
-        radial-gradient(ellipse 120% 80% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 70%),
+        radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, 0.12), transparent 70%),
+        radial-gradient(ellipse 120% 80% at 100% 100%, rgba(56, 189, 248, 0.10), transparent 70%),
         linear-gradient(to bottom, #18181b, #0c0c0e);
     background-attachment: fixed;
     min-height: 100vh;