diff --git a/web/drafting-board.js b/web/drafting-board.js
index 19d188a..b6d8671 100644
--- a/web/drafting-board.js
+++ b/web/drafting-board.js
@@ -6,8 +6,6 @@ import { DataStore } from './datastore.js';
 let element_board = document.querySelector("#drafting-board-content");
 
 export function addJourneyToDraftingBoard(journey) {
-	element_board.innerText = "";
-
 	for (let leg of journey.legs.filter(item => !("walking" in item))) {
 		DataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id);
 		fetchTrip(leg.tripId).then(result => {
@@ -15,98 +13,121 @@ export function addJourneyToDraftingBoard(journey) {
 		});
 	}
 
-	trackedTripsLocationsSorted();
+	drawDraftingBoard();
+}
 
-	let station_offset = 0;
-	let trip_offset = 1;
+export function drawDraftingBoard() {
+	element_board.innerText = "";
 
-	let first_station = true;
+	let sorted_locations = trackedTripsLocationsSorted();
+	let display_locations = sorted_locations.map(item => DataStore.locations.get()[item]);
 
-	for (let leg of journey.legs.filter(item => !("walking" in item))) {
-		if (first_station) {
-			let el_origin_name = EL("div", {
-				class: [ "station-name" ],
-				style: {
-					"grid-column-start": 1,
-					"grid-column-end": 4,
-					"grid-row-start": 1,
-					"grid-row-end": 1,
+	let grid_location_indexes = {};
 
-				},
-			});
-			el_origin_name.innerText = leg.origin.name;
-			element_board.appendChild(el_origin_name);
+	let location_offset = 0;
 
-			let el_origin_column = EL("div", {
-				class: [ "station-column" ],
-				style: {
-					"grid-column-start": 2,
-					"grid-column-end": 3,
-					"grid-row-start": 2,
-					"grid-row-end": journey.legs.length + 2,
+	for (let sorted_location of sorted_locations) {
 
-				},
-			});
-			element_board.appendChild(el_origin_column);
+		grid_location_indexes[sorted_location] = {
+			"name-start": (location_offset * 3) + 1,
+			"name-end": (location_offset * 3) + 4,
+			"column-start": (location_offset * 3) + 2,
+			"column-end": (location_offset * 3) + 3,
+		};
+
+		location_offset += 1;
+
+	}
+
+	let trip_data = DataStore.trips.get();
+	console.log(trip_data);
+
+	function getStopFromTrip(tripId, location_id) {
+		for (let stop of trip_data[tripId]?.stopovers || []) {
+			if (stop.stop.id == location_id) {
+				return stop;
+			}
 
-			first_station = false;
 		}
 
-		let el_destination_name = EL("div", {
+		return undefined;
+
+	}
+
+	let display_trips = DataStore.tracked_trips.get().map(item => {
+		item["trip_data"] = trip_data[item.trip];
+
+		item.originStop = getStopFromTrip(item.trip, item.origin);
+		item.destinationStop = getStopFromTrip(item.trip, item.destination);
+
+		return item;
+	});
+
+	console.log(display_trips);
+
+	let rows = display_trips.length;
+
+	for (let display_location of display_locations) {
+		let el_location_name = EL("div", {
 			class: [ "station-name" ],
 			style: {
-				"grid-column-start": (station_offset * 3) + 4,
-				"grid-column-end": (station_offset * 3) + 7,
+				"grid-column-start": grid_location_indexes[display_location.id]["name-start"],
+				"grid-column-end": grid_location_indexes[display_location.id]["name-end"],
 				"grid-row-start": 1,
 				"grid-row-end": 1,
 
 			},
 		});
-		el_destination_name.innerText = leg.destination.name;
-		element_board.appendChild(el_destination_name);
+		el_location_name.innerText = display_location?.name;
+		element_board.appendChild(el_location_name);
 
-		let el_destination_column = EL("div", {
+		let el_location_column = EL("div", {
 			class: [ "station-column" ],
 			style: {
-				"grid-column-start": (station_offset * 3) + 5,
-				"grid-column-end": (station_offset * 3) + 6,
+				"grid-column-start": grid_location_indexes[display_location.id]["column-start"],
+				"grid-column-end": grid_location_indexes[display_location.id]["column-end"],
 				"grid-row-start": 2,
-				"grid-row-end": journey.legs.length + 2,
+				"grid-row-end": rows + 2,
 
 			},
 		});
-		element_board.appendChild(el_destination_column);
+		element_board.appendChild(el_location_column);
+	}
 
+	let trip_offset = 0;
+
+	for (let display_trip of display_trips) {
+		console.log(display_trip);
 		let el_trip_left = EL("div", {
 			class: [ "trip-left" ],
 			style: {
-				"grid-column-start": (station_offset * 3) + 1,
-				"grid-column-end": (station_offset * 3) + 2,
-				"grid-row-start": (trip_offset) + 1,
-				"grid-row-end": (trip_offset) + 1,
+				"grid-column-start": grid_location_indexes[display_trip.origin]["name-start"],
+				"grid-column-end": grid_location_indexes[display_trip.origin]["column-start"],
+				"grid-row-start": trip_offset + 2,
+				"grid-row-end": trip_offset + 2,
 
 			},
 		});
-		el_trip_left.appendChild(document.createTextNode(new Date(leg.departure).toLocaleTimeString()));
+		el_trip_left.appendChild(document.createTextNode(new Date(display_trip.originStop.departure).toLocaleTimeString()));
 		el_trip_left.appendChild(EL("br", {}));
-		el_trip_left.appendChild(document.createTextNode("Gleis " + leg.departurePlatform));
+		el_trip_left.appendChild(document.createTextNode("Gleis " + display_trip.originStop.departurePlatform));
 		element_board.appendChild(el_trip_left);
 
 		let el_trip = EL("div", {
 			class: [ "trip" ],
 			style: {
-				"grid-column-start": (station_offset * 3) + 3,
-				"grid-column-end": (station_offset * 3) + 5,
-				"grid-row-start": (trip_offset) + 1,
-				"grid-row-end": (trip_offset) + 1,
+				"grid-column-start": grid_location_indexes[display_trip.origin]["column-end"],
+				"grid-column-end": grid_location_indexes[display_trip.destination]["column-start"],
+				"grid-row-start": trip_offset + 2,
+				"grid-row-end": trip_offset + 2,
 
 			},
 		});
-		el_trip.innerText = leg?.line?.name;
+		el_trip.innerText = display_trip.trip_data?.line?.name;
 
 		el_trip.addEventListener("click", event => {
-			console.log(leg.tripId);
-			displayTripDetails(leg.tripId);
+			console.log(display_trip.tripId);
+			displayTripDetails(display_trip.tripId);
 		});
 
 		element_board.appendChild(el_trip);
@@ -114,20 +135,19 @@ export function addJourneyToDraftingBoard(journey) {
 		let el_trip_right = EL("div", {
 			class: [ "trip-right" ],
 			style: {
-				"grid-column-start": (station_offset * 3) + 6,
-				"grid-column-end": (station_offset * 3) + 7,
-				"grid-row-start": (trip_offset) + 1,
-				"grid-row-end": (trip_offset) + 1,
+				"grid-column-start": grid_location_indexes[display_trip.destination]["column-end"],
+				"grid-column-end": grid_location_indexes[display_trip.destination]["name-end"],
+				"grid-row-start": trip_offset + 2,
+				"grid-row-end": trip_offset + 2,
 
 			},
 		});
-		el_trip_right.appendChild(document.createTextNode(new Date(leg.arrival).toLocaleTimeString()));
+		el_trip_right.appendChild(document.createTextNode(new Date(display_trip.destinationStop.arrival).toLocaleTimeString()));
 		el_trip_right.appendChild(EL("br", {}));
-		el_trip_right.appendChild(document.createTextNode("Gleis " + leg.arrivalPlatform));
+		el_trip_right.appendChild(document.createTextNode("Gleis " + display_trip.destinationStop.arrivalPlatform));
 
 		element_board.appendChild(el_trip_right);
 
-		station_offset += 1;
 		trip_offset += 1;
 	}
 }
@@ -179,5 +199,5 @@ export function trackedTripsLocationsSorted() {
 
 	console.log(sorted_locations.map(item => DataStore.locations.get()[item]?.name));
 
-
+	return sorted_locations;
 }
diff --git a/web/index.html b/web/index.html
index 1863cec..6fcf82e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -13,16 +13,7 @@
 		</div>
 
 		<div id="drafting-board">
-			<div id="drafting-board-content">
-				<div class="station-name" style="grid-column: 1 / 4; grid-row: 1;">Göttingen</div>
-				<div class="station-column" style="grid-column: 2 / 3; grid-row: 2 / 5;"></div>
-				<div class="station-name" style="grid-column: 4 / 7; grid-row: 1;">Fulda</div>
-				<div class="station-column" style="grid-column: 5 / 6; grid-row: 2 / 5;"></div>
-				<div class="trip-left" style="grid-column: 1 / 2; grid-row: 2;">16:45 Uhr<br/>Gleis 7</div>
-				<div class="trip" style="grid-column: 3 / 5; grid-row: 2;">ICE 1337</div>
-				<div class="trip-right" style="grid-column: 6 / 7; grid-row: 2;">18:05 Uhr</br>Gleis 3</div>
-
-			</div>
+			<div id="drafting-board-content"></div>
 		</div>
 
 		<div id="journeys-search" class="popup">
diff --git a/web/style.css b/web/style.css
index 05f57bf..e5415dc 100644
--- a/web/style.css
+++ b/web/style.css
@@ -81,7 +81,7 @@ input.form-control {
 	min-width: 1000px;
 	min-height: 300px;
 
-	grid-template-columns: repeat(auto-fit, minmax(30px, auto) 2px minmax(30px, auto));
+	grid-template-columns: repeat(auto-fit, minmax(200px, auto) 2px minmax(200px, auto));
 }
 
 #drafting-board div {
diff --git a/web/traveldrafter.js b/web/traveldrafter.js
index 5759f49..7f9e143 100644
--- a/web/traveldrafter.js
+++ b/web/traveldrafter.js
@@ -2,7 +2,7 @@ import * as Api from './api.js';
 import { setupPopups } from "./popup.js";
 import { setupLocationsSearch } from './locations-search.js';
 import { setupJourneysSearch, attachJourneysSearch } from './journeys-search.js';
-import { trackedTripsLocationsSorted } from './drafting-board.js';
+import { drawDraftingBoard } from './drafting-board.js';
 import { DataStore } from './datastore.js';
 
 window.Api = Api;
@@ -14,4 +14,4 @@ setupJourneysSearch();
 
 attachJourneysSearch(document.querySelector("#journeys-search-button"));
 
-trackedTripsLocationsSorted();
+drawDraftingBoard();