diff --git a/src/clj/pmagnus/elprice/web/routes/ui.clj b/src/clj/pmagnus/elprice/web/routes/ui.clj
index 0bf6741..231e2ee 100644
--- a/src/clj/pmagnus/elprice/web/routes/ui.clj
+++ b/src/clj/pmagnus/elprice/web/routes/ui.clj
@@ -54,21 +54,34 @@
     (when (seq vals)
       (/ (reduce + 0.0 (map double vals)) (count vals) 10.0))))
 
-(defn- hour-block [hour quarters rank]
+(def ^:private red-gradient
+  ["bg-red-50" "bg-red-100" "bg-red-200" "bg-red-300"
+   "bg-red-400" "bg-red-500" "bg-red-600" "bg-red-700"])
+
+(defn- rank-bg [rank total]
+  (let [top-start (inc (- total 8))
+        pos       (- rank top-start)]
+    (when (>= pos 0)
+      (get red-gradient pos))))
+
+(defn- hour-block [hour quarters rank total-hours]
   (let [sorted (sort-by #(.getMinute (->ldt (:time_dk %))) quarters)
         avg    (avg-ore quarters)
         month  (.getMonthValue (->ldt (:time_dk (first quarters))))
-        tariff (tariffs/tariff-for-hour month hour)]
-    [:details {:class "border-2 border-blue-400 rounded-lg mb-2"}
-     [:summary {:class "flex justify-between py-2 px-3 cursor-pointer hover:bg-gray-50
-                        font-medium text-gray-900"}
+        tariff (tariffs/tariff-for-hour month hour)
+        bg     (rank-bg rank total-hours)
+        dark?  (and bg (>= rank (- total-hours 3)))]
+    [:details {:class (str "border-2 border-blue-400 rounded-lg mb-2 " bg)}
+     [:summary {:class (str "flex justify-between py-2 px-3 cursor-pointer font-medium "
+                            (if dark? "text-white" "text-gray-900"))}
       [:span (format "%02d:00" hour)]
-      [:span {:class "text-gray-500 text-sm"} (str "#" rank)]
+      [:span {:class (str "text-sm " (if dark? "text-red-100" "text-gray-500"))} (str "#" rank)]
       [:span {:class "font-mono"}
        (if avg (format "%.1f(%.1f)" (+ avg tariff) avg) "-")]]
-     [:div {:class "border-t-2 border-blue-400 px-3 pb-2"}
+     [:div {:class (str "border-t-2 border-blue-400 px-3 pb-2 "
+                        (if dark? "text-red-100" "text-gray-500"))}
       (for [q sorted]
-        [:div {:class "flex justify-between py-1 ml-4 text-gray-500"}
+        [:div {:class "flex justify-between py-1 ml-4"}
          [:span (format "%02d:%02d" hour (.getMinute (->ldt (:time_dk q))))]
          [:span {:class "font-mono"} (format-ore (:price_dkk q) tariff)]])]]))
 
@@ -88,11 +101,12 @@
 (defn- price-table [prices]
   [:div
    (if (seq prices)
-     (let [grouped (group-by-hour prices)
-           ranks   (hour-ranks grouped)]
+     (let [grouped     (group-by-hour prices)
+           ranks       (hour-ranks grouped)
+           total-hours (count grouped)]
        [:div
         (for [[hour quarters] grouped]
-          (hour-block hour quarters (get ranks hour)))])
+          (hour-block hour quarters (get ranks hour) total-hours))])
      [:p {:class "mt-2 text-sm text-gray-400"} "Not available yet"])])
 
 (def ^:private tab-base