diff --git a/app/components/WeatherDispaly2.tsx b/app/components/WeatherDispaly2.tsx
new file mode 100644
index 0000000..b519075
--- /dev/null
+++ b/app/components/WeatherDispaly2.tsx
@@ -0,0 +1,45 @@
+import { MapPin, Thermometer } from "lucide-react";
+
+export function WeatherDisplay2(){
+    const {currentWeather} = useWeatherStore();
+    if(!currentWeather) return null;
+
+    return(
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
+            <div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
+            <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
+            <div className="realtive z-10 ">
+                <div className="flex items-start justify-between mb-6">
+                    <div>
+                        <h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
+                        <div className="text-white w-3 h-3">
+                            <MapPin className="w-3 h-3 text-white" />
+                            <span className="text-white text-sm">{currentWeather.location.country}</span>
+                        </div>
+                        <div className="text-white ">
+                            <WeatherIcon 
+                                description={currentWeather.current.weather_descriptions[0]}
+                                isDay={currentWeather.current.is_day}
+                            />
+                        </div>
+                    </div>
+                    <div className="flex items-baseline gap-2 mb-2">
+                        <span className="text-6xl font-light text-white">
+                            {formatTemperature(currentWeather.current.temperature)}
+                        </span>
+                        <span className="text-2xl text-white">
+                            °C
+                        </span>
+                    </div>
+                    <p className="text-lg text-white mb-2 capitalize font-medium">
+                        {currentWeather.current.weather_descriptions[0]}
+                    </p>
+                    <div className="flex items-center gap-2 text-white text-sm">
+                        <Thermometer className="w-4 h-4"/>
+                        <span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file