diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
index f836962..23ef882 100644
--- a/src/routes/journey.tsx
+++ b/src/routes/journey.tsx
@@ -44,13 +44,15 @@ type Connection2Properties = {
     depart: string;
     duration: string;
   };
+  line: string;
+  headsign: string;
 };
 const TRAM_COLOR = "bg-[#9f3d53]";
 function Connection2(properties: Connection2Properties): JSX.Element {
   return (
-    <div
+    <article
       data-type="connection"
-      class="col-span-3 grid grid-cols-subgrid grid-rows-[auto_1fr_auto] rounded-extra-large pl-2"
+      class="col-span-3 grid grid-cols-subgrid grid-rows-[auto_1fr_auto] rounded-large bg-light-surface pb-2 pl-2"
     >
       <time
         datetime={properties.time.arrive}
@@ -58,21 +60,23 @@ function Connection2(properties: Connection2Properties): JSX.Element {
       >
         {properties.time.arrive}
       </time>
-
       <div id="line-head" class="relative col-start-2 row-start-1 size-8">
         <div class="absolute bottom-0 left-1/2 h-4 w-1 -translate-x-1/2 place-self-start bg-light-outline align-top"></div>
         <div class="absolute inset-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-light-outline"></div>
       </div>
-
-      <div id="line" class="relative col-start-2 row-start-2 h-full w-8">
-        <div class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-light-outline" />
-      </div>
       <time class="col-start-1 content-end pb-4 text-center text-label-lg text-light-on-surface-variant">
         {properties.time.duration}
       </time>
+      <div id="line" class="relative col-start-2 row-start-2 h-full w-8">
+        <div class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-light-outline" />
+      </div>
+      <p class="col-start-3 row-start-2 content-end pb-4">
+        to {properties.headsign}
+      </p>
+
       <time
         datetime={properties.time.depart}
-        class="col-start-1 content-start text-center"
+        class="col-start-1 content-center text-center"
       >
         {properties.time.depart}
       </time>
@@ -80,23 +84,36 @@ function Connection2(properties: Connection2Properties): JSX.Element {
         <div class="absolute left-1/2 top-0 h-4 w-1 -translate-x-1/2 place-self-start bg-light-outline align-top"></div>
         <div class="absolute inset-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-light-outline"></div>
       </div>
-
-      <div data-type="line-pill" class="bg-[#333]">
-        Pill
+      <div
+        data-type="line-pill"
+        class="flex items-center gap-2 justify-self-start  rounded-full bg-[#9f3d53] px-3 py-1 text-light-inverse-on-surface"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="20px"
+          viewBox="0 -960 960 960"
+          width="20px"
+          fill="currentColor"
+        >
+          <path d="M160-260v-380q0-97 85-127t195-33l30-60H280v-60h400v60H550l-30 60q119 3 199.5 32.5T800-640v380q0 59-40.5 99.5T660-120l60 60v20h-80l-80-80H400l-80 80h-80v-20l60-60q-59 0-99.5-40.5T160-260Zm500-140H240h480-60ZM480-240q25 0 42.5-17.5T540-300q0-25-17.5-42.5T480-360q-25 0-42.5 17.5T420-300q0 25 17.5 42.5T480-240Zm-2-440h228-450 222ZM240-480h480v-120H240v120Zm60 280h360q26 0 43-17t17-43v-140H240v140q0 26 17 43t43 17Zm178-520q-134 0-172 14.5T256-680h450q-12-14-52-27t-176-13Z" />
+        </svg>
+        <span class="text-label-lg font-bold">{properties.line}</span>
       </div>
-    </div>
+    </article>
   );
 }
 
 export default function Journey2() {
   return (
     <>
-      <main class="grid h-dvh grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr_auto] bg-light-surface">
+      <main class="grid h-dvh grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr_auto] bg-light-surface-container">
         <div
           id="destination-station"
-          class="col-span-3 grid grid-cols-subgrid content-center bg-light-surface-container pl-2"
+          class="col-span-3 grid grid-cols-subgrid content-center pl-2"
         >
-          <p class="col-start-3 content-center">Neumarkt, Köln</p>
+          <p class="col-start-3 content-center py-2 text-title-md">
+            Neumarkt, Köln
+          </p>
         </div>
 
         <div
@@ -105,38 +122,34 @@ export default function Journey2() {
         >
           <Connection2
             time={{ arrive: "17:05", depart: "16:12", duration: "53min" }}
+            line="STR 16"
+            headsign="Niehl Sebastianstr., Köln"
           />
-          <div class="col-span-3 grid h-8 grid-cols-subgrid bg-light-surface-container pl-2">
+          <div class="col-span-3 grid grid-cols-subgrid pl-2">
             <time class="content-center text-center text-label-lg text-light-on-surface-variant">
               5min
             </time>
-            <p class="col-start-3 h-8 content-center ">Hauptbahnhof, Bonn</p>
+            <p class="col-start-3 content-center py-2 text-title-md">
+              Hauptbahnhof, Bonn
+            </p>
           </div>
-          {/* <div id="connection-1" class="col-span-3 grid grid-cols-subgrid pl-2">
-            <div id="times" class="grid grid-rows-[auto_1fr_auto] pt-1">
-              <time class="text-center">16:07</time>
-              <time class="content-end pb-4 text-center text-label-lg text-light-on-surface-variant">
-                9min
-              </time>
-              <time datetime="15:58" class="content-center">
-                15:58
-              </time>
-            </div>
-            <div id="line" class="relative h-full w-8">
-              <div class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-light-outline" />
-            </div>
-          </div> */}
+
           <Connection2
             time={{ arrive: "16:07", depart: "15:58", duration: "9min" }}
+            line="STR 62"
+            headsign="Dottendorf Quiinusplatz, Bonn"
           />
           <div></div>
         </div>
 
         <div
           id="start-station"
-          class="col-span-3 grid grid-cols-subgrid content-center bg-light-surface-container pl-2"
+          class="col-span-3 grid grid-cols-subgrid content-center pl-2"
         >
-          <p id="start-station-name" class="col-start-3 content-center">
+          <p
+            id="start-station-name"
+            class="col-start-3 content-center py-2 text-title-md"
+          >
             Beuel Konrad-Adenauer-Platz, Bonn
           </p>
         </div>