diff --git a/front/bahnui-front/src/assets/Raveo Display Bold.woff2 b/front/bahnui-front/src/assets/Raveo Display Bold.woff2
new file mode 100644
index 0000000..4a608ba
Binary files /dev/null and b/front/bahnui-front/src/assets/Raveo Display Bold.woff2 differ
diff --git a/front/bahnui-front/src/assets/Raveo Display Medium.woff2 b/front/bahnui-front/src/assets/Raveo Display Medium.woff2
new file mode 100644
index 0000000..eea88e1
Binary files /dev/null and b/front/bahnui-front/src/assets/Raveo Display Medium.woff2 differ
diff --git a/front/bahnui-front/src/assets/Raveo Display Regular.woff2 b/front/bahnui-front/src/assets/Raveo Display Regular.woff2
new file mode 100644
index 0000000..a78744d
Binary files /dev/null and b/front/bahnui-front/src/assets/Raveo Display Regular.woff2 differ
diff --git a/front/bahnui-front/src/components/routing.vue b/front/bahnui-front/src/components/routing.vue
index d73b5d4..e271a54 100644
--- a/front/bahnui-front/src/components/routing.vue
+++ b/front/bahnui-front/src/components/routing.vue
@@ -13,7 +13,10 @@
       <h2>{{ toTime(connection.legs[0].departure) }} - {{ toTime(connection.legs[connection.legs.length -1].arrival) }}</h2>
       <div class="leg" v-for="leg in connection.legs" :key="connection.legs.indexOf(leg)" :class="leg.walking ? 'walking' : null" :style="{backgroundColor:getTimeColor(leg.arrival), background:getGradient(leg.departure, leg.arrival)}" >
         <div class="station" >{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<br/> Gleis {{ leg.departurePlatform }}</div>
-        <div class="line">{{ leg.line?.product }}<br/>{{ leg.line?.name }}<br/><p class="operator">{{ leg.line?.operator?.name }}</p></div>
+        <div class="line">
+          {{ leg.line?.product }}<br/>
+          <div class="linename" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.line?.name }}</div><br/>
+          <p class="operator">{{ leg.line?.operator?.name }}</p></div>
         <div class="station" >{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }}<br/> Gleis {{ leg.arrivalPlatform }}</div>
         <hr/>
       </div>
@@ -69,11 +72,11 @@
           client.get("/searchStation", {params: {text: this.from.name}}).then(res => this.from = {name: res.data.name, id: res.data.id});
         },
         searchStationTo() {
-            axios.get("/searchStation", {params: {text: this.to.name}}).then(res => this.to = {name: res.data.name, id: res.data.id});
+          client.get("/searchStation", {params: {text: this.to.name}}).then(res => this.to = {name: res.data.name, id: res.data.id});
         },
         searchConnection() {
           if (this.from.id && this.to.id){
-            axios.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
+            client.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
           }
         },
         toDate(string){
@@ -87,13 +90,11 @@
           let color1;
           let color2;
           let minutes;
-          console.log(this.toTime(string));
           
           let i = 0;
           color1 = timecolors[i];
           color2 = timecolors[i+1];
           while (color1.h < date.getHours() && i+1 < timecolors.length){
-            console.log(color2.h +"<"+ date.getHours());
             i++;
             color1 = timecolors[i];
             if (i+2 < timecolors.length) {
@@ -103,19 +104,35 @@
             }
           }
           minutes = (date.getHours()-color1.h) * 60 + date.getMinutes();
-          console.log(color1.h+" - "+color2.h);
-          console.log(minutes);
           let maxMinutes = color2.h == 0 ? (24 - color1.h)*60 : (color2.h - color1.h)*60
-          console.log("max:"+maxMinutes);
           let r = (color2.r * minutes + color1.r * (maxMinutes-minutes))/maxMinutes;
           let g = (color2.g * minutes + color1.g * (maxMinutes-minutes))/maxMinutes;
           let b = (color2.r * minutes + color1.b * (maxMinutes-minutes))/maxMinutes;
           let color = "rgb("+r+","+g+","+b+")"
-          console.log(color);
           return color;
         },
         getGradient(time1, time2){
           return "linear-gradient(0deg,"+this.getTimeColor(time2)+","+this.getTimeColor(time1)+")";
+        },
+        getLineColors(line){
+          console.log(line);
+          if (!line){
+            return (['black', 'white']);
+          } else if (line.productName === "STB"){
+            return (['white', 'blue']);
+          } else if (line.productName === "S"){
+            return (['white', 'green']);
+          } else if (line.productName === "RE" || line.productName === "RB"){
+            return (['white', 'red']);
+          } else if (line.productName === "IC" || line.productName === "ICE"){
+            return (['red', 'white']);
+          } else if (line.productName === "EC" || line.productName === "ECE"){
+            return (['blue', 'white']);
+          } else if (line.productName === "MEX"){
+            return (['black', 'yellow']);
+          } else {
+            return (['black', 'white']);
+          }
         }
 
     }
@@ -140,6 +157,7 @@
   }
   .journey {
     margin: 40px;
+    width: 450px;
   }
   .station {
     margin: 4px;
@@ -160,9 +178,22 @@
     display: inline-flex;
   }
   div {
-    font-family:Verdana, Geneva, Tahoma, sans-serif;
+    font-family:"Raveo-display-medium";
   }
   .walking > div {
     font-size: 12px;
   }
+  .linename {
+    width:100px;
+    font-family:"Raveo-display-bold";
+    align-content: center;
+  }
+  @font-face {
+    font-family: "Raveo-display-bold";
+    src: url("../assets/Raveo Display Bold.woff2") format("opentype"); 
+  }
+  @font-face {
+    font-family: "Raveo-display-medium";
+    src: url("../assets/Raveo Display Medium.woff2") format("opentype"); 
+  }
 </style>