diff --git a/lang/de.json b/lang/de.json
index 94d156972..6b0201d6b 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -1429,5 +1429,15 @@
     "validation.attributes.price": "Preis",
     "validation.attributes.role": "Rolle",
     "validation.attributes.subject": "Thema",
-    "validation.attributes.terms": "Bedingungen"
+    "validation.attributes.terms": "Bedingungen",
+    "filter.title": "Filter",
+    "filter.reset": "Zurücksetzen",
+    "filter.period": "Zeitraum",
+    "filter.travel-type": "Verkehrsmittel",
+    "filter.travel-purpose": "Reisezweck",
+    "route-map.title": "Streckenkarte",
+    "route-map.description": "Alle Strecken, die du mindestens einmal befahren hast.",
+    "route-map.approximated.hint": "Abschnitte ohne hinterlegten Streckenverlauf werden als Luftlinie zwischen beiden Stationen gezeichnet.",
+    "route-map.include-approximated": "Geschätzte Abschnitte anzeigen",
+    "route-map.empty": "Zu diesen Filtern gibt es keine Fahrten."
 }
diff --git a/lang/en.json b/lang/en.json
index 8593b005a..99ecc2de3 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -1426,5 +1426,15 @@
   "stats.to": "To",
   "stats.today": "today",
   "beta.banner.text": "You are viewing a new design that is still under development. You may encounter occasional errors. You can disable experimental features in your",
-  "beta.banner.settings": "settings."
+  "beta.banner.settings": "settings.",
+  "filter.title": "Filter",
+  "filter.reset": "Reset",
+  "filter.period": "Period",
+  "filter.travel-type": "Mode of transport",
+  "filter.travel-purpose": "Purpose of travel",
+  "route-map.title": "Route map",
+  "route-map.description": "Every stretch you have travelled at least once.",
+  "route-map.approximated.hint": "Stretches without a stored route are drawn as a straight line between both stations.",
+  "route-map.include-approximated": "Show estimated stretches",
+  "route-map.empty": "No journeys match these filters."
 }
diff --git a/lang/fr.json b/lang/fr.json
index 17e805bdd..884964be0 100644
--- a/lang/fr.json
+++ b/lang/fr.json
@@ -1428,5 +1428,15 @@
     "your-access-token": "Tes jetons d'accès",
     "your-access-token-description": "Tu peux générer un jeton d'accès pour accéder à ton propre compte.",
     "your-access-token.ask": "Chez Träwelling, nous ne te demanderons jamais ton jeton d'accès. Si on te le demande, il s'agit probablement d'une usurpation d'identité.",
-    "your-apps": "Tes applications"
+    "your-apps": "Tes applications",
+    "filter.title": "Filtres",
+    "filter.reset": "Réinitialiser",
+    "filter.period": "Période",
+    "filter.travel-type": "Moyen de transport",
+    "filter.travel-purpose": "Motif du voyage",
+    "route-map.title": "Carte du réseau",
+    "route-map.description": "Tous les tronçons que tu as parcourus au moins une fois.",
+    "route-map.approximated.hint": "Les tronçons sans itinéraire enregistré sont tracés en ligne droite entre les deux gares.",
+    "route-map.include-approximated": "Afficher les tronçons estimés",
+    "route-map.empty": "Aucun trajet ne correspond à ces filtres."
 }
diff --git a/resources/tailwind-app/helpers/polyline.ts b/resources/tailwind-app/helpers/polyline.ts
new file mode 100644
index 000000000..0cf46ded4
--- /dev/null
+++ b/resources/tailwind-app/helpers/polyline.ts
@@ -0,0 +1,32 @@
+/**
+ * Decodes a Google Encoded Polyline into GeoJSON coordinate pairs.
+ */
+export function decodePolyline(encoded: string, precision = 5): [number, number][] {
+    const factor = 10 ** precision;
+    const coordinates: [number, number][] = [];
+    let index = 0;
+    let latitude = 0;
+    let longitude = 0;
+
+    const nextDelta = (): number => {
+        let result = 0;
+        let shift = 0;
+        let byte: number;
+
+        do {
+            byte = encoded.charCodeAt(index++) - 63;
+            result |= (byte & 0x1f) << shift;
+            shift += 5;
+        } while (byte >= 0x20);
+
+        return result & 1 ? ~(result >> 1) : result >> 1;
+    };
+
+    while (index < encoded.length) {
+        latitude += nextDelta();
+        longitude += nextDelta();
+        coordinates.push([longitude / factor, latitude / factor]);
+    }
+
+    return coordinates;
+}
diff --git a/resources/tailwind-app/layouts/AppLayout.vue b/resources/tailwind-app/layouts/AppLayout.vue
index 74f44728b..8b236c028 100644
--- a/resources/tailwind-app/layouts/AppLayout.vue
+++ b/resources/tailwind-app/layouts/AppLayout.vue
@@ -226,6 +226,7 @@ import {
     ShieldCogCorner,
     Ticket,
     User,
+    Waypoints,
     X,
 } from '@lucide/vue';
 import { trans } from 'laravel-vue-i18n';
