diff --git a/app/views/cities/_city.html.erb b/app/views/cities/_city.html.erb
index bc7177e..aae338b 100644
--- a/app/views/cities/_city.html.erb
+++ b/app/views/cities/_city.html.erb
@@ -1,53 +1,126 @@
+<!-- app/views/cities/_city.html.erb -->
 <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden">
   <% if city.latest_weather_art&.image&.attached? %>
-    <figure class="relative aspect-[16/9]">
-      <%= image_tag city.latest_weather_art.image,
-                    class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
-      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+    <!-- 图片和主要信息区域 -->
+    <div class="relative">
+      <!-- 图片 -->
+      <figure class="aspect-[16/9] overflow-hidden">
+        <%= image_tag city.latest_weather_art.image,
+                      class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
+      </figure>
+
+      <!-- 渐变遮罩 - 使用多层渐变提供更好的文字可读性 -->
+      <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
+      <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-transparent"></div>
+
+      <!-- 温度显示 - 放在右上角 -->
+      <div class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm rounded-xl px-3 py-2 text-white">
+        <div class="text-2xl font-bold leading-none">
+          <%= city.latest_weather_art.temperature %>°C
+        </div>
+        <div class="text-xs text-white/80">
+          Feels <%= city.latest_weather_art.feeling_temp %>°C
+        </div>
+      </div>
+
+      <!-- 城市名称和位置 - 放在底部 -->
       <div class="absolute bottom-0 left-0 right-0 p-6">
-        <h3 class="text-2xl font-display text-white mb-1">
+        <h3 class="text-2xl font-display text-white font-bold mb-2 drop-shadow-lg">
           <%= city.name %>
         </h3>
-        <p class="text-white/80 text-sm">
+        <div class="flex items-center gap-2 text-white/90 text-sm drop-shadow-lg">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+          </svg>
           <%= city.country.name %>, <%= city.region.name %>
-        </p>
-      </div>
-    </figure>
-  <% else %>
-    <div class="card-body">
-      <h3 class="card-title font-display"><%= city.name %></h3>
-      <p class="text-base-content/70">
-        <%= city.country.name %>, <%= city.region.name %>
-      </p>
-      <div class="flex gap-2 text-sm text-base-content/60">
-        <span>Lat: <%= city.latitude %></span>
-        <span>Long: <%= city.longitude %></span>
+        </div>
       </div>
     </div>
-  <% end %>
 
-  <div class="card-body <%= 'pt-0' if city.latest_weather_art&.image&.attached? %>">
-    <div class="flex gap-4 text-sm text-base-content/70">
-      <div class="flex items-center gap-1">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-        </svg>
-        <%= city.timezone %>
-      </div>
-      <% if city.latest_weather_art %>
+    <!-- 底部信息区域 -->
+    <div class="card-body bg-base-100">
+      <!-- 天气信息和更新时间 -->
+      <div class="flex items-center justify-between text-sm text-base-content/70 mb-3">
+        <div class="flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+          </svg>
+          <%= city.latest_weather_art.description %>
+        </div>
         <div class="flex items-center gap-1">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
         </div>
-      <% end %>
+      </div>
+
+      <!-- 天气详情 -->
+      <div class="grid grid-cols-3 gap-2 mb-4">
+        <div class="stat bg-base-200/50 rounded-lg p-2">
+          <div class="stat-title text-xs">Humidity</div>
+          <div class="stat-value text-lg"><%= city.latest_weather_art.humidity %>%</div>
+        </div>
+        <div class="stat bg-base-200/50 rounded-lg p-2">
+          <div class="stat-title text-xs">Wind</div>
+          <div class="stat-value text-lg"><%= city.latest_weather_art.wind_scale %></div>
+        </div>
+        <div class="stat bg-base-200/50 rounded-lg p-2">
+          <div class="stat-title text-xs">Visibility</div>
+          <div class="stat-value text-lg"><%= city.latest_weather_art.visibility %>km</div>
+        </div>
+      </div>
+
+      <!-- 按钮 -->
+      <div class="card-actions justify-end">
+        <%= link_to city_path(city),
+                    class: "btn btn-primary btn-sm gap-2" do %>
+          View Details
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        <% end %>
+      </div>
     </div>
 
-    <div class="card-actions justify-end mt-4">
-      <%= link_to "View Details", city_path(city),
-                  class: "btn btn-primary btn-sm" %>
+  <% else %>
+    <!-- 无图片时的备用显示 -->
+    <div class="card-body">
+      <h3 class="card-title font-display text-2xl mb-3"><%= city.name %></h3>
+
+      <div class="flex items-center gap-2 text-base-content/70 mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+        </svg>
+        <%= city.country.name %>, <%= city.region.name %>
+      </div>
+
+      <div class="bg-base-200 rounded-lg p-4 mb-4">
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div class="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+            </svg>
+            <span>Lat: <%= city.latitude %></span>
+          </div>
+          <div class="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+            </svg>
+            <span>Long: <%= city.longitude %></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-actions justify-end">
+        <%= link_to city_path(city),
+                    class: "btn btn-primary btn-sm gap-2" do %>
+          View Details
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
 </div>
\ No newline at end of file