diff --git a/README.md b/README.md
index 6f6995f..c02b88d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,12 @@
 # Alternative Name Ideas
 
 - Destation/Destiation/Destiate/Destia/Destistation (Destination + Station)
+
+# Todo
+
+- Add walk connection UI
+- Fix bonn to bonn missing walk
+- make destination/start for next connecion stick as it doesn't change
+- Add delay information
+- Add fake details view for stops
+- Create logo
diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
index a6b51cb..528fdee 100644
--- a/src/routes/journey.tsx
+++ b/src/routes/journey.tsx
@@ -32,7 +32,7 @@ function TransportConnection({
       </p>
       <article
         data-connection
-        class="grid h-56 grid-cols-[3rem_auto_1fr] grid-rows-[auto_1fr_auto] rounded-large bg-light-surface pb-2 pl-2"
+        class="grid h-56 grid-cols-[3rem_auto_1fr] grid-rows-[auto_1fr_auto] rounded-large bg-light-surface p-2"
       >
         <time
           datetime={connection.time.arrive}
@@ -102,6 +102,57 @@ function TransportConnection({
   );
 }
 
+function WalkConnection({ connection }: { connection: Walk }): JSX.Element {
+  return (
+    <>
+      <p class="flex content-center items-center px-2">
+        {/* Setting pl-20 to align with grid. TODO find better solution */}
+        <span class="flex-grow py-2 pl-20 text-title-lg">
+          {connection.start}
+        </span>
+      </p>
+      <article
+        data-connection
+        class="grid grid-cols-[3rem_auto_1fr] grid-rows-[auto_1fr_auto] rounded-large bg-light-surface px-2 py-1"
+      >
+        <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-variant align-top"></div>
+          <div class="absolute inset-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-light-outline-variant"></div>
+        </div>
+
+        <time class="col-start-1 row-start-2 content-center text-center text-label-lg text-light-on-surface-variant">
+          {connection.timeAvailable}
+        </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-variant" />
+        </div>
+
+        <p class="col-start-3 row-start-2 flex items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="20px"
+            viewBox="0 -960 960 960"
+            width="20px"
+            fill="currentColor"
+          >
+            <path d="m280-40 112-564-72 28v136h-80v-188l202-86q14-6 29.5-7t29.5 4q14 5 26.5 14t20.5 23l40 64q26 42 70.5 69T760-520v80q-70 0-125-29t-94-74l-25 123 84 80v300h-80v-260l-84-64-72 324h-84Zm260-700q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z" />
+          </svg>
+
+          <span>
+            {connection.distance} walk (ca. {connection.time})
+          </span>
+        </p>
+
+        <div id="line-head" class="relative col-start-2 row-start-3 size-8">
+          <div class="absolute left-1/2 top-0 h-4 w-1 -translate-x-1/2 place-self-start bg-light-outline-variant align-top"></div>
+          <div class="absolute inset-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-light-outline-variant"></div>
+        </div>
+      </article>
+    </>
+  );
+}
+
 function Connection3(connection: Connection2): JSX.Element {
   return (
     <div class="flex w-screen flex-shrink-0 snap-center snap-always flex-col-reverse overflow-y-scroll *:flex-none">
@@ -111,7 +162,7 @@ function Connection3(connection: Connection2): JSX.Element {
           <TransportConnection connection={connection as Transport} />
         </Match>
         <Match when={connection.type === "walk"}>
-          <div>TODO Walk</div>
+          <WalkConnection connection={connection as Walk} />
         </Match>
       </Switch>
 
@@ -267,6 +318,7 @@ type Walk = {
   timeAvailable: string;
   distance: string;
   time: string;
+  start: string;
 
   /** Optional because this could be the last connection and destination is set. */
   changes?: Connection2[];
@@ -278,6 +330,7 @@ const WALK_BONN_HBF: Walk = {
   timeAvailable: "8min",
   distance: "84m",
   time: "6min",
+  start: "Hauptbahnhof, Bonn",
 };
 
 const WALK_BARBAROSSAPLATZ: Walk = {
@@ -285,6 +338,7 @@ const WALK_BARBAROSSAPLATZ: Walk = {
   timeAvailable: "9min",
   distance: "334m",
   time: "8min",
+  start: "Hauptbahnhof, Bonn",
 };
 
 const RE_WESEL_1628: Connection2 = {