@@ -338,6 +339,7 @@ const userLinks = computed<
         legacy: false,
     },
     { name: 'trip.list.title', icon: Route, route: { name: 'trip-list' } },
+    { name: 'route-map.title', icon: Waypoints, route: { name: 'route-map' } },
     { name: 'menu.export', icon: Save, route: { name: 'export' } },
     { name: 'menu.settings', icon: Settings, route: { name: 'settings-profile' } },
     { name: 'tickets.title', icon: Ticket, route: { name: 'tickets' }, condition: user.isClosedBeta },
diff --git a/resources/tailwind-app/pages/RouteMap/RouteMap.vue b/resources/tailwind-app/pages/RouteMap/RouteMap.vue
new file mode 100644
index 000000000..6ad33b20a
--- /dev/null
+++ b/resources/tailwind-app/pages/RouteMap/RouteMap.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { TriangleAlert, Waypoints } from '@lucide/vue';
+import { trans } from 'laravel-vue-i18n';
+import { onUnmounted, ref, watch } from 'vue';
+import { Api, RouteMapEntryResource } from '../../../types/Api.gen';
+import Loading from '../../components/Loading.vue';
+import AppLayout from '../../layouts/AppLayout.vue';
+import { defaultFilterState, RouteMapFilterState, toQuery } from './filters';
+import RouteMapCanvas from './partials/RouteMapCanvas.vue';
+import RouteMapFilters from './partials/RouteMapFilters.vue';
+
+const DEBOUNCE_MS = 400;
+
+const api = new Api({ baseUrl: window.location.origin + '/api/v1' });
+
+const filters = ref<RouteMapFilterState>(defaultFilterState());
+const entries = ref<RouteMapEntryResource[]>([]);
+const loading = ref(true);
+const failed = ref(false);
+
+let latestRequest = 0;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+function fetchRouteMap(): void {
+    const requestId = ++latestRequest;
+    loading.value = true;
+    failed.value = false;
+
+    api.routeMap
+        .getRouteMap(toQuery(filters.value))
+        .then((response) => {
+            if (requestId !== latestRequest) {
+                return;
+            }
+            entries.value = response.data.data ?? [];
+            loading.value = false;
+        })
+        .catch(() => {
+            if (requestId !== latestRequest) {
+                return;
+            }
+            entries.value = [];
+            failed.value = true;
+            loading.value = false;
+        });
+}
+
+watch(
+    filters,
+    () => {
+        if (debounceTimer !== null) {
+            clearTimeout(debounceTimer);
+        }
+        debounceTimer = setTimeout(fetchRouteMap, DEBOUNCE_MS);
+    },
+    { deep: true },
+);
+
+onUnmounted(() => {
+    if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+    }
+});
+
+fetchRouteMap();
+</script>
+
+<template>
+    <AppLayout>
+        <div class="flex items-center gap-2 mb-1">
+            <h1 class="text-2xl font-bold flex items-center gap-2">
+                <Waypoints class="size-6" />
+                {{ trans('route-map.title') }}
+            </h1>
+            <Loading v-if="loading" />
+        </div>
+        <p class="text-sm text-base-content/60 mb-6">{{ trans('route-map.description') }}</p>
+
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
+            <div class="lg:col-span-1">
+                <RouteMapFilters v-model="filters" />
+            </div>
+
+            <div class="lg:col-span-3 flex flex-col gap-4">
+                <div v-if="failed" class="alert alert-error">
+                    <TriangleAlert class="size-5" />
+                    <span>{{ trans('error.500') }}</span>
+                </div>
+
+                <div class="relative rounded-box overflow-hidden h-[55vh] lg:h-[70vh] isolate bg-base-100">
+                    <RouteMapCanvas :entries="entries" />
+
+                    <div
+                        v-if="!loading && entries.length === 0 && !failed"
+                        class="absolute inset-0 z-10 flex items-center justify-center bg-base-100/80 pointer-events-none"
+                    >
+                        <span class="alert alert-warning w-auto">{{ trans('route-map.empty') }}</span>
+                    </div>
+                    <div
+                        v-if="loading"
+                        class="absolute inset-0 z-10 flex items-center justify-center bg-base-100/60 pointer-events-none"
+                    >
+                        <span class="loading loading-spinner loading-lg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/tailwind-app/pages/RouteMap/categoryColors.ts b/resources/tailwind-app/pages/RouteMap/categoryColors.ts
new file mode 100644
index 000000000..a8025ec75
--- /dev/null
+++ b/resources/tailwind-app/pages/RouteMap/categoryColors.ts
@@ -0,0 +1,50 @@
+import { HafasTravelType } from '../../../types/Api.gen';
+
+const CATEGORY_COLORS: Record<HafasTravelType, string> = {
+    [HafasTravelType.NationalExpress]: '#c72730',
+    [HafasTravelType.National]: '#f97316',
+    [HafasTravelType.RegionalExp]: '#eab308',
+    [HafasTravelType.Regional]: '#22c55e',
+    [HafasTravelType.Suburban]: '#14b8a6',
+    [HafasTravelType.Subway]: '#3b82f6',
+    [HafasTravelType.Tram]: '#a855f7',
+    [HafasTravelType.Bus]: '#ec4899',
+    [HafasTravelType.Ferry]: '#06b6d4',
+    [HafasTravelType.Plane]: '#64748b',
+    [HafasTravelType.Taxi]: '#84cc16',
+    [HafasTravelType.FreightTrain]: '#78716c',
+};
+
+const FALLBACK_COLOR = '#9ca3af';
+
+export const CATEGORY_ORDER: HafasTravelType[] = [
+    HafasTravelType.NationalExpress,
+    HafasTravelType.National,
+    HafasTravelType.RegionalExp,
+    HafasTravelType.Regional,
+    HafasTravelType.Suburban,
+    HafasTravelType.Subway,
+    HafasTravelType.Tram,
+    HafasTravelType.Bus,
+    HafasTravelType.Ferry,
+    HafasTravelType.Plane,
+    HafasTravelType.Taxi,
+    HafasTravelType.FreightTrain,
+];
+
+export function categoryColor(category?: HafasTravelType | null): string {
+    return (category && CATEGORY_COLORS[category]) || FALLBACK_COLOR;
+}
+
+/**
+ * multiple categories = fastes wins
+ */
+export function primaryCategory(categories: HafasTravelType[]): HafasTravelType | null {
+    for (const category of CATEGORY_ORDER) {
+        if (categories.includes(category)) {
+            return category;
+        }
+    }
+
+    return null;
+}
diff --git a/resources/tailwind-app/pages/RouteMap/filters.ts b/resources/tailwind-app/pages/RouteMap/filters.ts
new file mode 100644
index 000000000..f1917bd64
--- /dev/null
+++ b/resources/tailwind-app/pages/RouteMap/filters.ts
@@ -0,0 +1,53 @@
+import { Business, HafasTravelType } from '../../../types/Api.gen';
+
+export interface RouteMapFilterState {
+    from: string;
+    until: string;
+    travelTypes: HafasTravelType[];
+    travelPurposes: Business[];
+    includeApproximated: boolean;
+}
+
+export const TRAVEL_PURPOSES: { value: Business; label: string }[] = [
+    { value: Business.Value0, label: 'stationboard.business.private' },
+    { value: Business.Value1, label: 'stationboard.business.business' },
+    { value: Business.Value2, label: 'stationboard.business.commute' },
+];
+
+export function defaultFilterState(): RouteMapFilterState {
+    return {
+        from: '',
+        until: '',
+        travelTypes: [],
+        travelPurposes: [],
+        includeApproximated: true,
+    };
+}
+
+export function isFilterActive(state: RouteMapFilterState): boolean {
+    return (
+        state.from !== '' ||
+        state.until !== '' ||
+        state.travelTypes.length > 0 ||
+        state.travelPurposes.length > 0 ||
+        !state.includeApproximated
+    );
+}
+
+export interface RouteMapQuery {
+    from?: string;
+    until?: string;
+    'travelTypes[]'?: HafasTravelType[];
+    'travelPurposes[]'?: Business[];
+    includeApproximated?: boolean;
+}
+
+export function toQuery(state: RouteMapFilterState): RouteMapQuery {
+    return {
+        from: state.from || undefined,
+        until: state.until || undefined,
+        'travelTypes[]': state.travelTypes.length > 0 ? state.travelTypes : undefined,
+        'travelPurposes[]': state.travelPurposes.length > 0 ? state.travelPurposes : undefined,
+        includeApproximated: state.includeApproximated ? undefined : false,
+    };
+}
diff --git a/resources/tailwind-app/pages/RouteMap/partials/RouteMapCanvas.vue b/resources/tailwind-app/pages/RouteMap/partials/RouteMapCanvas.vue
new file mode 100644
index 000000000..3445f5ae3
--- /dev/null
+++ b/resources/tailwind-app/pages/RouteMap/partials/RouteMapCanvas.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import {
+    MglGeoJsonSource,
+    MglGeolocateControl,
+    MglLineLayer,
+    MglMap,
+    MglNavigationControl,
+} from '@indoorequal/vue-maplibre-gl';
+import type { Feature, LineString } from 'geojson';
+import { DataDrivenPropertyValueSpecification, LngLat, LngLatBounds } from 'maplibre-gl';
+import { computed } from 'vue';
+import { RouteMapEntryResource } from '../../../../types/Api.gen';
+import { decodePolyline } from '../../../helpers/polyline';
+import { categoryColor, primaryCategory } from '../categoryColors';
+
+const props = defineProps<{
+    entries: RouteMapEntryResource[];
+}>();
+
+const DEFAULT_BOUNDS = LngLatBounds.fromLngLat(new LngLat(9.9, 49.8), 500000);
+
+const isDarkMode = document.documentElement.classList.contains('dark');
+const mapStyle = isDarkMode
+    ? 'https://tiles.openfreemap.org/styles/dark'
+    : 'https://tiles.openfreemap.org/styles/positron';
+
+const brouterAttribution = '&copy; <a href="https://brouter.de" target="_blank">BRouter</a>';
+
+const lineWidth: DataDrivenPropertyValueSpecification<number> = [
+    'interpolate',
+    ['linear'],
+    ['zoom'],
+    4,
+    1,
+    8,
+    2,
+    12,
+    3.5,
+    16,
+    6,
+];
+const casingWidth: DataDrivenPropertyValueSpecification<number> = [
+    'interpolate',
+    ['linear'],
+    ['zoom'],
+    4,
+    2.5,
+    8,
+    4,
+    12,
+    6,
+    16,
+    9,
+];
+
+const routes = computed(() => {
+    const routed: Feature<LineString>[] = [];
+    const approximated: Feature<LineString>[] = [];
+
+    let west = Infinity;
+    let south = Infinity;
+    let east = -Infinity;
+    let north = -Infinity;
+
+    for (const entry of props.entries) {
+        const coordinates = decodePolyline(entry.polyline, entry.polylinePrecision);
+        if (coordinates.length < 2) {
+            continue;
+        }
+
+        for (const [lng, lat] of coordinates) {
+            if (lng < west) west = lng;
+            if (lng > east) east = lng;
+            if (lat < south) south = lat;
+            if (lat > north) north = lat;
+        }
+
+        const feature: Feature<LineString> = {
+            type: 'Feature',
+            geometry: { type: 'LineString', coordinates },
+            properties: { color: categoryColor(primaryCategory(entry.categories)) },
+        };
+
+        (entry.approximated ? approximated : routed).push(feature);
+    }
+
+    const bounds = Number.isFinite(west) ? new LngLatBounds([west, south], [east, north]) : undefined;
+
+    return { routed, approximated, bounds };
+});
+
+const bounds = computed(() => routes.value.bounds ?? DEFAULT_BOUNDS);
+</script>
+
+<template>
+    <mgl-map
+        :map-style="mapStyle"
+        :bounds="bounds"
+        :fit-bounds-options="{ padding: 32, animate: false }"
+        :max-zoom="17"
+        height="100%"
+        :attribution-control="{ compact: true }"
+    >
+        <mgl-navigation-control position="top-right" :show-zoom="true" :show-compass="true" />
+        <mgl-geolocate-control />
+
+        <mgl-geo-json-source
+            v-if="routes.approximated.length > 0"
+            source-id="route-map-approximated"
+            :data="{ type: 'FeatureCollection', features: routes.approximated }"
+        >
+            <mgl-line-layer
+                layer-id="route-map-approximated-line"
+                source-id="route-map-approximated"
+                :layout="{ 'line-cap': 'butt', 'line-join': 'round' }"
+                :paint="{
+                    'line-color': ['get', 'color'],
+                    'line-width': lineWidth,
+                    'line-opacity': 0.75,
+                    'line-dasharray': [2, 2],
+                }"
+            />
+        </mgl-geo-json-source>
+
+        <mgl-geo-json-source
+            v-if="routes.routed.length > 0"
+            source-id="route-map-routed"
+            :data="{ type: 'FeatureCollection', features: routes.routed }"
+            :attribution="brouterAttribution"
+        >
+            <mgl-line-layer
+                layer-id="route-map-casing"
+                source-id="route-map-routed"
+                :layout="{ 'line-cap': 'round', 'line-join': 'round' }"
+                :paint="{ 'line-color': '#181818', 'line-width': casingWidth, 'line-opacity': 0.45 }"
+            />
+            <mgl-line-layer
+                layer-id="route-map-line"
+                source-id="route-map-routed"
+                :layout="{ 'line-cap': 'round', 'line-join': 'round' }"
+                :paint="{ 'line-color': ['get', 'color'], 'line-width': lineWidth }"
+            />
+        </mgl-geo-json-source>
+    </mgl-map>
+</template>
diff --git a/resources/tailwind-app/pages/RouteMap/partials/RouteMapFilters.vue b/resources/tailwind-app/pages/RouteMap/partials/RouteMapFilters.vue
new file mode 100644
index 000000000..181933664
--- /dev/null
+++ b/resources/tailwind-app/pages/RouteMap/partials/RouteMapFilters.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { Funnel, RotateCcw } from '@lucide/vue';
+import { trans } from 'laravel-vue-i18n';
+import { Business, HafasTravelType } from '../../../../types/Api.gen';
+import TransportIcon from '../../../components/TransportIcon.vue';
+import { CATEGORY_ORDER, categoryColor } from '../categoryColors';
+import { defaultFilterState, isFilterActive, RouteMapFilterState, TRAVEL_PURPOSES } from '../filters';
+
+const props = defineProps<{
+    modelValue: RouteMapFilterState;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: RouteMapFilterState];
+}>();
+
+function patch(partial: Partial<RouteMapFilterState>): void {
+    emit('update:modelValue', { ...props.modelValue, ...partial });
+}
+
+function toggle<T>(list: T[], value: T): T[] {
+    return list.includes(value) ? list.filter((entry) => entry !== value) : [...list, value];
+}
+
+function toggleTravelType(type: HafasTravelType): void {
+    patch({ travelTypes: toggle(props.modelValue.travelTypes, type) });
+}
+
+function togglePurpose(purpose: Business): void {
+    patch({ travelPurposes: toggle(props.modelValue.travelPurposes, purpose) });
+}
+</script>
+
+<template>
+    <div class="card bg-base-100">
+        <div class="card-body gap-4 py-4">
+            <div class="flex items-center justify-between gap-2">
+                <h2 class="font-semibold flex items-center gap-2">
+                    <Funnel class="size-4" />
+                    {{ trans('filter.title') }}
+                </h2>
+                <button
+                    class="btn btn-ghost btn-xs"
+                    :disabled="!isFilterActive(modelValue)"
+                    @click="emit('update:modelValue', defaultFilterState())"
+                >
+                    <RotateCcw class="size-3.5" />
+                    {{ trans('filter.reset') }}
+                </button>
+            </div>
+
+            <div>
+                <p class="text-sm text-base-content/60 mb-2">{{ trans('filter.period') }}</p>
+                <div class="flex flex-wrap gap-3">
+                    <label class="flex min-w-0 grow flex-col">
+                        <span class="mb-1 text-xs text-base-content/60">{{ trans('stats.from') }}</span>
+                        <input
+                            type="date"
+                            class="input input-bordered input-sm w-full"
+                            :value="modelValue.from"
+                            :max="modelValue.until || undefined"
+                            @change="patch({ from: ($event.target as HTMLInputElement).value })"
+                        />
+                    </label>
+                    <label class="flex min-w-0 grow flex-col">
+                        <span class="mb-1 text-xs text-base-content/60">{{ trans('stats.to') }}</span>
+                        <input
+                            type="date"
+                            class="input input-bordered input-sm w-full"
+                            :value="modelValue.until"
+                            :min="modelValue.from || undefined"
+                            @change="patch({ until: ($event.target as HTMLInputElement).value })"
+                        />
+                    </label>
+                </div>
+            </div>
+
+            <div>
+                <p class="text-sm text-base-content/60 mb-2">{{ trans('filter.travel-type') }}</p>
+                <div class="flex flex-wrap gap-2">
+                    <button
+                        v-for="category in CATEGORY_ORDER"
+                        :key="category"
+                        class="btn btn-xs h-auto max-w-full gap-1.5 whitespace-normal py-1 text-left"
+                        :class="modelValue.travelTypes.includes(category) ? 'btn-primary' : 'btn-outline'"
+                        :aria-pressed="modelValue.travelTypes.includes(category)"
+                        @click="toggleTravelType(category)"
+                    >
+                        <span
+                            class="size-2 rounded-full shrink-0"
+                            :style="{ backgroundColor: categoryColor(category) }"
+                        />
+                        <TransportIcon :product="category" />
+                        {{ trans('transport_types.' + category) }}
+                    </button>
+                </div>
+            </div>
+
+            <div>
+                <p class="text-sm text-base-content/60 mb-2">{{ trans('filter.travel-purpose') }}</p>
+                <div class="flex flex-wrap gap-2">
+                    <button
+                        v-for="purpose in TRAVEL_PURPOSES"
+                        :key="purpose.value"
+                        class="btn btn-xs h-auto max-w-full whitespace-normal py-1 text-left"
+                        :class="modelValue.travelPurposes.includes(purpose.value) ? 'btn-primary' : 'btn-outline'"
+                        :aria-pressed="modelValue.travelPurposes.includes(purpose.value)"
+                        @click="togglePurpose(purpose.value)"
+                    >
+                        {{ trans(purpose.label) }}
+                    </button>
+                </div>
+            </div>
+
+            <label class="flex cursor-pointer items-start gap-3">
+                <input
+                    type="checkbox"
+                    class="toggle toggle-sm toggle-primary mt-0.5 shrink-0"
+                    :checked="modelValue.includeApproximated"
+                    @change="patch({ includeApproximated: ($event.target as HTMLInputElement).checked })"
+                />
+                <span class="flex min-w-0 flex-col">
+                    <span class="text-sm">{{ trans('route-map.include-approximated') }}</span>
+                    <span class="text-xs text-base-content/60">{{ trans('route-map.approximated.hint') }}</span>
+                </span>
+            </label>
+        </div>
+    </div>
+</template>
diff --git a/resources/tailwind-app/router/routes.ts b/resources/tailwind-app/router/routes.ts
index d1944ef41..48a9c08cb 100644
--- a/resources/tailwind-app/router/routes.ts
+++ b/resources/tailwind-app/router/routes.ts
@@ -18,6 +18,7 @@ import MonthlyLeaderboard from '../pages/Leaderboard/MonthlyLeaderboard.vue';
 import Notifications from '../pages/Notifications/Notifications.vue';
 import PrivacyPolicy from '../pages/PrivacyPolicy/PrivacyPolicy.vue';
 import UserProfile from '../pages/Profile/UserProfile.vue';
+import RouteMap from '../pages/RouteMap/RouteMap.vue';
 import Search from '../pages/Search/Search.vue';
 import Account from '../pages/Settings/Account/Account.vue';
 import Applications from '../pages/Settings/Applications/Applications.vue';
@@ -173,6 +174,12 @@ const routes: Array<RouteRecordRaw> = [
         component: Statistics,
         meta: { title: 'stats' },
     },
+    {
+        path: '/route-map',
+        name: 'route-map',
+        component: RouteMap,
+        meta: { title: 'route-map.title' },
+    },
     {
         path: '/statistics/daily/:dateString',
         name: 'stats-daily',