diff --git a/README.md b/README.md
index c31e68c..f2a267b 100644
--- a/README.md
+++ b/README.md
@@ -9,13 +9,13 @@ at https://simrail.tools. Currently implemented are:
 - A journey view showing live detailed information about a single journey (including future and past trains). Can
   currently only be accessed by selecting a train on the map and clicking on "Journey
   Details" (https://simrail.tools/journeys/<id\>)
+- Departure Boards, showing all departing trains at a point on a server (https://simrail.tools/departureboard)
 
 Planned features include:
 
 - A nicer home page
 - Journey search feature
 - Vehicle composition display (including images)
-- Departure Boards (preview available at https://departure-boards.sit-frontend.pages.dev/departureboard)
 
 If you want to request a feature feel free to [open an issue](https://github.com/simrailtools/frontend/issues/new) or
 contact me on Discord: `@derklaro`.
diff --git a/package.json b/package.json
index 7054b50..bbf412e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "@maplibre/maplibre-gl-style-spec": "^24.4.1",
     "@nats-io/nats-core": "^3.3.1",
     "@tanstack/react-devtools": "^0.9.5",
+    "@tanstack/react-form": "^1.28.3",
+    "@tanstack/react-form-devtools": "^0.2.16",
     "@tanstack/react-pacer": "^0.19.4",
     "@tanstack/react-pacer-devtools": "^0.5.2",
     "@tanstack/react-query": "^5.90.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8355083..28c3524 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,12 @@ importers:
       '@tanstack/react-devtools':
         specifier: ^0.9.5
         version: 0.9.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)
+      '@tanstack/react-form':
+        specifier: ^1.28.3
+        version: 1.28.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-form-devtools':
+        specifier: ^0.2.16
+        version: 0.2.16(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)
       '@tanstack/react-pacer':
         specifier: ^0.19.4
         version: 0.19.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -909,6 +915,27 @@ packages:
       vue:
         optional: true
 
+  '@tanstack/devtools-utils@0.3.0':
+    resolution: {integrity: sha512-JgApXVrgtgSLIPrm/QWHx0u6c9Ji0MNMDWhwujapj8eMzux5aOfi+2Ycwzj0A0qITXA12SEPYV3HC568mDtYmQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=17.0.0'
+      preact: '>=10.0.0'
+      react: '>=17.0.0'
+      solid-js: '>=1.9.7'
+      vue: '>=3.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      preact:
+        optional: true
+      react:
+        optional: true
+      solid-js:
+        optional: true
+      vue:
+        optional: true
+
   '@tanstack/devtools-vite@0.5.1':
     resolution: {integrity: sha512-5dXxMznSxx8NNpO9IbDC011sIdvTVvsoLaLAxm69dgDAX0+2OB8gdXrQp8dnzeNMvszKCgRxI2cgr/pjPgmnNw==}
     engines: {node: '>=18'}
@@ -921,6 +948,14 @@ packages:
     peerDependencies:
       solid-js: '>=1.9.7'
 
+  '@tanstack/form-core@1.28.3':
+    resolution: {integrity: sha512-DBhnu1d5VfACAYOAZJO8tsEUHjWczZMJY8v/YrtAJNWpwvL/3ogDuz8e6yUB2m/iVTNq6K8yrnVN2nrX0/BX/w==}
+
+  '@tanstack/form-devtools@0.2.16':
+    resolution: {integrity: sha512-jnCHyeP7Gy0NRGkjJSLQu7/IBpZBknf/5MV5+e24kMzoSs0x4LdhcwVVZwKszNFTBNFdXePPyhOXHand/r9Jkg==}
+    peerDependencies:
+      solid-js: '>=1.9.9'
+
   '@tanstack/history@1.154.14':
     resolution: {integrity: sha512-xyIfof8eHBuub1CkBnbKNKQXeRZC4dClhmzePHVOEel4G7lk/dW+TQ16da7CFdeNLv6u6Owf5VoBQxoo6DFTSA==}
     engines: {node: '>=12'}
@@ -931,6 +966,10 @@ packages:
     peerDependencies:
       '@tanstack/pacer': '>=0.16.4'
 
+  '@tanstack/pacer-lite@0.1.1':
+    resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
+    engines: {node: '>=18'}
+
   '@tanstack/pacer@0.18.0':
     resolution: {integrity: sha512-qhCRSFei0hokQr3xYcQXqxsRD/LKlgHCxHXtKHrQoImp4x2Zu6tUOpUGVH4y2qexIrzSu3aibQBNNfC3Eay6Mg==}
     engines: {node: '>=18'}
@@ -950,6 +989,20 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
+  '@tanstack/react-form-devtools@0.2.16':
+    resolution: {integrity: sha512-8zZZoi3XlIjEjDEr1LREmdTyKkYIGgBDgSqx4WVg/VLoqGw/j5mfXwjzbYhPNHd9eHzjmsweOJ9jzozbWKRh4g==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/react-form@1.28.3':
+    resolution: {integrity: sha512-84yd0swZRcyC3Q46dYBH6bHf1tlIY1flchbdG3VwArg/wLVW5RdBenIrJhleHjk2OxXuF+9HoKQbHglJyWIXQA==}
+    peerDependencies:
+      '@tanstack/react-start': '*'
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+
   '@tanstack/react-pacer-devtools@0.5.2':
     resolution: {integrity: sha512-VpZ64QCNIHOZFTTwQ6XyQbUYPNbOEw7+n5qK72uoqyaFlAMONKtRyE+hxuqup483bmHROou7mN/MLmfQxVSKfQ==}
     engines: {node: '>=18'}
@@ -2624,6 +2677,16 @@ snapshots:
     transitivePeerDependencies:
       - csstype
 
+  '@tanstack/devtools-utils@0.3.0(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)':
+    dependencies:
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.11)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+      solid-js: 1.9.11
+    transitivePeerDependencies:
+      - csstype
+
   '@tanstack/devtools-vite@0.5.1(vite@7.3.1(@types/node@22.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0))':
     dependencies:
       '@babel/core': 7.29.0
@@ -2658,6 +2721,28 @@ snapshots:
       - csstype
       - utf-8-validate
 
+  '@tanstack/form-core@1.28.3':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.0
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.8.1
+
+  '@tanstack/form-devtools@0.2.16(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)':
+    dependencies:
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.11)
+      '@tanstack/devtools-utils': 0.3.0(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)
+      '@tanstack/form-core': 1.28.3
+      clsx: 2.1.1
+      dayjs: 1.11.19
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.11
+    transitivePeerDependencies:
+      - '@types/react'
+      - csstype
+      - preact
+      - react
+      - vue
+
   '@tanstack/history@1.154.14': {}
 
   '@tanstack/pacer-devtools@1.1.2(@tanstack/pacer@0.18.0)(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)':
@@ -2677,6 +2762,8 @@ snapshots:
       - react
       - vue
 
+  '@tanstack/pacer-lite@0.1.1': {}
+
   '@tanstack/pacer@0.18.0':
     dependencies:
       '@tanstack/devtools-event-client': 0.4.0
@@ -2699,6 +2786,26 @@ snapshots:
       - solid-js
       - utf-8-validate
 
+  '@tanstack/react-form-devtools@0.2.16(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)':
+    dependencies:
+      '@tanstack/devtools-utils': 0.3.0(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)
+      '@tanstack/form-devtools': 0.2.16(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)
+      react: 19.2.4
+    transitivePeerDependencies:
+      - '@types/react'
+      - csstype
+      - preact
+      - solid-js
+      - vue
+
+  '@tanstack/react-form@1.28.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/form-core': 1.28.3
+      '@tanstack/react-store': 0.8.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+    transitivePeerDependencies:
+      - react-dom
+
   '@tanstack/react-pacer-devtools@0.5.2(@tanstack/pacer@0.18.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)':
     dependencies:
       '@tanstack/devtools-utils': 0.2.4(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.4)(solid-js@1.9.11)
diff --git a/src/api/rest/types.gen.ts b/src/api/rest/types.gen.ts
index 0a642ab..70612fa 100644
--- a/src/api/rest/types.gen.ts
+++ b/src/api/rest/types.gen.ts
@@ -314,9 +314,13 @@ export type JourneyStopPlaceDto = {
 
 export type JourneyTransportDto = {
     /**
-     * The external category of the transport
+     * The category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */
@@ -405,7 +409,7 @@ export type SimRailServerDto = {
     /**
      * The scenery (map part) that is available on the server
      */
-    scenery: 'FULL' | 'WARSAW_LODZ_PSARY' | 'WARSAW_LODZ_KRAKOW' | 'WARSAW_LODZ_KATOWICE' | 'WARSAW_KATOWICE_KRAKOW';
+    scenery: 'FULL' | 'WARSAW_LODZ_PSARY' | 'WARSAW_LODZ_KRAKOW' | 'WARSAW_LODZ_KATOWICE' | 'WARSAW_KATOWICE_KRAKOW' | 'KATOWICE_PSARY_KOZLOW';
     /**
      * The instant (ISO-8601) when the data of the server was last updated
      */
@@ -520,6 +524,10 @@ export type JourneyTransportSummaryDto = {
      * The external category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */
@@ -777,9 +785,13 @@ export type BoardStopInfoDto = {
 
 export type BoardTransportDto = {
     /**
-     * The external category of the transport
+     * The category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */
diff --git a/src/components/form/Button.tsx b/src/components/form/Button.tsx
new file mode 100644
index 0000000..1750c20
--- /dev/null
+++ b/src/components/form/Button.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const Button: FC<ComponentProps<"button">> = ({ children, className = "", ref, ...props }) => (
+  <button
+    ref={ref}
+    className={cn(
+      "inline-block bg-blue-500 text-white font-medium rounded-lg px-4 py-2 enabled:hover:bg-blue-600",
+      "focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+);
diff --git a/src/components/form/RangeInput.tsx b/src/components/form/RangeInput.tsx
new file mode 100644
index 0000000..32f00b6
--- /dev/null
+++ b/src/components/form/RangeInput.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const RangeInput: FC<Omit<ComponentProps<"input">, "type">> = ({ className, value, ref, ...props }) => (
+  <div className="flex items-center w-full space-x-4">
+    <input
+      ref={ref}
+      type={"range"}
+      className={cn(
+        "w-full h-2 bg-gray-200 rounded-lg accent-blue-400 appearance-none",
+        "focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+        className,
+      )}
+      value={value}
+      {...props}
+    />
+    <span className="w-12 text-right text-gray-700">{value}</span>
+  </div>
+);
diff --git a/src/components/form/SelectInput.tsx b/src/components/form/SelectInput.tsx
new file mode 100644
index 0000000..a2ed68e
--- /dev/null
+++ b/src/components/form/SelectInput.tsx
@@ -0,0 +1,34 @@
+import type { ComponentProps, FC, PropsWithChildren } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const SelectInput: FC<PropsWithChildren<ComponentProps<"select">>> = ({
+  children,
+  className = "",
+  ref,
+  ...props
+}) => (
+  <div className="relative w-full">
+    <select
+      ref={ref}
+      className={cn(
+        "block w-full appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8",
+        "text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent",
+        "hover:border-gray-400 transition",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+      <svg className="h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <title>Dropdown Arrow</title>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06-.02L10 10.674l3.71-3.486a.75.75 0 111.04 1.084l-4.24 3.99a.75.75 0 01-1.04 0l-4.24-3.99a.75.75 0 01-.02-1.06z"
+        />
+      </svg>
+    </div>
+  </div>
+);
diff --git a/src/components/form/ToggleInput.tsx b/src/components/form/ToggleInput.tsx
new file mode 100644
index 0000000..2b04b8a
--- /dev/null
+++ b/src/components/form/ToggleInput.tsx
@@ -0,0 +1,10 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const ToggleInput: FC<Omit<ComponentProps<"input">, "type">> = ({ className = "", ref, ...props }) => (
+  <label className={cn("relative inline-flex items-center cursor-pointer", className)}>
+    <input type="checkbox" className="sr-only peer" {...props} ref={ref} />
+    <div className="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer-checked:bg-blue-500 transition-all" />
+    <div className="absolute left-1 top-1 bg-white w-4 h-4 rounded-full peer-checked:translate-x-5 transition-transform" />
+  </label>
+);
diff --git a/src/index.css b/src/index.css
index 6935f1c..c92fd9d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,4 +4,14 @@
   --background-image-trains-snow: url("assets/background/background_snow.jpg");
   --background-image-trains-night: url("assets/background/background_night.jpg");
   --background-image-trains-normal: url("assets/background/background_normal.jpg");
+
+  --animate-marquee: marquee 30s infinite 2s linear;
+  @keyframes marquee {
+    0% {
+      transform: translate3d(0px, 0, 0);
+    }
+    100% {
+      transform: translate3d(calc(-50% + 0px), 0, 0);
+    }
+  }
 }
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index f001ffe..54d5bee 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from "./routes/__root"
 import { Route as IndexRouteImport } from "./routes/index"
 import { Route as MapIndexRouteImport } from "./routes/map/index"
+import { Route as DepartureboardIndexRouteImport } from "./routes/departureboard/index"
 import { Route as MapServerIdRouteImport } from "./routes/map/$serverId"
 import { Route as JourneysJourneyIdRouteImport } from "./routes/journeys/$journeyId"
 
@@ -24,6 +25,11 @@ const MapIndexRoute = MapIndexRouteImport.update({
   path: "/map/",
   getParentRoute: () => rootRouteImport,
 } as any)
+const DepartureboardIndexRoute = DepartureboardIndexRouteImport.update({
+  id: "/departureboard/",
+  path: "/departureboard/",
+  getParentRoute: () => rootRouteImport,
+} as any)
 const MapServerIdRoute = MapServerIdRouteImport.update({
   id: "/map/$serverId",
   path: "/map/$serverId",
@@ -39,12 +45,14 @@ export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
   "/journeys/$journeyId": typeof JourneysJourneyIdRoute
   "/map/$serverId": typeof MapServerIdRoute
+  "/departureboard/": typeof DepartureboardIndexRoute
   "/map/": typeof MapIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
   "/journeys/$journeyId": typeof JourneysJourneyIdRoute
   "/map/$serverId": typeof MapServerIdRoute
+  "/departureboard": typeof DepartureboardIndexRoute
   "/map": typeof MapIndexRoute
 }
 export interface FileRoutesById {
@@ -52,20 +60,38 @@ export interface FileRoutesById {
   "/": typeof IndexRoute
   "/journeys/$journeyId": typeof JourneysJourneyIdRoute
   "/map/$serverId": typeof MapServerIdRoute
+  "/departureboard/": typeof DepartureboardIndexRoute
   "/map/": typeof MapIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/" | "/journeys/$journeyId" | "/map/$serverId" | "/map/"
+  fullPaths:
+    | "/"
+    | "/journeys/$journeyId"
+    | "/map/$serverId"
+    | "/departureboard/"
+    | "/map/"
   fileRoutesByTo: FileRoutesByTo
-  to: "/" | "/journeys/$journeyId" | "/map/$serverId" | "/map"
-  id: "__root__" | "/" | "/journeys/$journeyId" | "/map/$serverId" | "/map/"
+  to:
+    | "/"
+    | "/journeys/$journeyId"
+    | "/map/$serverId"
+    | "/departureboard"
+    | "/map"
+  id:
+    | "__root__"
+    | "/"
+    | "/journeys/$journeyId"
+    | "/map/$serverId"
+    | "/departureboard/"
+    | "/map/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   JourneysJourneyIdRoute: typeof JourneysJourneyIdRoute
   MapServerIdRoute: typeof MapServerIdRoute
+  DepartureboardIndexRoute: typeof DepartureboardIndexRoute
   MapIndexRoute: typeof MapIndexRoute
 }
 
@@ -85,6 +111,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof MapIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    "/departureboard/": {
+      id: "/departureboard/"
+      path: "/departureboard"
+      fullPath: "/departureboard/"
+      preLoaderRoute: typeof DepartureboardIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     "/map/$serverId": {
       id: "/map/$serverId"
       path: "/map/$serverId"
@@ -106,6 +139,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   JourneysJourneyIdRoute: JourneysJourneyIdRoute,
   MapServerIdRoute: MapServerIdRoute,
+  DepartureboardIndexRoute: DepartureboardIndexRoute,
   MapIndexRoute: MapIndexRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 3322a64..c2f187c 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,4 +1,5 @@
 import { TanStackDevtools } from "@tanstack/react-devtools";
+import { FormDevtoolsPanel } from "@tanstack/react-form-devtools";
 import { PacerDevtoolsPanel } from "@tanstack/react-pacer-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
@@ -21,6 +22,7 @@ function Root() {
           position: "bottom-left",
         }}
         plugins={[
+          { name: "TanStack Form", render: <FormDevtoolsPanel /> },
           { name: "TanStack Pacer", render: <PacerDevtoolsPanel /> },
           { name: "TanStack Query", render: <ReactQueryDevtoolsPanel /> },
           { name: "TanStack Router", render: <TanStackRouterDevtoolsPanel /> },
diff --git a/src/routes/departureboard/-components/BoardDestinationInfo.tsx b/src/routes/departureboard/-components/BoardDestinationInfo.tsx
new file mode 100644
index 0000000..f84ca74
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardDestinationInfo.tsx
@@ -0,0 +1,51 @@
+import type { FC } from "react";
+import type { BoardViaEventDto } from "@/api/rest";
+import { cn } from "@/lib/utils.ts";
+
+type BoardDestinationInfoProps = {
+  currentPointName: string;
+  via: BoardViaEventDto[];
+};
+
+export const BoardDestinationInfo: FC<BoardDestinationInfoProps> = ({ currentPointName, via }) => {
+  const [pointName, diffType] = findDestination(via);
+  return (
+    <span
+      className={cn(
+        "text-5xl font-bold ml-2.5 overflow-hidden whitespace-nowrap",
+        diffType === "schedule" && "text-black",
+        diffType === "canceled" && "text-red-600",
+        diffType === "additional" && "text-green-600",
+      )}
+    >
+      {pointName ?? currentPointName}
+    </span>
+  );
+};
+
+/**
+ * Resolves the destination station from the given via array, also
+ * indicating if the destination is scheduled, canceled or additional.
+ * @param via the via events of the board entry to find the destination of.
+ */
+const findDestination = (via: BoardViaEventDto[]): [string | null, "schedule" | "additional" | "canceled"] => {
+  const viaWithPassengerChange = via.filter(entry => entry.passengerChange);
+  const relevantVia = viaWithPassengerChange.length ? viaWithPassengerChange : via;
+
+  const destination = relevantVia.slice(-1)[0];
+  const firstCancelledViaIndex = relevantVia.findIndex(entry => entry.cancelled);
+  if (firstCancelledViaIndex === -1) {
+    // no canceled event, destination is equal to schedule
+    const diffType = destination.additional ? "additional" : "schedule";
+    return [destination.pointName, diffType];
+  }
+
+  if (firstCancelledViaIndex === 0) {
+    // the first event is canceled, actual train destination is unknown
+    return [destination.pointName, "canceled"];
+  }
+
+  // train ends at the first non-canceled via point
+  const actualDestination = relevantVia[firstCancelledViaIndex - 1];
+  return [actualDestination.pointName, "canceled"];
+};
diff --git a/src/routes/departureboard/-components/BoardEntry.tsx b/src/routes/departureboard/-components/BoardEntry.tsx
new file mode 100644
index 0000000..d17efa0
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardEntry.tsx
@@ -0,0 +1,32 @@
+import type { FC } from "react";
+import type { BoardEntryDto, PointInfoDto } from "@/api/rest";
+import { BoardDestinationInfo } from "@/routes/departureboard/-components/BoardDestinationInfo.tsx";
+import { BoardPlatformInfo } from "@/routes/departureboard/-components/BoardPlatformInfo.tsx";
+import { BoardTimeInfo } from "@/routes/departureboard/-components/BoardTimeInfo.tsx";
+import { BoardTrainInfo } from "@/routes/departureboard/-components/BoardTrainInfo.tsx";
+import { BoardViaInfo } from "@/routes/departureboard/-components/BoardViaInfo.tsx";
+
+type BoardEntryProps = {
+  isFreight: boolean;
+  entry: BoardEntryDto;
+  currentPoint: PointInfoDto;
+};
+
+export const BoardEntry: FC<BoardEntryProps> = ({ isFreight, entry, currentPoint }) => (
+  <li className={"even:bg-gray-100 overflow-hidden"}>
+    <div className={"p-4"}>
+      <div className={"flex flex-col w-full"}>
+        <div className={"flex flex-row"}>
+          <BoardTimeInfo time={entry.scheduledTime} />
+          <BoardTrainInfo isFreight={isFreight} isEventCancelled={entry.cancelled} transport={entry.transport} />
+          <BoardDestinationInfo currentPointName={currentPoint.name} via={entry.via} />
+          <BoardPlatformInfo scheduledStop={entry.scheduledPassengerStop} realtimeStop={entry.realtimePassengerStop} />
+        </div>
+        <div className={"flex flex-row items-center mt-1"}>
+          <BoardTimeInfo time={entry.realtimeTime} scheduledTime={entry.scheduledTime} />
+          <BoardViaInfo via={entry.via} />
+        </div>
+      </div>
+    </div>
+  </li>
+);
diff --git a/src/routes/departureboard/-components/BoardEntryTable.tsx b/src/routes/departureboard/-components/BoardEntryTable.tsx
new file mode 100644
index 0000000..ba853a7
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardEntryTable.tsx
@@ -0,0 +1,96 @@
+import { useQuery } from "@tanstack/react-query";
+import { DateTime } from "luxon";
+import type { FC } from "react";
+import { type BoardEntryDto, listBoardDepartures, type PointInfoDto, type SimRailServerDto } from "@/api/rest";
+import { Throbber } from "@/components/Throbber.tsx";
+import { BoardEntry } from "@/routes/departureboard/-components/BoardEntry.tsx";
+import { BoardTableHeading } from "@/routes/departureboard/-components/BoardTableHeading.tsx";
+
+type BoardEntryTableProps = {
+  server: SimRailServerDto;
+  point: PointInfoDto;
+  timeSpan: number;
+  onlyPassengerTrains: boolean;
+  sortOrder: "schedule" | "realtime";
+};
+
+export const BoardEntryTable: FC<BoardEntryTableProps> = ({
+  server,
+  point,
+  timeSpan,
+  onlyPassengerTrains,
+  sortOrder,
+}) => {
+  const { data: boardEntries, isLoading } = useQuery({
+    queryFn: async ({ signal }) => {
+      const [timeStart, timeEnd] = getBoardFetchTimeRange(server, timeSpan);
+      return await listBoardDepartures({
+        query: {
+          serverId: server.id,
+          pointId: point.id,
+          timeStart,
+          timeEnd,
+          sortBy: sortOrder === "schedule" ? "SCHEDULED_TIME" : "REALTIME_TIME",
+        },
+        signal,
+        throwOnError: true,
+      });
+    },
+    queryKey: [],
+    refetchInterval: 15_000,
+  });
+  if (isLoading) {
+    return <Throbber />;
+  }
+  if (boardEntries === undefined) {
+    throw new Error("Unable to load board entries");
+  }
+
+  return (
+    <div className={"w-full max-w-full"}>
+      <BoardTableHeading />
+      <ul>
+        {boardEntries
+          .filter(entry => entry.realtimeTimeType !== "REAL")
+          .map(entry => {
+            const isFreight = isFreightTrain(entry);
+            return { entry, isFreight };
+          })
+          .filter(train => !onlyPassengerTrains || !train.isFreight)
+          .map(train => (
+            <BoardEntry key={train.entry.journeyId} {...train} currentPoint={point} />
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+/**
+ * Checks if the given board entry is a freight train.
+ * @param entry the entry to check.
+ */
+const isFreightTrain = (entry: BoardEntryDto) => {
+  const transportType = entry.transport.type;
+  return (
+    transportType === "MANEUVER_TRAIN" ||
+    transportType === "EMPTY_TRANSFER_TRAIN" ||
+    transportType === "INTER_NATIONAL_CARGO_TRAIN" ||
+    transportType === "NATIONAL_CARGO_TRAIN" ||
+    transportType === "MAINTENANCE_TRAIN"
+  );
+};
+
+/**
+ * Gets the time range (start and end time) for the board fetch request.
+ * @param server the server to request the board of.
+ * @param timeSpan the time span (in minutes) that should be requested.
+ */
+const getBoardFetchTimeRange = (server: SimRailServerDto, timeSpan: number): [string, string] => {
+  const currentServerTime = DateTime.utc().plus({ hours: server.utcOffsetHours });
+  const timeStart = currentServerTime.minus({ minutes: 5 });
+  const timeEnd = currentServerTime.plus({ minutes: timeSpan });
+  return [
+    timeStart.toISO({ includeOffset: false, precision: "minutes" }),
+    timeEnd.toISO({ includeOffset: false, precision: "minutes" }),
+  ];
+};
diff --git a/src/routes/departureboard/-components/BoardHeader.tsx b/src/routes/departureboard/-components/BoardHeader.tsx
new file mode 100644
index 0000000..bdc60e6
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardHeader.tsx
@@ -0,0 +1,36 @@
+import { DateTime } from "luxon";
+import { type FC, useEffect, useState } from "react";
+import type { PointInfoDto, SimRailServerDto } from "@/api/rest";
+import { cn } from "@/lib/utils.ts";
+
+type BoardHeaderProps = {
+  point: PointInfoDto;
+  server: SimRailServerDto;
+};
+
+export const BoardHeader: FC<BoardHeaderProps> = ({ point, server }) => {
+  const [serverTime, setServerTime] = useState(DateTime.utc());
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      const serverTime = DateTime.utc().plus({ hours: server.utcOffsetHours });
+      setServerTime(serverTime);
+    }, 1000);
+    return () => window.clearInterval(intervalId);
+  }, [server]);
+
+  return (
+    <header className={"bg-gray-900 text-white flex items-center justify-between px-6 py-8"}>
+      <div className={"flex items-baseline space-x-6"}>
+        <div className={"text-5xl font-bold"}>
+          <span>{serverTime.toFormat("HH")}</span>
+          <span className={cn(serverTime.second % 2 === 0 && "text-transparent")}>:</span>
+          <span>{serverTime.toFormat("mm")}</span>
+        </div>
+        <span className={"text-5xl font-bold"}>Departures</span>
+      </div>
+      <span className={"text-5xl font-medium whitespace-nowrap"}>
+        {server.code.toUpperCase()} / {point.name}
+      </span>
+    </header>
+  );
+};
diff --git a/src/routes/departureboard/-components/BoardPlatformInfo.tsx b/src/routes/departureboard/-components/BoardPlatformInfo.tsx
new file mode 100644
index 0000000..b3df240
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardPlatformInfo.tsx
@@ -0,0 +1,34 @@
+import type { FC } from "react";
+import type { BoardStopInfoDto } from "@/api/rest";
+
+type BoardPlatformInfoProps = {
+  scheduledStop?: BoardStopInfoDto;
+  realtimeStop?: BoardStopInfoDto;
+};
+
+export const BoardPlatformInfo: FC<BoardPlatformInfoProps> = ({ scheduledStop, realtimeStop }) => {
+  const scheduledPlatformInfo = scheduledStop && formatPlatformInfo(scheduledStop);
+  const realtimePlatformInfo = realtimeStop && formatPlatformInfo(realtimeStop);
+  if (!scheduledPlatformInfo) {
+    // no stop is scheduled for the train
+    return null;
+  }
+
+  if (!realtimePlatformInfo || scheduledPlatformInfo === realtimePlatformInfo) {
+    // no realtime info is known or train stops at the scheduled platform
+    return (
+      <span className={"text-3xl font-bold text-black pl-2 ml-auto whitespace-nowrap"}>{scheduledPlatformInfo}</span>
+    );
+  }
+
+  // train stops at a platform that differs from schedule
+  return (
+    <span className={"text-3xl font-bold text-red-600 pl-2 ml-auto whitespace-nowrap"}>{realtimePlatformInfo}</span>
+  );
+};
+
+/**
+ * Formats the given platform info into a human-readable string.
+ * @param platformInfo the platform info to format.
+ */
+const formatPlatformInfo = (platformInfo: BoardStopInfoDto) => `P: ${platformInfo.platform} T: ${platformInfo.track}`;
diff --git a/src/routes/departureboard/-components/BoardSelectForm.tsx b/src/routes/departureboard/-components/BoardSelectForm.tsx
new file mode 100644
index 0000000..53b0f6c
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardSelectForm.tsx
@@ -0,0 +1,234 @@
+import { useForm, useStore } from "@tanstack/react-form";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { type FC, useEffect, useState } from "react";
+import type { PointInfoDto, SimRailServerDto } from "@/api/rest";
+import { findPointByNameOptions, listServersOptions } from "@/api/rest/@tanstack/react-query.gen.ts";
+import { Button } from "@/components/form/Button.tsx";
+import { RangeInput } from "@/components/form/RangeInput.tsx";
+import { SelectInput } from "@/components/form/SelectInput.tsx";
+import { ToggleInput } from "@/components/form/ToggleInput.tsx";
+import { Heading } from "@/components/Heading.tsx";
+import { Throbber } from "@/components/Throbber.tsx";
+import { cn } from "@/lib/utils.ts";
+
+type BoardSelectFormProps = {
+  timeSpan: number;
+  onlyPassengerTrains: boolean;
+  sortOrder: "schedule" | "realtime";
+};
+
+type BoardSelectFormFields = {
+  point?: PointInfoDto;
+  server?: SimRailServerDto;
+  timeSpan: number;
+  onlyPassengerTrains: boolean;
+  sortOrder: "schedule" | "realtime";
+};
+
+export const BoardSelectForm: FC<BoardSelectFormProps> = ({ timeSpan, onlyPassengerTrains, sortOrder }) => {
+  const navigate = useNavigate();
+  const form = useForm({
+    formId: "board_select_form",
+    defaultValues: {
+      timeSpan,
+      sortOrder,
+      onlyPassengerTrains,
+    } as BoardSelectFormFields,
+    onSubmit: async ({ value }) =>
+      navigate({
+        to: "/departureboard",
+        search: {
+          serverId: value.server?.id,
+          pointId: value.point?.id,
+          onlyPassengerTrains: value.onlyPassengerTrains,
+          timeSpan: value.timeSpan,
+          sortOrder: value.sortOrder,
+        },
+      }),
+  });
+
+  const selectedPoint = useStore(form.store, state => state.values.point);
+  const [pointInputValue, setPointInputValue] = useState("");
+  const [pointSearchTerm, setPointSearchTerm] = useState(pointInputValue);
+  const [showPointSuggestions, setShowPointSuggestions] = useState(false);
+  useEffect(() => {
+    if (selectedPoint) {
+      setShowPointSuggestions(false);
+      setPointInputValue(selectedPoint.name);
+    }
+  }, [selectedPoint]);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setPointSearchTerm(pointInputValue), 500);
+    return () => clearTimeout(timeoutId);
+  }, [pointInputValue]);
+
+  const { data: pointSuggestions = [] } = useQuery({
+    ...findPointByNameOptions({ path: { searchQuery: pointSearchTerm }, query: { limit: 10 } }),
+    placeholderData: prev => prev,
+    enabled: showPointSuggestions && pointSearchTerm.length >= 3,
+  });
+  const { data: servers, isLoading: isServersLoading } = useQuery({
+    ...listServersOptions({ query: { includeOffline: true } }),
+  });
+
+  if (isServersLoading) {
+    return <Throbber />;
+  }
+  if (!servers) {
+    throw new Error("Unable to load server list from backend");
+  }
+
+  return (
+    <div className={"flex items-center justify-center min-h-screen"}>
+      <div className={"bg-white p-8 rounded-lg shadow-lg w-full max-w-md"}>
+        <Heading level={1} className={"flex justify-center whitespace-nowrap"}>
+          Board Select
+        </Heading>
+        <form
+          onSubmit={event => {
+            event.preventDefault();
+            event.stopPropagation();
+            form.handleSubmit().catch();
+          }}
+        >
+          <div className={"flex flex-col space-y-4 mt-6"}>
+            <form.Field
+              name={"server"}
+              validators={{ onChange: ({ value }) => (!value ? "A server must be selected" : undefined) }}
+            >
+              {field => (
+                <div>
+                  <label htmlFor={field.name} className={"text-black font-medium tracking-tighter"}>
+                    Server:
+                  </label>
+                  <SelectInput
+                    id={field.name}
+                    name={field.name}
+                    onBlur={field.handleBlur}
+                    value={field.state.value?.id ?? ""}
+                    onChange={event => field.handleChange(servers.find(server => server.id === event.target.value))}
+                    className={cn(field.state.meta.errors.length && "outline outline-red-600 disabled:text-white")}
+                  >
+                    <option value={""} disabled={true}>
+                      Select Server...
+                    </option>
+                    {servers
+                      .sort((left, right) => left.code.localeCompare(right.code))
+                      .map(server => (
+                        <option key={server.id} value={server.id}>
+                          {server.code}
+                        </option>
+                      ))}
+                  </SelectInput>
+                </div>
+              )}
+            </form.Field>
+            <form.Field
+              name={"point"}
+              validators={{ onChange: ({ value }) => (!value ? "A point must be selected" : undefined) }}
+            >
+              {field => (
+                <div className={"relative"}>
+                  <label htmlFor={field.name} className={"text-black font-medium tracking-tighter"}>
+                    Point:
+                  </label>
+                  <input
+                    type="text"
+                    autoComplete={"off"}
+                    inputMode={"search"}
+                    className={cn(
+                      "block w-full appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 placeholder:text-gray-800",
+                      "text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent hover:border-gray-400 transition",
+                      field.state.meta.errors.length && "outline outline-red-600",
+                    )}
+                    placeholder="Search Points..."
+                    value={pointInputValue}
+                    onBlur={field.handleBlur}
+                    onChange={event => {
+                      setShowPointSuggestions(true);
+                      setPointInputValue(event.target.value);
+                      field.setValue(undefined);
+                    }}
+                  />
+                  {showPointSuggestions && pointSuggestions.length > 0 && (
+                    <ul className="absolute left-0 right-0 mt-1 bg-white border border-gray-200 rounded shadow max-h-60 overflow-auto z-10">
+                      {pointSuggestions.map(item => (
+                        <li
+                          key={item.id}
+                          className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                          onMouseDown={() => field.setValue(item)}
+                        >
+                          {item.name}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              )}
+            </form.Field>
+            <form.Field name={"timeSpan"}>
+              {field => (
+                <div>
+                  <label htmlFor={field.name} className={"text-black font-medium tracking-tighter"}>
+                    Lookahead (in Minutes):
+                  </label>
+                  <RangeInput
+                    id={field.name}
+                    min={15}
+                    max={180}
+                    step={15}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={event => field.handleChange(event.target.valueAsNumber)}
+                  />
+                </div>
+              )}
+            </form.Field>
+            <form.Field name={"onlyPassengerTrains"}>
+              {field => (
+                <div className={"flex items-center space-x-4"}>
+                  <label htmlFor={field.name} className={"text-black font-medium tracking-tighter"}>
+                    Only Display Passenger Trains:
+                  </label>
+                  <ToggleInput
+                    id={field.name}
+                    checked={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={event => field.handleChange(event.target.checked)}
+                  />
+                </div>
+              )}
+            </form.Field>
+            <form.Field name={"sortOrder"}>
+              {field => (
+                <div className={"flex items-center space-x-4"}>
+                  <label htmlFor={field.name} className={"text-black font-medium tracking-tighter"}>
+                    Sort By Best Known Time Info:
+                  </label>
+                  <ToggleInput
+                    id={field.name}
+                    checked={field.state.value === "realtime"}
+                    onBlur={field.handleBlur}
+                    onChange={event => field.handleChange(event.target.checked ? "realtime" : "schedule")}
+                  />
+                </div>
+              )}
+            </form.Field>
+            <form.Subscribe selector={state => [state.canSubmit, state.isSubmitting]}>
+              {([canSubmit, isSubmitting]) => (
+                <Button
+                  type={"submit"}
+                  disabled={!canSubmit}
+                  className={"mt-2 cursor-pointer disabled:cursor-not-allowed"}
+                >
+                  {isSubmitting ? "..." : "Display Board"}
+                </Button>
+              )}
+            </form.Subscribe>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/src/routes/departureboard/-components/BoardTableHeading.tsx b/src/routes/departureboard/-components/BoardTableHeading.tsx
new file mode 100644
index 0000000..e3b7f2f
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardTableHeading.tsx
@@ -0,0 +1,10 @@
+import type { FC } from "react";
+
+export const BoardTableHeading: FC = () => (
+  <div className={"flex pt-2 px-2 font-semibold text-gray-600"}>
+    <div className={"ml-3"}>Time</div>
+    <div className={"ml-24"}>Train</div>
+    <div className={"ml-66"}>Destination</div>
+    <div className={"ml-auto"}>Platform / Track</div>
+  </div>
+);
diff --git a/src/routes/departureboard/-components/BoardTimeInfo.tsx b/src/routes/departureboard/-components/BoardTimeInfo.tsx
new file mode 100644
index 0000000..c3c94af
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardTimeInfo.tsx
@@ -0,0 +1,40 @@
+import type { ClassValue } from "clsx";
+import { DateTime } from "luxon";
+import type { FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+type BoardTimeInfoProps = {
+  time: string;
+  scheduledTime?: string;
+};
+
+export const BoardTimeInfo: FC<BoardTimeInfoProps> = ({ time, scheduledTime }) => {
+  const dtTime = DateTime.fromISO(time);
+  const dtScheduled = scheduledTime ? DateTime.fromISO(scheduledTime) : undefined;
+  const timeColorClass = getTimeColorClass(dtTime, dtScheduled);
+  return (
+    <span className={cn("text-5xl font-bold", scheduledTime && "font-semibold", timeColorClass)}>
+      {dtTime.toFormat("HH:mm")}
+    </span>
+  );
+};
+
+/**
+ * Resolves the color to use for the given time information.
+ * @param time the time to get the color for.
+ * @param scheduledTime an optional scheduled time to compare against for color picking.
+ */
+const getTimeColorClass = (time: DateTime, scheduledTime?: DateTime): ClassValue => {
+  if (!scheduledTime) {
+    // if no realtime information is available, print the time black
+    return "text-black";
+  }
+
+  if (time > scheduledTime) {
+    // train is delayed
+    return "text-red-600";
+  }
+
+  // train is on time or early
+  return "text-green-600";
+};
diff --git a/src/routes/departureboard/-components/BoardTrainInfo.tsx b/src/routes/departureboard/-components/BoardTrainInfo.tsx
new file mode 100644
index 0000000..e480660
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardTrainInfo.tsx
@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import type { BoardTransportDto } from "@/api/rest";
+import { cn } from "@/lib/utils.ts";
+
+type BoardTrainInfoProps = {
+  isFreight: boolean;
+  isEventCancelled: boolean;
+  transport: BoardTransportDto;
+};
+
+export const BoardTrainInfo: FC<BoardTrainInfoProps> = ({ isFreight, isEventCancelled, transport }) => {
+  const formattedName = formatTrainName(transport);
+  return (
+    <div
+      className={cn(
+        "min-w-72 max-w-72 text-center rounded-lg py-1 px-2 ml-2.5 text-white text-4xl font-medium",
+        "bg-gray-700",
+        isFreight && "bg-gray-500",
+        isEventCancelled && "bg-transparent text-gray-600 border-2",
+      )}
+    >
+      <span
+        className={cn("inline-block max-w-full whitespace-nowrap overflow-hidden", isEventCancelled && "line-through")}
+      >
+        {formattedName}
+      </span>
+    </div>
+  );
+};
+
+/**
+ * Formats the train name to display based on the given transport.
+ * @param transport the transport to format.
+ */
+const formatTrainName = (transport: BoardTransportDto): string => {
+  if (transport.line) {
+    // include line if given, e.g. 'RPJ S41 (40199)'
+    return `${transport.category} ${transport.line} (${transport.number})`;
+  }
+
+  // only display category and number, e.g. 'ECE 54001'
+  return `${transport.category} ${transport.number}`;
+};
diff --git a/src/routes/departureboard/-components/BoardViaInfo.tsx b/src/routes/departureboard/-components/BoardViaInfo.tsx
new file mode 100644
index 0000000..2860f08
--- /dev/null
+++ b/src/routes/departureboard/-components/BoardViaInfo.tsx
@@ -0,0 +1,85 @@
+import { type FC, Fragment, type JSX, useEffect, useMemo, useRef, useState } from "react";
+import type { BoardViaEventDto } from "@/api/rest";
+import { cn } from "@/lib/utils.ts";
+
+type BoardViaInfoProps = {
+  via: BoardViaEventDto[];
+};
+
+export const BoardViaInfo: FC<BoardViaInfoProps> = ({ via }) => {
+  const viaPoints = useMemo(() => createViaElements(via), [via]);
+
+  // handling of overflow on the screen
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animatedDivRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    const animated = animatedDivRef.current;
+    if (!container || !animated) {
+      return;
+    }
+
+    const recalc = () => {
+      // update the overflow state
+      const isOverflowing = animated.scrollWidth > container.clientWidth + 1;
+      setIsOverflowing(isOverflowing);
+
+      // update the animation duration
+      if (isOverflowing) {
+        const textWidth = animated.scrollWidth;
+        const containerWidth = container.getBoundingClientRect().width;
+        const duration = (textWidth + containerWidth) / 75; // 75px/s
+        animated.style.animationDuration = `${duration.toFixed(0)}s`;
+      } else {
+        animated.style.animationDuration = "";
+      }
+    };
+    recalc(); // initial recalculation
+
+    // resize observer to trigger recalculation for future layout changes
+    const resizeObserver = new ResizeObserver(recalc);
+    resizeObserver.observe(container);
+    resizeObserver.observe(animated);
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className={"ml-7 pt-2 overflow-hidden h-max text-start w-3/4"}>
+      <div
+        ref={animatedDivRef}
+        className={cn(
+          "inline-block whitespace-nowrap text-2xl text-black tracking-tight",
+          isOverflowing && "animate-marquee",
+        )}
+      >
+        <span className={"mt-4"}>{...viaPoints}</span>
+        {/** biome-ignore lint/nursery/noLeakedRender: biomejs/biome#8664 */}
+        {isOverflowing && <span> +++&nbsp;</span>}
+        {/** biome-ignore lint/nursery/noLeakedRender: biomejs/biome#8664 */}
+        {isOverflowing && <span className={"mt-4"}>{...viaPoints} +++&nbsp;</span>}
+        {/** biome-ignore lint/nursery/noLeakedRender: biomejs/biome#8664 */}
+        {isOverflowing && <span className={"mt-4"}>{...viaPoints} +++&nbsp;</span>}
+        {/** biome-ignore lint/nursery/noLeakedRender: biomejs/biome#8664 */}
+        {isOverflowing && <span className={"mt-4"}>{...viaPoints} +++&nbsp;</span>}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Creates an element array for the via stops to display.
+ * @param via all via stops for the board entry.
+ */
+const createViaElements = (via: BoardViaEventDto[]): JSX.Element[] => {
+  const viaWithPassengerChange = via.filter(entry => entry.passengerChange);
+  const relevantVia = viaWithPassengerChange.length ? viaWithPassengerChange : via;
+
+  const maxIndex = relevantVia.length - 2;
+  return relevantVia.slice(0, -1).map((entry, index) => (
+    <Fragment key={entry.pointId}>
+      <span className={cn(entry.cancelled && "line-through")}>{entry.pointName}</span>
+      {index < maxIndex && ", "}
+    </Fragment>
+  ));
+};
diff --git a/src/routes/departureboard/index.tsx b/src/routes/departureboard/index.tsx
new file mode 100644
index 0000000..558d00f
--- /dev/null
+++ b/src/routes/departureboard/index.tsx
@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { findPointByIdOptions, findServerByIdOptions } from "@/api/rest/@tanstack/react-query.gen.ts";
+import { BackgroundImage } from "@/components/BackgroundImage.tsx";
+import { BoardEntryTable } from "@/routes/departureboard/-components/BoardEntryTable.tsx";
+import { BoardHeader } from "@/routes/departureboard/-components/BoardHeader.tsx";
+import { BoardSelectForm } from "@/routes/departureboard/-components/BoardSelectForm.tsx";
+
+export const Route = createFileRoute("/departureboard/")({
+  validateSearch: z.object({
+    serverId: z.uuid({ version: "v5" }).optional().catch(undefined),
+    pointId: z.uuidv4().optional().catch(undefined),
+    onlyPassengerTrains: z.boolean().catch(false),
+    timeSpan: z.number().gte(15).lte(180).catch(60),
+    sortOrder: z.enum(["schedule", "realtime"]).catch("realtime"),
+  }),
+  loaderDeps: ({ search: { serverId, pointId } }) => ({ serverId, pointId }),
+  loader: async ({ context: { queryClient }, deps: { serverId, pointId } }) => {
+    if (serverId && pointId) {
+      const server = await queryClient.ensureQueryData(findServerByIdOptions({ path: { id: serverId } }));
+      if (!server) {
+        throw new Error("The server of the requested board does not exist");
+      }
+
+      const point = await queryClient.ensureQueryData(findPointByIdOptions({ path: { id: pointId } }));
+      if (!point) {
+        throw new Error("The requested point does not exist");
+      }
+
+      return { server, point };
+    }
+  },
+  component: BoardComponent,
+});
+
+function BoardComponent() {
+  const loaderData = Route.useLoaderData();
+  const searchParameters = Route.useSearch();
+  if (loaderData) {
+    return (
+      <>
+        <BoardHeader {...loaderData} />
+        <BoardEntryTable {...loaderData} {...searchParameters} />
+      </>
+    );
+  }
+
+  return (
+    <BackgroundImage>
+      <BoardSelectForm {...searchParameters} />
+    </BackgroundImage>
+  );
+}
diff --git a/src/routes/map/$serverId.tsx b/src/routes/map/$serverId.tsx
index b8c7d45..37b13fe 100644
--- a/src/routes/map/$serverId.tsx
+++ b/src/routes/map/$serverId.tsx
@@ -1,7 +1,7 @@
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./map.css";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, type SearchSchemaInput } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { type FC, useEffect, useMemo } from "react";
 import { AttributionControl, Layer, Map as MapLibreMap, Source } from "react-map-gl/maplibre";
 import { z } from "zod";
@@ -34,12 +34,9 @@ import {
 import { SelectedJourneyProvider, useSelectedJourney } from "../../hooks/useSelectedJourney.tsx";
 
 export const Route = createFileRoute("/map/$serverId")({
-  validateSearch: (input: { selectedJourneyId?: string } & SearchSchemaInput) =>
-    z
-      .object({
-        selectedJourneyId: z.uuid({ version: "v5" }).optional().catch(undefined),
-      })
-      .parse(input),
+  validateSearch: z.object({
+    selectedJourneyId: z.uuid({ version: "v5" }).optional().catch(undefined),
+  }),
   loader: async ({ context: { queryClient }, params: { serverId } }) => {
     const getServer = () => {
       const isServerUniqueId = z.uuid({ version: "v5" }).safeParse(serverId).success;