diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html
index 7af6a51..08ef588 100644
--- a/resources/components/departures/departure.html
+++ b/resources/components/departures/departure.html
@@ -34,7 +34,7 @@
         </div>
     </div>
     <fold :visible="showTrip">
-        <trip :schedule="trip.schedule" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/>
+        <trip :schedule="trip.schedule" :current="departure.stop" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/>
         <div v-else class="text-center">
             <fa icon="spinner-third" pulse></fa>
         </div>
diff --git a/resources/components/trip.html b/resources/components/trip.html
index f8a4c71..aa1bdd3 100644
--- a/resources/components/trip.html
+++ b/resources/components/trip.html
@@ -1,6 +1,6 @@
 <div class="trip">
     <ol class="trip__stops" v-dragscroll.x>
-        <li v-for="stop in schedule" class="trip__stop">
+        <li v-for="stop in stops" class="trip__stop" :class="[ stop.current && 'trip__stop--current', stop.visited && 'trip__stop--visited' ]">
             <div class="trip__marker"/>
             <div class="trip__description">
                 <stop :stop="stop.stop"/>
diff --git a/resources/styles/_trip.scss b/resources/styles/_trip.scss
index 505d725..c44d124 100644
--- a/resources/styles/_trip.scss
+++ b/resources/styles/_trip.scss
@@ -6,6 +6,7 @@ $description-width: 250px;
 $trip-stop-marker-size: .9rem;
 $trip-stop-marker-spacing: .75rem;
 $trip-line-width: .2rem;
+$trip-visited: rgba($dark, .3);
 
 .trip {
   display: flex;
@@ -87,6 +88,25 @@ $trip-line-width: .2rem;
   }
 }
 
+.trip__stop--visited {
+  .trip__marker {
+    border-color: $trip-visited;
+    &::before, &::after {
+      background: $trip-visited;
+    }
+  }
+
+  .trip__description, .trip__departure {
+    opacity: .4;
+  }
+}
+
+.trip__stop--current .trip__marker {
+  &::before {
+    background: $trip-visited;
+  }
+}
+
 .trip__description {
   display: flex;
   transform: rotate(-$description-rotation) translateX(.75rem);
@@ -101,7 +121,6 @@ $trip-line-width: .2rem;
   }
 }
 
-
 .trip__departure {
   font-size: $small-font-size;
   font-weight: bold;
diff --git a/resources/ts/components/trip.ts b/resources/ts/components/trip.ts
index 3575d9e..99100c0 100644
--- a/resources/ts/components/trip.ts
+++ b/resources/ts/components/trip.ts
@@ -2,10 +2,24 @@ import Vue from "vue";
 import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
 import { ScheduledStop } from "../model/trip";
+import { Stop } from "../model";
+
+type ScheduledStopInfo = ScheduledStop & { visited: boolean, current: boolean };
 
 @Component({ template: require("../../components/trip.html") })
 export class TripComponent extends Vue {
     @Prop(Array) public schedule: ScheduledStop[];
+    @Prop(Object) public current: Stop;
+
+    get stops(): ScheduledStopInfo[] {
+        let visited = true;
+
+        return this.schedule.map(stop => ({
+            ...stop,
+            current: stop.stop.id == this.current.id ? !(visited = false) : false,
+            visited: visited,
+        }));
+    }
 }
 
 Vue.component('Trip', TripComponent);