diff --git a/app/components/WeatherDisplay.tsx b/app/components/WeatherDisplay.tsx
new file mode 100644
index 0000000..6efd581
--- /dev/null
+++ b/app/components/WeatherDisplay.tsx
@@ -0,0 +1,46 @@
+
+import React from 'react';
+import {
+    Cloud,
+    CloudDrizzle,
+    CloudFog,
+    CloudLightning, CloudMoon,
+    CloudRain,
+    CloudSnow,
+    CloudSun,
+    MapPin, Moon, Sun,
+    ThermometerSun
+} from 'lucide-react';
+
+import { formatTemperature } from "@/lib/utils";
+import { useWeatherStore } from '@/store/weatherStore';
+interface WeatherIconProps {
+    description: string;
+    isDay: string;
+    className?: string;
+}
+
+/**
+ * Returns the appropriate weather icon based on description and time of day
+ */
+function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-20" }: WeatherIconProps) {
+    const desc = description.toLowerCase();
+    const isDaytime = isDay === 'yes';
+
+    if (desc.includes('rain') || desc.includes('雨')) {
+        return desc.includes('heavy') || desc.includes('暴')
+            ? <CloudRain className={className} />
+            : <CloudDrizzle className={className} />;
+    }
+    if (desc.includes('snow') || desc.includes('雪')) return <CloudSnow className={className} />;
+    if (desc.includes('thunder') || desc.includes('storm') || desc.includes('雷')) return <CloudLightning className={className} />;
+    if (desc.includes('fog') || desc.includes('mist') || desc.includes('haze') || desc.includes('雾') || desc.includes('霾')) return <CloudFog className={className} />;
+    if (desc.includes('partly') || desc.includes('scattered') || desc.includes('多云')) {
+        return isDaytime ? <CloudSun className={className} /> : <CloudMoon className={className} />;
+    }
+    if (desc.includes('cloudy') || desc.includes('overcast') || desc.includes('阴')) return <Cloud className={className} />;
+    if (desc.includes('clear') || desc.includes('sunny') || desc.includes('晴')) {
+        return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
+    }
+    return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
+}