diff --git a/src/components/HourlyForecast.svelte b/src/components/HourlyForecast.svelte
index 3b31c55..8f7dcba 100644
--- a/src/components/HourlyForecast.svelte
+++ b/src/components/HourlyForecast.svelte
@@ -55,15 +55,16 @@
           <span class="hour-temp">{Math.round(hour.temp)}{unit}</span>
           {#if hour.precip > 0}
             <div class="precip-bar-container">
-              <div class="precip-bar" style="height: {Math.min(hour.precip, 100)}%"></div>
+              <div class="precip-bar" style="--precip: {Math.min(hour.precip, 100)}%"></div>
             </div>
             <span class="precip-value">{hour.precip}%</span>
           {:else}
             <div class="precip-bar-container">
-              <div class="precip-bar" style="height: 0"></div>
+              <div class="precip-bar" style="--precip: 0%"></div>
             </div>
             <span class="precip-value">--</span>
           {/if}
+          <span class="hour-wind" title="Wind speed">💨 {Math.round(hour.windSpeed)}</span>
         </div>
       {/each}
     </div>
@@ -144,9 +145,10 @@
 
   .precip-bar {
     width: 100%;
+    height: var(--precip);
     background: var(--color-rain);
     border-radius: 2px;
-    transition: height 0.3s ease;
+    transition: height 0.3s ease, width 0.3s ease;
     min-height: 0;
   }
 
@@ -156,23 +158,70 @@
     white-space: nowrap;
   }
 
+  .hour-wind {
+    font-size: 0.68rem;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    margin-top: 2px;
+  }
+
   @media (max-width: 1023px) {
-    .hour-item {
-      min-width: 64px;
-      padding: 10px 6px;
+    .hourly-scroll {
+      display: flex;
+      flex-direction: column;
       gap: 4px;
+      overflow-x: visible;
+      scroll-snap-type: none;
+    }
+
+    .hour-item {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      min-width: 0;
+      padding: 10px 12px;
+      gap: 8px;
+      scroll-snap-align: none;
+    }
+
+    .hour-time {
+      font-size: 0.78rem;
+      min-width: 42px;
     }
 
     .hour-icon {
-      font-size: 1.2rem;
+      font-size: 1.3rem;
     }
 
     .hour-temp {
-      font-size: 0.82rem;
+      font-size: 0.85rem;
+      min-width: 40px;
+      text-align: right;
     }
 
     .precip-bar-container {
-      height: 24px;
+      width: 50px;
+      height: 4px;
+    }
+
+    .precip-bar {
+      height: 100%;
+      width: var(--precip);
+      min-width: 0;
+    }
+
+    .precip-value {
+      font-size: 0.7rem;
+      min-width: 28px;
+      text-align: right;
+    }
+
+    .hour-wind {
+      font-size: 0.7rem;
+      color: var(--color-text-muted);
+      white-space: nowrap;
+      min-width: 48px;
+      text-align: right;
     }
   }
 </style>