diff --git a/server/priv/style.css b/server/priv/style.css
index 3399ceb..ec61a22 100644
--- a/server/priv/style.css
+++ b/server/priv/style.css
@@ -72,6 +72,7 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
+    gap: 0.25em;
 
     /*
      * The animation always runs. When the flash is not actually happening, the
@@ -129,6 +130,27 @@ body {
       position: relative;
       z-index: 100;
     }
+    .name {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25em;
+    }
+    .transfers {
+      display: inline flex;
+      flex-wrap: wrap;
+      /* TODO: this feels messy */
+      gap: calc(var(--padding) / 2);
+      margin-top: calc(var(--padding) * 1 / -8);
+      margin-left: calc(var(--padding) / 4);
+      .route-bullet {
+        font-size: calc(1em / 1.5);
+        margin-top: calc(var(--padding) * 3 / 4);
+        margin-left: calc(var(--padding) / -4);
+      }
+    }
+    .arrival-time {
+      flex-shrink: 0;
+    }
 
     margin: var(--margin) 0;
     border-radius: calc(var(--bullet-size) / sqrt(2));
diff --git a/shared/src/subway_gleam/shared/route/train.gleam b/shared/src/subway_gleam/shared/route/train.gleam
index 8447d7e..7a69734 100644
--- a/shared/src/subway_gleam/shared/route/train.gleam
+++ b/shared/src/subway_gleam/shared/route/train.gleam
@@ -154,7 +154,10 @@ pub fn stop_li(
           attribute.classes([#("highlight", is_highlighted)]),
         ],
         [
-          html.span([], [html.text(name), ..transfers]),
+          html.span([attribute.class("name")], [
+            html.text(name),
+            html.span([attribute.class("transfers")], transfers),
+          ]),
           arrival_time.arrival_time(arriving_at: time, cur_time:),
         ],
       ),