diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index 6baac5a..a4eb0d4 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 32589,
-    "mtimeMs": 1783779020571.2231
+    "size": 33248,
+    "mtimeMs": 1783780167713.1963
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index dd5752e..aace99c 100644
--- a/web/asset-versions.json
+++ b/web/asset-versions.json
@@ -3,7 +3,7 @@
   "blog.css": 2,
   "custom-dialog.js": 11,
   "public-status.js": 14,
-  "ticket-order.js": 18,
+  "ticket-order.js": 19,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index 2ed6e98..84c9efb 100644
--- a/web/ticket-order.html
+++ b/web/ticket-order.html
@@ -158,7 +158,7 @@
   </div>
 
   <script src="/custom-dialog.js?v=11"></script>
-  <script src="/ticket-order.js?v=18"></script>
+  <script src="/ticket-order.js?v=19"></script>
   <script src="/public-status.js?v=14"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
diff --git a/web/ticket-order.js b/web/ticket-order.js
index 4fcd2b5..25759c6 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -186,6 +186,7 @@
           for (const li of lineStops) {
               for (let i = 0; i < li.stops.length; i++) {
                   const code = li.stops[i];
+                  if (code === '-') continue;
                   const canonical = stationCanonicalByCode[code] || code;
                   if (!occurrences[canonical]) occurrences[canonical] = [];
                   occurrences[canonical].push(i * minGapX);
@@ -202,6 +203,7 @@
               for (const li of lineStops) {
                   let prevX = startX - minGapX;
                   for (const code of li.stops) {
+                      if (code === '-') continue;
                       const canonical = stationCanonicalByCode[code] || code;
                       const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
                       const nx = Math.max(x, prevX + minGapX);
@@ -287,9 +289,20 @@
               const codes = (stationCodesByCanonical[canonical] || []).filter(code => Number.isFinite(stationYByCanonical[code]));
               if (codes.length < 2) continue;
               const x = stationXByCanonical[canonical];
-              const y = stationYByCanonical[codes[0]];
-              const labelY = y + 34;
-              svgContent += `<circle cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
+              
+              const ys = codes.map(c => stationYByCanonical[c]);
+              const minY = Math.min(...ys);
+              const maxY = Math.max(...ys);
+
+              // Draw vertical pill connecting the transfer stations
+              if (maxY > minY) {
+                  svgContent += `<rect x="${x - 8}" y="${minY}" width="16" height="${maxY - minY}" rx="8" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
+              }
+
+              const y = minY;
+              const labelY = y - 34;
+              // Remove the standalone circle for the transfer hub, just rely on the nodes themselves and the vertical pill
+              // svgContent += `<circle cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
               svgContent += `<rect x="${x - 42}" y="${labelY - 16}" width="84" height="24" rx="12" fill="rgba(241,245,249,0.92)" stroke="#cbd5e1" stroke-width="1.5" />`;
               svgContent += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
               labelShownForCanonical.add(canonical);