2 files changed, 38 insertions, 9 deletions
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 165f9fe..d3c0b06 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -93,13 +93,42 @@
   white-space: nowrap;
 }
 
+.stop-sheet-estimate-arrival {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
 .stop-sheet-estimate-time {
-  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.stop-sheet-estimate-time.is-minutes {
+  color: #22c55e;
+}
+
+.stop-sheet-estimate-time svg {
+  width: 18px;
+  height: 18px;
   color: var(--subtitle-color);
+  flex-shrink: 0;
+}
+
+.stop-sheet-estimate-time.is-minutes svg {
+  color: #22c55e;
 }
 
 .stop-sheet-estimate-distance {
+  font-size: 0.75rem;
   color: var(--subtitle-color);
+  text-align: right;
 }
 
 .stop-sheet-footer {
diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx
index 7255884..0084c14 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Sheet } from "react-modal-sheet";
 import { Link } from "react-router";
 import { useTranslation } from "react-i18next";
-import { RefreshCw } from "lucide-react";
+import { Clock, ClockFading, Hourglass, RefreshCw } from "lucide-react";
 import LineIcon from "./LineIcon";
 import { StopSheetSkeleton } from "./StopSheetSkeleton";
 import { ErrorDisplay } from "./ErrorDisplay";
@@ -168,14 +168,14 @@ export const StopSheet: React.FC<StopSheetProps> = ({
                             <div className="stop-sheet-estimate-route">
                               {estimate.route}
                             </div>
-                            <div className="stop-sheet-estimate-time">
+                          </div>
+                          <div className="stop-sheet-estimate-arrival">
+                            <div className={`stop-sheet-estimate-time ${estimate.minutes <= 15 ? 'is-minutes' : ''}`}>
+                              <Clock />
                               {formatTime(estimate.minutes)}
-                              {regionConfig.showMeters && estimate.meters > -1 && (
-                                <span className="stop-sheet-estimate-distance">
-                                  {" • "}
-                                  {formatDistance(estimate.meters)}
-                                </span>
-                              )}
+                            </div>
+                            <div className="stop-sheet-estimate-distance">
+                              {formatDistance(estimate.meters)}
                             </div>
                           </div>
                         </div>