Index: frontend/src/Components/TransportDetails/FinalPoint.js
===================================================================
--- frontend/src/Components/TransportDetails/FinalPoint.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/TransportDetails/FinalPoint.js	(revision e9b4ba920295b1b329df3313a9e80743d23804ee)
@@ -17,5 +17,5 @@
     <>
       <Row>
-        {props.left === "true" && <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
+        {props.left === "true" && <Col className="d-flex flex-column justify-content-center col-auto" style={{paddingLeft: "2.6rem"}}>
             <h5 className="m-auto">{getTimeAsString(props.time)}</h5>
         </Col>  }
Index: frontend/src/Components/TransportDetails/Line.js
===================================================================
--- frontend/src/Components/TransportDetails/Line.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/TransportDetails/Line.js	(revision e9b4ba920295b1b329df3313a9e80743d23804ee)
@@ -2,5 +2,7 @@
 
 const Line = (props) => {
-    const left = props.left === "true" ? "1.8rem" : "1.85rem";
+    console.log(props.left)
+    const left = props.left === "true" ? "9.08rem" : "2.6rem";
+    console.log({borderLeft: "5px solid #159895", height: "3em", marginLeft: left, marginTop: "-1.4rem", marginBottom: "-1.4rem"})
     return (<>
         <div style={{borderLeft: "5px solid #159895", height: "3em", marginLeft: left, marginTop: "-1.4rem", marginBottom: "-1.4rem"}}></div>
Index: frontend/src/Components/TransportDetails/RouteContainer.js
===================================================================
--- frontend/src/Components/TransportDetails/RouteContainer.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/TransportDetails/RouteContainer.js	(revision e9b4ba920295b1b329df3313a9e80743d23804ee)
@@ -20,5 +20,5 @@
         }}
       >
-        <Waypoint city={props.data.from} time={''}></Waypoint>
+        <Waypoint city={props.data.from} time={props.data.date}></Waypoint>
         {props.data.routes && props.data.routes.map((route, i) => {
           return <Waypoint city={route} time={props.data.times[i]}></Waypoint>
Index: frontend/src/Components/TransportDetails/Waypoint.js
===================================================================
--- frontend/src/Components/TransportDetails/Waypoint.js	(revision efaa05348a3e0dac884385ba4dd765baaeb47ec6)
+++ frontend/src/Components/TransportDetails/Waypoint.js	(revision e9b4ba920295b1b329df3313a9e80743d23804ee)
@@ -1,60 +1,38 @@
 import React from "react";
-import {Container, Row, Col} from "react-bootstrap";
-import {RxDot} from "react-icons/rx"
+import { Container, Row, Col } from "react-bootstrap";
+import { RxDot } from "react-icons/rx"
 import Line from "./Line";
 
 const Waypoint = (props) => {
-    console.log(props.left)
-    const style = props.left === "true" ? {textAlign: "left"} : {}
-    console.log(style)
+  console.log(props.left)
+  const style = props.left === "true" ? {textAlign: "left"} : {}
+  console.log(style)
 
-    const getTimeAsString = (dateString) => {
-        if(dateString === '')
-            return ''
-        const date = new Date(dateString)
-        return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    }
+  const getTimeAsString = (dateString) => {
+    const date = new Date(dateString)
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+  }
 
-    return (
-        <>
-            <Row className="d-flex flex-row gap-0">
-                {props.left === "true" &&
-                    <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
-                        <h5 style={{color: props.routes === "true" ? "white" : ""}}
-                            className="m-auto">{getTimeAsString(props.time)}</h5>
-                    </Col>}
-                <Col md="auto">
-                    <RxDot size={"4rem"} color="#159895"></RxDot>
-                </Col>
-                <Col className="d-flex flex-column justify-content-center">
-                    <h3 className="my-auto" style={{
-                        ...style,
-                        fontSize: props.routes === "true" ? "1.3rem" : "",
-                        color: props.routes === "true" ? "#708090	" : ""
-                    }}>{props.city}</h3>
-                </Col>
-                {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
-                    <h5>{getTimeAsString(props.time)}</h5>
-                </Col>}
-            </Row>
-            <Row className="d-flex flex-row gap-0">
-                {props.left === "true" &&
-                    <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
-
-                    </Col>}
-                <Col md="auto">
-                    <Line left={props.left}> </Line>
-                </Col>
-                <Col className="d-flex flex-column justify-content-center">
-                </Col>
-                {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
-
-                </Col>}
-            </Row>
-            {/*<Row>*/}
-            {/*<Line left={props.left}> </Line>*/}
-            {/*</Row>*/}
-        </>
-    );
+  return (
+    <>
+      <Row className="d-flex flex-row gap-0">
+      {props.left === "true" && <Col className="d-flex flex-column justify-content-center col-auto" style={{paddingLeft: "2.6rem"}}>
+            <h5 style={{color: props.routes === "true" ? "white" : "" }} className="m-auto">{getTimeAsString(props.time)}</h5>
+        </Col>}
+        <Col md="auto">
+          <RxDot size={"4rem"} color="#159895"></RxDot>
+        </Col>
+        <Col className="d-flex flex-column justify-content-center">
+          <h3 className="my-auto" style={{...style, fontSize: props.routes === "true" ? "1.3rem" : "", color: props.routes === "true" ? "#708090	" : ""}}>{props.city}</h3>
+        </Col>
+      {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
+            <h5>{getTimeAsString(props.time)}</h5>
+        </Col>}
+      </Row>
+      <Row>
+      <Line left={props.left}> </Line>
+      </Row>
+    </>
+  );
 };
 
