gpx.rnmkcy.eu — ${title}

diff --git a/website/src/lib/components/Shortcut.svelte b/website/src/lib/components/Shortcut.svelte new file mode 100755 index 0000000..7c78d26 --- /dev/null +++ b/website/src/lib/components/Shortcut.svelte @@ -0,0 +1,36 @@ + + +
+ {#if shift} + ⇧ + {/if} + {#if ctrl} + {mac && !safari ? '⌘' : $_('menu.ctrl') + '+'} + {/if} + {#if key} + {key} + {/if} + {#if click} + {$_('menu.click')} + {/if} +
diff --git a/website/src/lib/components/Tooltip.svelte b/website/src/lib/components/Tooltip.svelte new file mode 100755 index 0000000..ee8fd41 --- /dev/null +++ b/website/src/lib/components/Tooltip.svelte @@ -0,0 +1,18 @@ + + + + + + + +
+ {label} + +
+ + diff --git a/website/src/lib/components/WithUnits.svelte b/website/src/lib/components/WithUnits.svelte new file mode 100755 index 0000000..e6915ab --- /dev/null +++ b/website/src/lib/components/WithUnits.svelte @@ -0,0 +1,48 @@ + + + + {#if type === 'distance'} + {getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)} + {showUnits ? getDistanceUnits($distanceUnits) : ''} + {:else if type === 'elevation'} + {getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)} + {showUnits ? getElevationUnits($distanceUnits) : ''} + {:else if type === 'speed'} + {#if $velocityUnits === 'speed'} + {getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)} + {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''} + {:else} + {secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))} + {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''} + {/if} + {:else if type === 'temperature'} + {#if $temperatureUnits === 'celsius'} + {value} {showUnits ? $_('units.celsius') : ''} + {:else} + {celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''} + {/if} + {:else if type === 'time'} + {secondsToHHMMSS(value)} + {/if} + diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte new file mode 100755 index 0000000..6a4541e --- /dev/null +++ b/website/src/lib/components/collapsible-tree/CollapsibleTree.svelte @@ -0,0 +1,20 @@ + + + diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte new file mode 100755 index 0000000..de0728c --- /dev/null +++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte @@ -0,0 +1,97 @@ + + + + {#if slotInsideTrigger} + + + + {:else} + + {/if} + + + + + diff --git a/website/src/lib/components/collapsible-tree/index.ts b/website/src/lib/components/collapsible-tree/index.ts new file mode 100755 index 0000000..9b1298b --- /dev/null +++ b/website/src/lib/components/collapsible-tree/index.ts @@ -0,0 +1,2 @@ +export { default as CollapsibleTree } from './CollapsibleTree.svelte'; +export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte'; \ No newline at end of file diff --git a/website/src/lib/components/custom-control/CustomControl.svelte b/website/src/lib/components/custom-control/CustomControl.svelte new file mode 100755 index 0000000..f2ebdb2 --- /dev/null +++ b/website/src/lib/components/custom-control/CustomControl.svelte @@ -0,0 +1,27 @@ + + + diff --git a/website/src/lib/components/custom-control/CustomControl.ts b/website/src/lib/components/custom-control/CustomControl.ts new file mode 100755 index 0000000..481281e --- /dev/null +++ b/website/src/lib/components/custom-control/CustomControl.ts @@ -0,0 +1,20 @@ +import { type Map, type IControl } from 'mapbox-gl'; + +export default class CustomControl implements IControl { + _map: Map | undefined; + _container: HTMLElement; + + constructor(container: HTMLElement) { + this._container = container; + } + + onAdd(map: Map): HTMLElement { + this._map = map; + return this._container; + } + + onRemove() { + this._container?.parentNode?.removeChild(this._container); + this._map = undefined; + } +} \ No newline at end of file diff --git a/website/src/lib/components/docs/DocsContainer.svelte b/website/src/lib/components/docs/DocsContainer.svelte new file mode 100755 index 0000000..633c83f --- /dev/null +++ b/website/src/lib/components/docs/DocsContainer.svelte @@ -0,0 +1,82 @@ + + +
+ +
+ + diff --git a/website/src/lib/components/docs/DocsImage.svelte b/website/src/lib/components/docs/DocsImage.svelte new file mode 100755 index 0000000..712a48a --- /dev/null +++ b/website/src/lib/components/docs/DocsImage.svelte @@ -0,0 +1,25 @@ + + +
+ {#if src === 'getting-started/interface'} + + {:else if src === 'tools/routing'} + + {:else if src === 'tools/split'} + + {/if} +
{alt}
diff --git a/website/src/lib/components/docs/DocsLayers.svelte b/website/src/lib/components/docs/DocsLayers.svelte new file mode 100755 index 0000000..6458600 --- /dev/null +++ b/website/src/lib/components/docs/DocsLayers.svelte @@ -0,0 +1,13 @@ + + +
+ + +
diff --git a/website/src/lib/components/docs/DocsNote.svelte b/website/src/lib/components/docs/DocsNote.svelte new file mode 100755 index 0000000..8cfd9fe --- /dev/null +++ b/website/src/lib/components/docs/DocsNote.svelte @@ -0,0 +1,18 @@ + + +
+ +
+ + diff --git a/website/src/lib/components/docs/docs.ts b/website/src/lib/components/docs/docs.ts new file mode 100755 index 0000000..1e5e16f --- /dev/null +++ b/website/src/lib/components/docs/docs.ts @@ -0,0 +1,99 @@ +import { File, FilePen, View, type Icon, Settings, Pencil, MapPin, Scissors, CalendarClock, Group, Ungroup, Filter, SquareDashedMousePointer, MountainSnow } from "lucide-svelte"; +import type { ComponentType } from "svelte"; + +export const guides: Record = { + 'getting-started': [], + menu: ['file', 'edit', 'view', 'settings'], + 'files-and-stats': [], + toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'elevation', 'minify', 'clean'], + 'map-controls': [], + 'gpx': [], + 'integration': [], + 'faq': [], +}; + +export const guideIcons: Record> = { + "getting-started": "🚀", + "menu": "📂 ⚙️", + "file": File, + "edit": FilePen, + "view": View, + "settings": Settings, + "files-and-stats": "🗂 📈", + "toolbar": "🧰", + "routing": Pencil, + "poi": MapPin, + "scissors": Scissors, + "time": CalendarClock, + "merge": Group, + "extract": Ungroup, + "elevation": MountainSnow, + "minify": Filter, + "clean": SquareDashedMousePointer, + "map-controls": "🗺", + "gpx": "💾", + "integration": "{ 👩‍💻 }", + "faq": "🔮", +}; + +export function getPreviousGuide(currentGuide: string): string | undefined { + let subguides = currentGuide.split('/'); + + if (subguides.length === 1) { + let keys = Object.keys(guides); + let index = keys.indexOf(currentGuide); + if (index === 0) { + return undefined; + } + let previousGuide = keys[index - 1]; + if (previousGuide === undefined) { + return undefined; + } else if (guides[previousGuide].length === 0) { + return previousGuide; + } else { + return `${previousGuide}/${guides[previousGuide][guides[previousGuide].length - 1]}`; + } + } else { + if (guides.hasOwnProperty(subguides[0])) { + let subguideIndex = guides[subguides[0]].indexOf(subguides[1]); + if (subguideIndex > 0) { + return `${subguides[0]}/${guides[subguides[0]][subguideIndex - 1]}`; + } else { + return subguides[0]; + } + } else { + return undefined; + } + } +} + +export function getNextGuide(currentGuide: string): string | undefined { + let subguides = currentGuide.split('/'); + + if (subguides.length === 1) { + if (guides.hasOwnProperty(currentGuide)) { + if (guides[currentGuide].length === 0) { + let keys = Object.keys(guides); + let index = keys.indexOf(currentGuide); + return keys[index + 1]; + } else { + return `${currentGuide}/${guides[currentGuide][0]}`; + } + } else { + return undefined; + } + } else { + if (guides.hasOwnProperty(subguides[0])) { + let subguideIndex = guides[subguides[0]].indexOf(subguides[1]); + if (subguideIndex < guides[subguides[0]].length - 1) { + return `${subguides[0]}/${guides[subguides[0]][subguideIndex + 1]}`; + } else { + let keys = Object.keys(guides); + let index = keys.indexOf(subguides[0]); + return keys[index + 1]; + } + } else { + return undefined; + } + } +} \ No newline at end of file diff --git a/website/src/lib/components/embedding/Embedding.svelte b/website/src/lib/components/embedding/Embedding.svelte new file mode 100755 index 0000000..fe3ee59 --- /dev/null +++ b/website/src/lib/components/embedding/Embedding.svelte @@ -0,0 +1,269 @@ + + +
+ + + + + {#if $fileObservers.size > 1} +
+ +
+ {/if} +
+ + {#if options.elevation.show} + dataset !== null)} + elevationFill={options.elevation.fill} + panelSize={options.elevation.height} + showControls={options.elevation.controls} + class="py-2" + /> + {/if} +
diff --git a/website/src/lib/components/embedding/Embedding.ts b/website/src/lib/components/embedding/Embedding.ts new file mode 100755 index 0000000..d67f647 --- /dev/null +++ b/website/src/lib/components/embedding/Embedding.ts @@ -0,0 +1,148 @@ +import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public'; +import { basemaps } from '$lib/assets/layers'; + +export type EmbeddingOptions = { + token: string; + files: string[]; + ids: string[]; + basemap: string; + elevation: { + show: boolean; + height: number; + controls: boolean; + fill: 'slope' | 'surface' | undefined; + speed: boolean; + hr: boolean; + cad: boolean; + temp: boolean; + power: boolean; + }; + distanceMarkers: boolean; + directionMarkers: boolean; + distanceUnits: 'metric' | 'imperial' | 'nautical'; + velocityUnits: 'speed' | 'pace'; + temperatureUnits: 'celsius' | 'fahrenheit'; + theme: 'system' | 'light' | 'dark'; +}; + +export const defaultEmbeddingOptions = { + token: '', + files: [], + ids: [], + basemap: 'mapboxOutdoors', + elevation: { + show: true, + height: 170, + controls: true, + fill: undefined, + speed: false, + hr: false, + cad: false, + temp: false, + power: false + }, + distanceMarkers: false, + directionMarkers: false, + distanceUnits: 'metric', + velocityUnits: 'speed', + temperatureUnits: 'celsius', + theme: 'system' +}; + +export function getDefaultEmbeddingOptions(): EmbeddingOptions { + return JSON.parse(JSON.stringify(defaultEmbeddingOptions)); +} + +export function getMergedEmbeddingOptions( + options: any, + defaultOptions: any = defaultEmbeddingOptions +): EmbeddingOptions { + const mergedOptions = JSON.parse(JSON.stringify(defaultOptions)); + for (const key in options) { + if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) { + mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]); + } else { + mergedOptions[key] = options[key]; + } + } + return mergedOptions; +} + +export function getCleanedEmbeddingOptions( + options: any, + defaultOptions: any = defaultEmbeddingOptions +): any { + const cleanedOptions = JSON.parse(JSON.stringify(options)); + for (const key in cleanedOptions) { + if ( + typeof cleanedOptions[key] === 'object' && + cleanedOptions[key] !== null && + !Array.isArray(cleanedOptions[key]) + ) { + cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]); + if (Object.keys(cleanedOptions[key]).length === 0) { + delete cleanedOptions[key]; + } + } else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) { + delete cleanedOptions[key]; + } + } + return cleanedOptions; +} + +export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter( + (basemap) => !['ordnanceSurvey'].includes(basemap) +); + +export function getFilesFromEmbeddingOptions(options: EmbeddingOptions): string[] { + return options.files.concat(options.ids.map((id) => getURLForGoogleDriveFile(id))); +} + +export function getURLForGoogleDriveFile(fileId: string): string { + return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`; +} + +export function convertOldEmbeddingOptions(options: URLSearchParams): any { + let newOptions: any = { + token: PUBLIC_MAPBOX_TOKEN, + files: [], + ids: [], + }; + if (options.has('state')) { + let state = JSON.parse(options.get('state')!); + if (state.ids) { + newOptions.ids.push(...state.ids); + } + if (state.urls) { + newOptions.files.push(...state.urls); + } + } + if (options.has('source')) { + let basemap = options.get('source')!; + if (basemap === 'satellite') { + newOptions.basemap = 'mapboxSatellite'; + } else if (basemap === 'otm') { + newOptions.basemap = 'openTopoMap'; + } else if (basemap === 'ohm') { + newOptions.basemap = 'openHikingMap'; + } + } + if (options.has('imperial')) { + newOptions.distanceUnits = 'imperial'; + } + if (options.has('running')) { + newOptions.velocityUnits = 'pace'; + } + if (options.has('distance')) { + newOptions.distanceMarkers = true; + } + if (options.has('direction')) { + newOptions.directionMarkers = true; + } + if (options.has('slope')) { + newOptions.elevation = { + fill: 'slope' + }; + } + return newOptions; +} diff --git a/website/src/lib/components/embedding/EmbeddingPlayground.svelte b/website/src/lib/components/embedding/EmbeddingPlayground.svelte new file mode 100755 index 0000000..daf13a7 --- /dev/null +++ b/website/src/lib/components/embedding/EmbeddingPlayground.svelte @@ -0,0 +1,327 @@ + + + + + {$_('embedding.title')} + + +
+ {$_('embedding.mapbox_token')} + + {$_('embedding.file_urls')} + + {$_('embedding.drive_ids')} + + {$_('embedding.basemap')} + { + if (selected?.value) { + options.basemap = selected?.value; + } + }} + > + + + + + {#each allowedEmbeddingBasemaps as basemap} + {$_(`layers.label.${basemap}`)} + {/each} + + +
+ {$_('menu.elevation_profile')} + +
+ {#if options.elevation.show} +
+ + {$_('embedding.height')} + + +
+ + {$_('embedding.fill_by')} + + { + let value = selected?.value; + if (value === 'none') { + options.elevation.fill = undefined; + } else if (value === 'slope' || value === 'surface') { + options.elevation.fill = value; + } + }} + > + + + + + {$_('quantities.slope')} + {$_('quantities.surface')} + {$_('embedding.none')} + + +
+ + {$_('embedding.show_controls')} +
+ + + + {$_('chart.show_speed')} + +
+ + + + {$_('chart.show_heartrate')} + +
+ + + + {$_('chart.show_cadence')} + +
+ + + + {$_('chart.show_temperature')} + +
+ + + + {$_('chart.show_power')} + +
+ {/if} +
+ + + + {$_('menu.distance_markers')} + +
+ + + + {$_('menu.direction_markers')} + +
+ + {$_('menu.distance_units')} + +
+ + {$_('menu.metric')} +
+ + {$_('menu.imperial')} +
+ + {$_('menu.nautical')} +
+ + + + {$_('menu.velocity_units')} + +
+ + {$_('quantities.speed')} +
+ + {$_('quantities.pace')} +
+ + + + {$_('menu.temperature_units')} + +
+ + {$_('menu.celsius')} +
+ + {$_('menu.fahrenheit')} +
+ + +
+ + {$_('menu.mode')} + +
+ + {$_('menu.system')} +
+ + {$_('menu.light')} +
+ + {$_('menu.dark')} +
+ + +
+ {$_('embedding.manual_camera_description')} +
+ + {$_('embedding.latitude')} + {lat} + + + {$_('embedding.longitude')} + {lon} + + + {$_('embedding.zoom')} + {zoom} + + + {$_('embedding.bearing')} + {bearing} + + + {$_('embedding.pitch')} + {pitch} + +
+ + {$_('embedding.preview')} + +
+ +
+ + {$_('embedding.code')} + +
+                
+                    {``}
+                </code>
+            </pre>
+		</fieldset>
+	</Card.Content>
+</Card.Root>
diff --git a/website/src/lib/components/embedding/OpenIn.svelte b/website/src/lib/components/embedding/OpenIn.svelte
new file mode 100755
index 0000000..bf6d851
--- /dev/null
+++ b/website/src/lib/components/embedding/OpenIn.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import Logo from '$lib/components/Logo.svelte';
+    import { getURLForLanguage } from '$lib/utils';
+    import { _, locale } from 'svelte-i18n';
+
+    export let files: string[];
+    export let ids: string[];
+</script>
+
+<Button
+    variant="ghost"
+    class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
+    href="{getURLForLanguage($locale, '/app')}?{files.length > 0
+        ? `files=${encodeURIComponent(JSON.stringify(files))}`
+        : ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
+        ? `ids=${encodeURIComponent(JSON.stringify(ids))}`
+        : ''}"
+    target="_blank"
+>
+    {$_('menu.open_in')}
+    <Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
+</Button>
diff --git a/website/src/lib/components/file-list/FileList.svelte b/website/src/lib/components/file-list/FileList.svelte
new file mode 100755
index 0000000..5f5e33e
--- /dev/null
+++ b/website/src/lib/components/file-list/FileList.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import FileListNode from './FileListNode.svelte';
+	import { fileObservers, settings } from '$lib/db';
+	import { setContext } from 'svelte';
+	import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
+	import { copied, pasteSelection, selectAll, selection } from './Selection';
+	import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { _ } from 'svelte-i18n';
+	import { createFile } from '$lib/stores';
+
+	export let orientation: 'vertical' | 'horizontal';
+	export let recursive = false;
+
+	setContext('orientation', orientation);
+	setContext('recursive', recursive);
+
+	const { verticalFileView } = settings;
+
+	verticalFileView.subscribe(($vertical) => {
+		if ($vertical) {
+			selection.update(($selection) => {
+				$selection.forEach((item) => {
+					if ($selection.hasAnyChildren(item, false)) {
+						$selection.toggle(item);
+					}
+				});
+				return $selection;
+			});
+		} else {
+			selection.update(($selection) => {
+				$selection.forEach((item) => {
+					if (!(item instanceof ListFileItem)) {
+						$selection.toggle(item);
+						$selection.set(new ListFileItem(item.getFileId()), true);
+					}
+				});
+				return $selection;
+			});
+		}
+	});
+</script>
+
+<ScrollArea
+	class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
+	{orientation}
+	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
+>
+	<div
+		class="flex {orientation === 'vertical'
+			? 'flex-col py-1 pl-1 min-h-screen'
+			: 'flex-row'} {$$props.class ?? ''}"
+		{...$$restProps}
+	>
+		<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
+		{#if orientation === 'vertical'}
+			<ContextMenu.Root>
+				<ContextMenu.Trigger class="grow" />
+				<ContextMenu.Content>
+					<ContextMenu.Item on:click={createFile}>
+						<Plus size="16" class="mr-1" />
+						{$_('menu.new_file')}
+						<Shortcut key="+" ctrl={true} />
+					</ContextMenu.Item>
+					<ContextMenu.Separator />
+					<ContextMenu.Item on:click={selectAll} disabled={$fileObservers.size === 0}>
+						<FileStack size="16" class="mr-1" />
+						{$_('menu.select_all')}
+						<Shortcut key="A" ctrl={true} />
+					</ContextMenu.Item>
+					<ContextMenu.Separator />
+					<ContextMenu.Item
+						disabled={$copied === undefined ||
+							$copied.length === 0 ||
+							!allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
+						on:click={pasteSelection}
+					>
+						<ClipboardPaste size="16" class="mr-1" />
+						{$_('menu.paste')}
+						<Shortcut key="V" ctrl={true} />
+					</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu.Root>
+		{/if}
+	</div>
+</ScrollArea>
diff --git a/website/src/lib/components/file-list/FileList.ts b/website/src/lib/components/file-list/FileList.ts
new file mode 100755
index 0000000..18bb8d8
--- /dev/null
+++ b/website/src/lib/components/file-list/FileList.ts
@@ -0,0 +1,440 @@
+import { dbUtils, getFile } from "$lib/db";
+import { freeze } from "immer";
+import { GPXFile, Track, TrackSegment, Waypoint } from "gpx";
+import { selection } from "./Selection";
+import { newGPXFile } from "$lib/stores";
+
+export enum ListLevel {
+    ROOT,
+    FILE,
+    TRACK,
+    SEGMENT,
+    WAYPOINTS,
+    WAYPOINT
+}
+
+export const allowedMoves: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.FILE],
+    [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
+    [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
+    [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
+    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+};
+
+export const allowedPastes: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.ROOT, ListLevel.FILE],
+    [ListLevel.TRACK]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK],
+    [ListLevel.SEGMENT]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
+    [ListLevel.WAYPOINTS]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
+    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+};
+
+export abstract class ListItem {
+    level: ListLevel;
+
+    constructor(level: ListLevel) {
+        this.level = level;
+    }
+
+    abstract getId(): string | number;
+    abstract getFullId(): string;
+    abstract getIdAtLevel(level: ListLevel): string | number | undefined;
+    abstract getFileId(): string;
+    abstract getParent(): ListItem;
+    abstract extend(id: string | number): ListItem;
+}
+
+export class ListRootItem extends ListItem {
+    constructor() {
+        super(ListLevel.ROOT);
+    }
+
+    getId(): string {
+        return 'root';
+    }
+
+    getFullId(): string {
+        return 'root';
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        return undefined;
+    }
+
+    getFileId(): string {
+        return '';
+    }
+
+    getParent(): ListItem {
+        return this;
+    }
+
+    extend(id: string): ListFileItem {
+        return new ListFileItem(id);
+    }
+}
+
+export class ListFileItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super(ListLevel.FILE);
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return this.fileId;
+    }
+
+    getFullId(): string {
+        return this.fileId;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getParent(): ListItem {
+        return new ListRootItem();
+    }
+
+    extend(id: number | 'waypoints'): ListTrackItem | ListWaypointsItem {
+        if (id === 'waypoints') {
+            return new ListWaypointsItem(this.fileId);
+        } else {
+            return new ListTrackItem(this.fileId, id);
+        }
+    }
+}
+
+export class ListTrackItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+
+    constructor(fileId: string, trackIndex: number) {
+        super(ListLevel.TRACK);
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+    }
+
+    getId(): number {
+        return this.trackIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-track-${this.trackIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return this.trackIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getTrackIndex(): number {
+        return this.trackIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListFileItem(this.fileId);
+    }
+
+    extend(id: number): ListTrackSegmentItem {
+        return new ListTrackSegmentItem(this.fileId, this.trackIndex, id);
+    }
+}
+
+export class ListTrackSegmentItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+
+    constructor(fileId: string, trackIndex: number, segmentIndex: number) {
+        super(ListLevel.SEGMENT);
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+        this.segmentIndex = segmentIndex;
+    }
+
+    getId(): number {
+        return this.segmentIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-track-${this.trackIndex}--${this.segmentIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return this.trackIndex;
+            case ListLevel.TRACK:
+                return this.segmentIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getTrackIndex(): number {
+        return this.trackIndex;
+    }
+
+    getSegmentIndex(): number {
+        return this.segmentIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListTrackItem(this.fileId, this.trackIndex);
+    }
+
+    extend(): ListTrackSegmentItem {
+        return this;
+    }
+}
+
+export class ListWaypointsItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super(ListLevel.WAYPOINTS);
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return 'waypoints';
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-waypoints`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return 'waypoints';
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getParent(): ListItem {
+        return new ListFileItem(this.fileId);
+    }
+
+    extend(id: number): ListWaypointItem {
+        return new ListWaypointItem(this.fileId, id);
+    }
+}
+
+export class ListWaypointItem extends ListItem {
+    fileId: string;
+    waypointIndex: number;
+
+    constructor(fileId: string, waypointIndex: number) {
+        super(ListLevel.WAYPOINT);
+        this.fileId = fileId;
+        this.waypointIndex = waypointIndex;
+    }
+
+    getId(): number {
+        return this.waypointIndex;
+    }
+
+    getFullId(): string {
+        return `${this.fileId}-waypoint-${this.waypointIndex}`;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case ListLevel.ROOT:
+                return this.fileId;
+            case ListLevel.FILE:
+                return 'waypoints';
+            case ListLevel.WAYPOINTS:
+                return this.waypointIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    getWaypointIndex(): number {
+        return this.waypointIndex;
+    }
+
+    getParent(): ListItem {
+        return new ListWaypointsItem(this.fileId);
+    }
+
+    extend(): ListWaypointItem {
+        return this;
+    }
+}
+
+export function sortItems(items: ListItem[], reverse: boolean = false) {
+    items.sort((a, b) => {
+        if (a instanceof ListTrackItem && b instanceof ListTrackItem) {
+            return a.getTrackIndex() - b.getTrackIndex();
+        } else if (a instanceof ListTrackSegmentItem && b instanceof ListTrackSegmentItem) {
+            return a.getSegmentIndex() - b.getSegmentIndex();
+        } else if (a instanceof ListWaypointItem && b instanceof ListWaypointItem) {
+            return a.getWaypointIndex() - b.getWaypointIndex();
+        }
+        return a.level - b.level;
+    });
+    if (reverse) {
+        items.reverse();
+    }
+}
+
+export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: ListItem[], toItems: ListItem[], remove: boolean = true) {
+    if (fromItems.length === 0) {
+        return;
+    }
+
+    sortItems(fromItems, false);
+    sortItems(toItems, false);
+
+    let context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[] = [];
+    fromItems.forEach((item) => {
+        let file = getFile(item.getFileId());
+        if (file) {
+            if (item instanceof ListFileItem) {
+                context.push(file.clone());
+            } else if (item instanceof ListTrackItem && item.getTrackIndex() < file.trk.length) {
+                context.push(file.trk[item.getTrackIndex()].clone());
+            } else if (item instanceof ListTrackSegmentItem && item.getTrackIndex() < file.trk.length && item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length) {
+                context.push(file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()].clone());
+            } else if (item instanceof ListWaypointsItem) {
+                context.push(file.wpt.map((wpt) => wpt.clone()));
+            } else if (item instanceof ListWaypointItem && item.getWaypointIndex() < file.wpt.length) {
+                context.push(file.wpt[item.getWaypointIndex()].clone());
+            }
+        }
+    });
+
+    if (remove && !(fromParent instanceof ListRootItem)) {
+        sortItems(fromItems, true);
+    }
+
+    let files = [fromParent.getFileId(), toParent.getFileId()];
+    let callbacks = [
+        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+            fromItems.forEach((item) => {
+                if (item instanceof ListTrackItem) {
+                    file.replaceTracks(item.getTrackIndex(), item.getTrackIndex(), []);
+                } else if (item instanceof ListTrackSegmentItem) {
+                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex(), []);
+                } else if (item instanceof ListWaypointsItem) {
+                    file.replaceWaypoints(0, file.wpt.length - 1, []);
+                } else if (item instanceof ListWaypointItem) {
+                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex(), []);
+                }
+            });
+        },
+        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+            toItems.forEach((item, i) => {
+                if (item instanceof ListTrackItem) {
+                    if (context[i] instanceof Track) {
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
+                    } else if (context[i] instanceof TrackSegment) {
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [new Track({
+                            trkseg: [context[i]]
+                        })]);
+                    }
+                } else if (item instanceof ListTrackSegmentItem && context[i] instanceof TrackSegment) {
+                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex() - 1, [context[i]]);
+                } else if (item instanceof ListWaypointsItem) {
+                    if (Array.isArray(context[i]) && context[i].length > 0 && context[i][0] instanceof Waypoint) {
+                        file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, context[i]);
+                    } else if (context[i] instanceof Waypoint) {
+                        file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, [context[i]]);
+                    }
+                } else if (item instanceof ListWaypointItem && context[i] instanceof Waypoint) {
+                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [context[i]]);
+                }
+            });
+        }
+    ];
+
+    if (fromParent instanceof ListRootItem) {
+        files = [];
+        callbacks = [];
+    } else if (!remove) {
+        files.splice(0, 1);
+        callbacks.splice(0, 1);
+    }
+
+    dbUtils.applyEachToFilesAndGlobal(files, callbacks, (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+        toItems.forEach((item, i) => {
+            if (item instanceof ListFileItem) {
+                if (context[i] instanceof GPXFile) {
+                    let newFile = context[i];
+                    if (remove) {
+                        files.delete(newFile._data.id);
+                    }
+                    newFile._data.id = item.getFileId();
+                    files.set(item.getFileId(), freeze(newFile));
+                } else if (context[i] instanceof Track) {
+                    let newFile = newGPXFile();
+                    newFile._data.id = item.getFileId();
+                    if (context[i].name) {
+                        newFile.metadata.name = context[i].name;
+                    }
+                    newFile.replaceTracks(0, 0, [context[i]]);
+                    files.set(item.getFileId(), freeze(newFile));
+                } else if (context[i] instanceof TrackSegment) {
+                    let newFile = newGPXFile();
+                    newFile._data.id = item.getFileId();
+                    newFile.replaceTracks(0, 0, [new Track({
+                        trkseg: [context[i]]
+                    })]);
+                    files.set(item.getFileId(), freeze(newFile));
+                }
+            }
+        });
+    }, context);
+
+    selection.update(($selection) => {
+        $selection.clear();
+        toItems.forEach((item) => {
+            $selection.set(item, true);
+        });
+        return $selection;
+    });
+}
diff --git a/website/src/lib/components/file-list/FileListNode.svelte b/website/src/lib/components/file-list/FileListNode.svelte
new file mode 100755
index 0000000..f660b17
--- /dev/null
+++ b/website/src/lib/components/file-list/FileListNode.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		GPXFile,
+		Track,
+		TrackSegment,
+		Waypoint,
+		type AnyGPXTreeElement,
+		type GPXTreeElement
+	} from 'gpx';
+	import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
+	import { settings, type GPXFileWithStatistics } from '$lib/db';
+	import { get, type Readable } from 'svelte/store';
+	import FileListNodeContent from './FileListNodeContent.svelte';
+	import FileListNodeLabel from './FileListNodeLabel.svelte';
+	import { afterUpdate, getContext } from 'svelte';
+	import {
+		ListFileItem,
+		ListTrackSegmentItem,
+		ListWaypointItem,
+		ListWaypointsItem,
+		type ListItem,
+		type ListTrackItem
+	} from './FileList';
+	import { _ } from 'svelte-i18n';
+	import { selection } from './Selection';
+
+	export let node:
+		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+		| GPXTreeElement<AnyGPXTreeElement>
+		| Waypoint[]
+		| Waypoint;
+	export let item: ListItem;
+
+	let recursive = getContext<boolean>('recursive');
+
+	let collapsible: CollapsibleTreeNode;
+
+	$: label =
+		node instanceof GPXFile && item instanceof ListFileItem
+			? node.metadata.name
+			: node instanceof Track
+				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
+				: node instanceof TrackSegment
+					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
+					: node instanceof Waypoint
+						? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
+						: node instanceof GPXFile && item instanceof ListWaypointsItem
+							? $_('gpx.waypoints')
+							: '';
+
+	const { verticalFileView } = settings;
+
+	function openIfSelectedChild() {
+		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
+			collapsible.openNode();
+		}
+	}
+
+	if ($selection) {
+		openIfSelectedChild();
+	}
+
+	afterUpdate(openIfSelectedChild);
+</script>
+
+{#if node instanceof Map}
+	<FileListNodeContent {node} {item} />
+{:else if node instanceof TrackSegment}
+	<FileListNodeLabel {node} {item} {label} />
+{:else if node instanceof Waypoint}
+	<FileListNodeLabel {node} {item} {label} />
+{:else if recursive}
+	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
+		<FileListNodeLabel {node} {item} {label} slot="trigger" />
+		<div slot="content" class="ml-2">
+			{#key node}
+				<FileListNodeContent {node} {item} />
+			{/key}
+		</div>
+	</CollapsibleTreeNode>
+{:else}
+	<FileListNodeLabel {node} {item} {label} />
+{/if}
diff --git a/website/src/lib/components/file-list/FileListNodeContent.svelte b/website/src/lib/components/file-list/FileListNodeContent.svelte
new file mode 100755
index 0000000..5ce40fc
--- /dev/null
+++ b/website/src/lib/components/file-list/FileListNodeContent.svelte
@@ -0,0 +1,374 @@
+<script lang="ts" context="module">
+    let dragging: Writable<ListLevel | null> = writable(null);
+
+    let updating = false;
+</script>
+
+<script lang="ts">
+    import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+    import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
+    import Sortable from 'sortablejs/Sortable';
+    import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
+    import { get, writable, type Readable, type Writable } from 'svelte/store';
+    import FileListNodeStore from './FileListNodeStore.svelte';
+    import FileListNode from './FileListNode.svelte';
+    import {
+        ListFileItem,
+        ListLevel,
+        ListRootItem,
+        ListWaypointsItem,
+        allowedMoves,
+        moveItems,
+        type ListItem
+    } from './FileList';
+    import { selection } from './Selection';
+    import { isMac } from '$lib/utils';
+    import { _ } from 'svelte-i18n';
+
+    export let node:
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | GPXTreeElement<AnyGPXTreeElement>
+        | Waypoint;
+    export let item: ListItem;
+    export let waypointRoot: boolean = false;
+
+    let container: HTMLElement;
+    let elements: { [id: string]: HTMLElement } = {};
+    let sortableLevel: ListLevel =
+        node instanceof Map
+            ? ListLevel.FILE
+            : node instanceof GPXFile
+              ? waypointRoot
+                  ? ListLevel.WAYPOINTS
+                  : item instanceof ListWaypointsItem
+                    ? ListLevel.WAYPOINT
+                    : ListLevel.TRACK
+              : node instanceof Track
+                ? ListLevel.SEGMENT
+                : ListLevel.WAYPOINT;
+    let sortable: Sortable;
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+
+    let destroyed = false;
+    let lastUpdateStart = 0;
+    function updateToSelection(e) {
+        if (destroyed) {
+            return;
+        }
+
+        lastUpdateStart = Date.now();
+        setTimeout(() => {
+            if (Date.now() - lastUpdateStart >= 40) {
+                if (updating) {
+                    return;
+                }
+
+                updating = true;
+                // Sortable updates selection
+                let changed = getChangedIds();
+                if (changed.length > 0) {
+                    selection.update(($selection) => {
+                        $selection.clear();
+                        Object.entries(elements).forEach(([id, element]) => {
+                            $selection.set(
+                                item.extend(getRealId(id)),
+                                element.classList.contains('sortable-selected')
+                            );
+                        });
+
+                        if (
+                            e.originalEvent &&
+                            !(
+                                e.originalEvent.ctrlKey ||
+                                e.originalEvent.metaKey ||
+                                e.originalEvent.shiftKey
+                            ) &&
+                            ($selection.size > 1 ||
+                                !$selection.has(item.extend(getRealId(changed[0]))))
+                        ) {
+                            // Fix bug that sometimes causes a single select to be treated as a multi-select
+                            $selection.clear();
+                            $selection.set(item.extend(getRealId(changed[0])), true);
+                        }
+
+                        return $selection;
+                    });
+                }
+                updating = false;
+            }
+        }, 50);
+    }
+
+    function updateFromSelection() {
+        if (destroyed || updating) {
+            return;
+        }
+        updating = true;
+        // Selection updates sortable
+        let changed = getChangedIds();
+        for (let id of changed) {
+            let element = elements[id];
+            if (element) {
+                if ($selection.has(item.extend(id))) {
+                    Sortable.utils.select(element);
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest'
+                    });
+                } else {
+                    Sortable.utils.deselect(element);
+                }
+            }
+        }
+        updating = false;
+    }
+
+    $: if ($selection) {
+        updateFromSelection();
+    }
+
+    const { fileOrder } = settings;
+    function syncFileOrder() {
+        if (!sortable || sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+
+        const currentOrder = sortable.toArray();
+        if (currentOrder.length !== $fileOrder.length) {
+            sortable.sort($fileOrder);
+        } else {
+            for (let i = 0; i < currentOrder.length; i++) {
+                if (currentOrder[i] !== $fileOrder[i]) {
+                    sortable.sort($fileOrder);
+                    break;
+                }
+            }
+        }
+    }
+
+    $: if ($fileOrder) {
+        syncFileOrder();
+    }
+
+    function createSortable() {
+        sortable = Sortable.create(container, {
+            group: {
+                name: sortableLevel,
+                pull: allowedMoves[sortableLevel],
+                put: true
+            },
+            direction: orientation,
+            forceAutoScrollFallback: true,
+            multiDrag: true,
+            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
+            avoidImplicitDeselect: true,
+            onSelect: updateToSelection,
+            onDeselect: updateToSelection,
+            onStart: () => {
+                dragging.set(sortableLevel);
+            },
+            onEnd: () => {
+                dragging.set(null);
+            },
+            onSort: (e) => {
+                if (sortableLevel === ListLevel.FILE) {
+                    let newFileOrder = sortable.toArray();
+                    if (newFileOrder.length !== get(fileOrder).length) {
+                        fileOrder.set(newFileOrder);
+                    } else {
+                        for (let i = 0; i < newFileOrder.length; i++) {
+                            if (newFileOrder[i] !== get(fileOrder)[i]) {
+                                fileOrder.set(newFileOrder);
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                let fromItem = Sortable.get(e.from)._item;
+                let toItem = Sortable.get(e.to)._item;
+
+                if (item === toItem && !(fromItem instanceof ListRootItem)) {
+                    // Event is triggered on source and destination list, only handle it once
+                    let fromItems = [];
+                    let toItems = [];
+
+                    if (Sortable.get(e.from)._waypointRoot) {
+                        fromItems = [fromItem.extend('waypoints')];
+                    } else {
+                        let oldIndices: number[] =
+                            e.oldIndicies.length > 0
+                                ? e.oldIndicies.map((i) => i.index)
+                                : [e.oldIndex];
+                        oldIndices = oldIndices.filter((i) => i >= 0);
+                        oldIndices.sort((a, b) => a - b);
+
+                        fromItems = oldIndices.map((i) => fromItem.extend(i));
+                    }
+
+                    if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
+                        toItems = [toItem.extend('waypoints')];
+                    } else {
+                        if (Sortable.get(e.to)._waypointRoot) {
+                            toItem = toItem.extend('waypoints');
+                        }
+
+                        let newIndices: number[] =
+                            e.newIndicies.length > 0
+                                ? e.newIndicies.map((i) => i.index)
+                                : [e.newIndex];
+                        newIndices = newIndices.filter((i) => i >= 0);
+                        newIndices.sort((a, b) => a - b);
+
+                        if (toItem instanceof ListRootItem) {
+                            let newFileIds = getFileIds(newIndices.length);
+                            toItems = newIndices.map((i, index) => {
+                                $fileOrder.splice(i, 0, newFileIds[index]);
+                                return item.extend(newFileIds[index]);
+                            });
+                        } else {
+                            toItems = newIndices.map((i) => toItem.extend(i));
+                        }
+                    }
+
+                    moveItems(fromItem, toItem, fromItems, toItems);
+                }
+            }
+        });
+        Object.defineProperty(sortable, '_item', {
+            value: item,
+            writable: true
+        });
+
+        Object.defineProperty(sortable, '_waypointRoot', {
+            value: waypointRoot,
+            writable: true
+        });
+    }
+
+    onMount(() => {
+        createSortable();
+        destroyed = false;
+    });
+
+    afterUpdate(() => {
+        elements = {};
+        container.childNodes.forEach((element) => {
+            if (element instanceof HTMLElement) {
+                let attr = element.getAttribute('data-id');
+                if (attr) {
+                    if (node instanceof Map && !node.has(attr)) {
+                        element.remove();
+                    } else {
+                        elements[attr] = element;
+                    }
+                }
+            }
+        });
+
+        syncFileOrder();
+        updateFromSelection();
+    });
+
+    onDestroy(() => {
+        destroyed = true;
+    });
+
+    function getChangedIds() {
+        let changed: (string | number)[] = [];
+        Object.entries(elements).forEach(([id, element]) => {
+            let realId = getRealId(id);
+            let realItem = item.extend(realId);
+            let inSelection = get(selection).has(realItem);
+            let isSelected = element.classList.contains('sortable-selected');
+            if (inSelection !== isSelected) {
+                changed.push(realId);
+            }
+        });
+        return changed;
+    }
+
+    function getRealId(id: string | number) {
+        return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
+            ? id
+            : parseInt(id);
+    }
+
+    $: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
+</script>
+
+<div
+    bind:this={container}
+    class="sortable {orientation} flex {orientation === 'vertical'
+        ? 'flex-col'
+        : 'flex-row gap-1'} {canDrop ? 'min-h-5' : ''}"
+>
+    {#if node instanceof Map}
+        {#each node as [fileId, file] (fileId)}
+            <div data-id={fileId}>
+                <FileListNodeStore {file} />
+            </div>
+        {/each}
+    {:else if node instanceof GPXFile}
+        {#if item instanceof ListWaypointsItem}
+            {#each node.wpt as wpt, i (wpt)}
+                <div data-id={i} class="ml-1">
+                    <FileListNode node={wpt} item={item.extend(i)} />
+                </div>
+            {/each}
+        {:else if waypointRoot}
+            {#if node.wpt.length > 0}
+                <div data-id="waypoints">
+                    <FileListNode {node} item={item.extend('waypoints')} />
+                </div>
+            {/if}
+        {:else}
+            {#each node.children as child, i (child)}
+                <div data-id={i}>
+                    <FileListNode node={child} item={item.extend(i)} />
+                </div>
+            {/each}
+        {/if}
+    {:else if node instanceof Track}
+        {#each node.children as child, i (child)}
+            <div data-id={i} class="ml-1">
+                <FileListNode node={child} item={item.extend(i)} />
+            </div>
+        {/each}
+    {/if}
+</div>
+
+{#if node instanceof GPXFile && item instanceof ListFileItem}
+    {#if !waypointRoot}
+        <svelte:self {node} {item} waypointRoot={true} />
+    {/if}
+{/if}
+
+<style lang="postcss">
+    .sortable > div {
+        @apply rounded-md;
+        @apply h-fit;
+        @apply leading-none;
+    }
+
+    .vertical :global(button) {
+        @apply hover:bg-muted;
+    }
+
+    .vertical :global(.sortable-selected button) {
+        @apply hover:bg-accent;
+    }
+
+    .vertical :global(.sortable-selected) {
+        @apply bg-accent;
+    }
+
+    .horizontal :global(button) {
+        @apply bg-accent;
+        @apply hover:bg-muted;
+    }
+
+    .horizontal :global(.sortable-selected button) {
+        @apply bg-background;
+    }
+</style>
diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte
new file mode 100755
index 0000000..811fa85
--- /dev/null
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { dbUtils, getFile } from '$lib/db';
+	import {
+		Copy,
+		Info,
+		MapPin,
+		PaintBucket,
+		Plus,
+		Trash2,
+		Waypoints,
+		Eye,
+		EyeOff,
+		ClipboardCopy,
+		ClipboardPaste,
+		Maximize,
+		Scissors,
+		FileStack,
+		FileX
+	} from 'lucide-svelte';
+	import {
+		ListFileItem,
+		ListLevel,
+		ListTrackItem,
+		ListWaypointItem,
+		allowedPastes,
+		type ListItem
+	} from './FileList';
+	import {
+		copied,
+		copySelection,
+		cut,
+		cutSelection,
+		pasteSelection,
+		selectAll,
+		selectItem,
+		selection
+	} from './Selection';
+	import { getContext } from 'svelte';
+	import { get } from 'svelte/store';
+	import {
+		allHidden,
+		editMetadata,
+		editStyle,
+		embedding,
+		centerMapOnSelection,
+		gpxLayers,
+		map
+	} from '$lib/stores';
+	import {
+		GPXTreeElement,
+		Track,
+		TrackSegment,
+		type AnyGPXTreeElement,
+		Waypoint,
+		GPXFile
+	} from 'gpx';
+	import { _ } from 'svelte-i18n';
+	import MetadataDialog from './MetadataDialog.svelte';
+	import StyleDialog from './StyleDialog.svelte';
+
+	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+	export let item: ListItem;
+	export let label: string | undefined;
+
+	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+
+	$: singleSelection = $selection.size === 1;
+
+	let nodeColors: string[] = [];
+
+	$: if (node && $map) {
+		nodeColors = [];
+
+		if (node instanceof GPXFile) {
+			let style = node.getStyle();
+
+			let layer = gpxLayers.get(item.getFileId());
+			if (layer) {
+				style.color.push(layer.layerColor);
+			}
+
+			style.color.forEach((c) => {
+				if (!nodeColors.includes(c)) {
+					nodeColors.push(c);
+				}
+			});
+		} else if (node instanceof Track) {
+			let style = node.getStyle();
+			if (style) {
+				if (style.color && !nodeColors.includes(style.color)) {
+					nodeColors.push(style.color);
+				}
+			}
+			if (nodeColors.length === 0) {
+				let layer = gpxLayers.get(item.getFileId());
+				if (layer) {
+					nodeColors.push(layer.layerColor);
+				}
+			}
+		}
+	}
+
+	let openEditMetadata: boolean = false;
+	let openEditStyle: boolean = false;
+
+	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
+	$: openEditStyle =
+		$editStyle &&
+		$selection.has(item) &&
+		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
+	$: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<ContextMenu.Root
+	onOpenChange={(open) => {
+		if (open) {
+			if (!get(selection).has(item)) {
+				selectItem(item);
+			}
+		}
+	}}
+>
+	<ContextMenu.Trigger class="grow truncate">
+		<Button
+			variant="ghost"
+			class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+			'vertical'
+				? 'h-fit'
+				: 'h-9 px-1.5 shadow-md'} pointer-events-auto"
+		>
+			{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+				<MetadataDialog bind:open={openEditMetadata} {node} {item} />
+				<StyleDialog bind:open={openEditStyle} {item} />
+			{/if}
+			{#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
+				<div
+					class="absolute {orientation === 'vertical'
+						? 'top-0 bottom-0 right-1 w-1'
+						: 'top-0 h-1 left-0 right-0'}"
+					style="background:linear-gradient(to {orientation === 'vertical'
+						? 'bottom'
+						: 'right'},{nodeColors
+						.map(
+							(c, i) =>
+								`${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
+						)
+						.join(',')})"
+				/>
+			{/if}
+			<span
+				class="w-full text-left truncate py-1 flex flex-row items-center {hidden
+					? 'text-muted-foreground'
+					: ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
+					? 'text-muted-foreground'
+					: ''}"
+				on:contextmenu={(e) => {
+					if ($embedding) {
+						e.preventDefault();
+						e.stopPropagation();
+						return;
+					}
+					if (e.ctrlKey) {
+						// Add to selection instead of opening context menu
+						e.preventDefault();
+						e.stopPropagation();
+						$selection.toggle(item);
+						$selection = $selection;
+					}
+				}}
+				on:mouseenter={() => {
+					if (item instanceof ListWaypointItem) {
+						let layer = gpxLayers.get(item.getFileId());
+						let file = getFile(item.getFileId());
+						if (layer && file) {
+							let waypoint = file.wpt[item.getWaypointIndex()];
+							if (waypoint) {
+								layer.showWaypointPopup(waypoint);
+							}
+						}
+					}
+				}}
+				on:mouseleave={() => {
+					if (item instanceof ListWaypointItem) {
+						let layer = gpxLayers.get(item.getFileId());
+						if (layer) {
+							layer.hideWaypointPopup();
+						}
+					}
+				}}
+			>
+				{#if item.level === ListLevel.SEGMENT}
+					<Waypoints size="16" class="mr-1 shrink-0" />
+				{:else if item.level === ListLevel.WAYPOINT}
+					<MapPin size="16" class="mr-1 shrink-0" />
+				{/if}
+				<span class="grow select-none truncate {orientation === 'vertical' ? 'last:mr-2' : ''}">
+					{label}
+				</span>
+				{#if hidden}
+					<EyeOff
+						size="12"
+						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
+							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
+							? 'mr-3'
+							: ''}"
+					/>
+				{/if}
+			</span>
+		</Button>
+	</ContextMenu.Trigger>
+	<ContextMenu.Content>
+		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
+				<Info size="16" class="mr-1" />
+				{$_('menu.metadata.button')}
+				<Shortcut key="I" ctrl={true} />
+			</ContextMenu.Item>
+			<ContextMenu.Item on:click={() => ($editStyle = true)}>
+				<PaintBucket size="16" class="mr-1" />
+				{$_('menu.style.button')}
+			</ContextMenu.Item>
+		{/if}
+		<ContextMenu.Item
+			on:click={() => {
+				if ($allHidden) {
+					dbUtils.setHiddenToSelection(false);
+				} else {
+					dbUtils.setHiddenToSelection(true);
+				}
+			}}
+		>
+			{#if $allHidden}
+				<Eye size="16" class="mr-1" />
+				{$_('menu.unhide')}
+			{:else}
+				<EyeOff size="16" class="mr-1" />
+				{$_('menu.hide')}
+			{/if}
+			<Shortcut key="H" ctrl={true} />
+		</ContextMenu.Item>
+		<ContextMenu.Separator />
+		{#if orientation === 'vertical'}
+			{#if item instanceof ListFileItem}
+				<ContextMenu.Item
+					disabled={!singleSelection}
+					on:click={() => dbUtils.addNewTrack(item.getFileId())}
+				>
+					<Plus size="16" class="mr-1" />
+					{$_('menu.new_track')}
+				</ContextMenu.Item>
+				<ContextMenu.Separator />
+			{:else if item instanceof ListTrackItem}
+				<ContextMenu.Item
+					disabled={!singleSelection}
+					on:click={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
+				>
+					<Plus size="16" class="mr-1" />
+					{$_('menu.new_segment')}
+				</ContextMenu.Item>
+				<ContextMenu.Separator />
+			{/if}
+		{/if}
+		{#if item.level !== ListLevel.WAYPOINTS}
+			<ContextMenu.Item on:click={selectAll}>
+				<FileStack size="16" class="mr-1" />
+				{$_('menu.select_all')}
+				<Shortcut key="A" ctrl={true} />
+			</ContextMenu.Item>
+		{/if}
+		<ContextMenu.Item on:click={centerMapOnSelection}>
+			<Maximize size="16" class="mr-1" />
+			{$_('menu.center')}
+			<Shortcut key="⏎" ctrl={true} />
+		</ContextMenu.Item>
+		<ContextMenu.Separator />
+		<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+			<Copy size="16" class="mr-1" />
+			{$_('menu.duplicate')}
+			<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+		>
+		{#if orientation === 'vertical'}
+			<ContextMenu.Item on:click={copySelection}>
+				<ClipboardCopy size="16" class="mr-1" />
+				{$_('menu.copy')}
+				<Shortcut key="C" ctrl={true} />
+			</ContextMenu.Item>
+			<ContextMenu.Item on:click={cutSelection}>
+				<Scissors size="16" class="mr-1" />
+				{$_('menu.cut')}
+				<Shortcut key="X" ctrl={true} />
+			</ContextMenu.Item>
+			<ContextMenu.Item
+				disabled={$copied === undefined ||
+					$copied.length === 0 ||
+					!allowedPastes[$copied[0].level].includes(item.level)}
+				on:click={pasteSelection}
+			>
+				<ClipboardPaste size="16" class="mr-1" />
+				{$_('menu.paste')}
+				<Shortcut key="V" ctrl={true} />
+			</ContextMenu.Item>
+		{/if}
+		<ContextMenu.Separator />
+		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
+			{#if item instanceof ListFileItem}
+				<FileX size="16" class="mr-1" />
+				{$_('menu.close')}
+			{:else}
+				<Trash2 size="16" class="mr-1" />
+				{$_('menu.delete')}
+			{/if}
+			<Shortcut key="⌫" ctrl={true} />
+		</ContextMenu.Item>
+	</ContextMenu.Content>
+</ContextMenu.Root>
diff --git a/website/src/lib/components/file-list/FileListNodeStore.svelte b/website/src/lib/components/file-list/FileListNodeStore.svelte
new file mode 100755
index 0000000..9f22118
--- /dev/null
+++ b/website/src/lib/components/file-list/FileListNodeStore.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
+
+	import type { GPXFileWithStatistics } from '$lib/db';
+	import { getContext } from 'svelte';
+	import type { Readable } from 'svelte/store';
+	import { ListFileItem } from './FileList';
+
+	export let file: Readable<GPXFileWithStatistics | undefined>;
+
+	let recursive = getContext<boolean>('recursive');
+</script>
+
+{#if $file}
+	{#if recursive}
+		<CollapsibleTree side="left" defaultState="closed" slotInsideTrigger={false}>
+			<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+		</CollapsibleTree>
+	{:else}
+		<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+	{/if}
+{/if}
diff --git a/website/src/lib/components/file-list/MetadataDialog.svelte b/website/src/lib/components/file-list/MetadataDialog.svelte
new file mode 100755
index 0000000..1ee79a9
--- /dev/null
+++ b/website/src/lib/components/file-list/MetadataDialog.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Textarea } from '$lib/components/ui/textarea';
+    import { Label } from '$lib/components/ui/label/index.js';
+    import * as Popover from '$lib/components/ui/popover';
+    import { dbUtils } from '$lib/db';
+    import { Save } from 'lucide-svelte';
+    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
+    import { _ } from 'svelte-i18n';
+    import { editMetadata } from '$lib/stores';
+
+    export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+    export let item: ListItem;
+    export let open = false;
+
+    let name: string =
+        node instanceof GPXFile
+            ? node.metadata.name ?? ''
+            : node instanceof Track
+              ? node.name ?? ''
+              : '';
+    let description: string =
+        node instanceof GPXFile
+            ? node.metadata.desc ?? ''
+            : node instanceof Track
+              ? node.desc ?? ''
+              : '';
+
+    $: if (!open) {
+        $editMetadata = false;
+    }
+</script>
+
+<Popover.Root bind:open>
+    <Popover.Trigger />
+    <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
+        <Label for="name">{$_('menu.metadata.name')}</Label>
+        <Input bind:value={name} id="name" class="font-semibold h-8" />
+        <Label for="description">{$_('menu.metadata.description')}</Label>
+        <Textarea bind:value={description} id="description" />
+        <Button
+            variant="outline"
+            on:click={() => {
+                dbUtils.applyToFile(item.getFileId(), (file) => {
+                    if (item instanceof ListFileItem && node instanceof GPXFile) {
+                        file.metadata.name = name;
+                        file.metadata.desc = description;
+                        if (file.trk.length === 1) {
+                            file.trk[0].name = name;
+                        }
+                    } else if (item instanceof ListTrackItem && node instanceof Track) {
+                        file.trk[item.getTrackIndex()].name = name;
+                        file.trk[item.getTrackIndex()].desc = description;
+                    }
+                });
+                open = false;
+            }}
+        >
+            <Save size="16" class="mr-1" />
+            {$_('menu.metadata.save')}
+        </Button>
+    </Popover.Content>
+</Popover.Root>
diff --git a/website/src/lib/components/file-list/Selection.ts b/website/src/lib/components/file-list/Selection.ts
new file mode 100755
index 0000000..58743eb
--- /dev/null
+++ b/website/src/lib/components/file-list/Selection.ts
@@ -0,0 +1,315 @@
+import { get, writable } from "svelte/store";
+import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, ListLevel, sortItems, ListWaypointsItem, moveItems } from "./FileList";
+import { fileObservers, getFile, getFileIds, settings } from "$lib/db";
+
+export class SelectionTreeType {
+    item: ListItem;
+    selected: boolean;
+    children: {
+        [key: string | number]: SelectionTreeType
+    };
+    size: number = 0;
+
+    constructor(item: ListItem) {
+        this.item = item;
+        this.selected = false;
+        this.children = {};
+    }
+
+    clear() {
+        this.selected = false;
+        for (let key in this.children) {
+            this.children[key].clear();
+        }
+        this.size = 0;
+    }
+
+    _setOrToggle(item: ListItem, value?: boolean) {
+        if (item.level === this.item.level) {
+            let newSelected = value === undefined ? !this.selected : value;
+            if (this.selected !== newSelected) {
+                this.selected = newSelected;
+                this.size += this.selected ? 1 : -1;
+            }
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (!this.children.hasOwnProperty(id)) {
+                    this.children[id] = new SelectionTreeType(this.item.extend(id));
+                }
+                this.size -= this.children[id].size;
+                this.children[id]._setOrToggle(item, value);
+                this.size += this.children[id].size;
+            }
+        }
+    }
+
+    set(item: ListItem, value: boolean) {
+        this._setOrToggle(item, value);
+    }
+
+    toggle(item: ListItem) {
+        this._setOrToggle(item);
+    }
+
+    has(item: ListItem): boolean {
+        if (item.level === this.item.level) {
+            return this.selected;
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (this.children.hasOwnProperty(id)) {
+                    return this.children[id].has(item);
+                }
+            }
+        }
+        return false;
+    }
+
+    hasAnyParent(item: ListItem, self: boolean = true): boolean {
+        if (this.selected && this.item.level <= item.level && (self || this.item.level < item.level)) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (this.children.hasOwnProperty(id)) {
+                return this.children[id].hasAnyParent(item, self);
+            }
+        }
+        return false;
+    }
+
+    hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
+        if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
+                if (this.children.hasOwnProperty(id)) {
+                    return this.children[id].hasAnyChildren(item, self, ignoreIds);
+                }
+            }
+        } else {
+            for (let key in this.children) {
+                if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
+                    if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    getSelected(selection: ListItem[] = []): ListItem[] {
+        if (this.selected) {
+            selection.push(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].getSelected(selection);
+        }
+        return selection;
+    }
+
+    forEach(callback: (item: ListItem) => void) {
+        if (this.selected) {
+            callback(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].forEach(callback);
+        }
+    }
+
+    getChild(id: string | number): SelectionTreeType | undefined {
+        return this.children[id];
+    }
+
+    deleteChild(id: string | number) {
+        if (this.children.hasOwnProperty(id)) {
+            this.size -= this.children[id].size;
+            delete this.children[id];
+        }
+    }
+};
+
+export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
+
+export function selectItem(item: ListItem) {
+    selection.update(($selection) => {
+        $selection.clear();
+        $selection.set(item, true);
+        return $selection;
+    });
+}
+
+export function selectFile(fileId: string) {
+    selectItem(new ListFileItem(fileId));
+}
+
+export function addSelectItem(item: ListItem) {
+    selection.update(($selection) => {
+        $selection.toggle(item);
+        return $selection;
+    });
+}
+
+export function addSelectFile(fileId: string) {
+    addSelectItem(new ListFileItem(fileId));
+}
+
+export function selectAll() {
+    selection.update(($selection) => {
+        let item: ListItem = new ListRootItem();
+        $selection.forEach((i) => {
+            item = i;
+        });
+
+        if (item instanceof ListRootItem || item instanceof ListFileItem) {
+            $selection.clear();
+            get(fileObservers).forEach((_file, fileId) => {
+                $selection.set(new ListFileItem(fileId), true);
+            });
+        } else if (item instanceof ListTrackItem) {
+            let file = getFile(item.getFileId());
+            if (file) {
+                file.trk.forEach((_track, trackId) => {
+                    $selection.set(new ListTrackItem(item.getFileId(), trackId), true);
+                });
+            }
+        } else if (item instanceof ListTrackSegmentItem) {
+            let file = getFile(item.getFileId());
+            if (file) {
+                file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
+                    $selection.set(new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId), true);
+                });
+            }
+        } else if (item instanceof ListWaypointItem) {
+            let file = getFile(item.getFileId());
+            if (file) {
+                file.wpt.forEach((_waypoint, waypointId) => {
+                    $selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
+                });
+            }
+        }
+
+        return $selection;
+    });
+}
+
+export function getOrderedSelection(reverse: boolean = false): ListItem[] {
+    let selected: ListItem[] = [];
+    applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+        selected.push(...items);
+    }, reverse);
+    return selected;
+}
+
+export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+    get(settings.fileOrder).forEach((fileId) => {
+        let level: ListLevel | undefined = undefined;
+        let items: ListItem[] = [];
+        selectedItems.forEach((item) => {
+            if (item.getFileId() === fileId) {
+                level = item.level;
+                if (item instanceof ListFileItem || item instanceof ListTrackItem || item instanceof ListTrackSegmentItem || item instanceof ListWaypointsItem || item instanceof ListWaypointItem) {
+                    items.push(item);
+                }
+            }
+        });
+
+        if (items.length > 0) {
+            sortItems(items, reverse);
+            callback(fileId, level, items);
+        }
+    });
+}
+
+export function applyToOrderedSelectedItemsFromFile(callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+    applyToOrderedItemsFromFile(get(selection).getSelected(), callback, reverse);
+}
+
+export const copied = writable<ListItem[] | undefined>(undefined);
+export const cut = writable(false);
+
+export function copySelection(): boolean {
+    let selected = get(selection).getSelected();
+    if (selected.length > 0) {
+        copied.set(selected);
+        cut.set(false);
+        return true;
+    }
+    return false;
+}
+
+export function cutSelection() {
+    if (copySelection()) {
+        cut.set(true);
+    }
+}
+
+function resetCopied() {
+    copied.set(undefined);
+    cut.set(false);
+}
+
+export function pasteSelection() {
+    let fromItems = get(copied);
+    if (fromItems === undefined || fromItems.length === 0) {
+        return;
+    }
+
+    let selected = get(selection).getSelected();
+    if (selected.length === 0) {
+        selected = [new ListRootItem()];
+    }
+
+    let fromParent = fromItems[0].getParent();
+    let toParent = selected[selected.length - 1];
+
+    let startIndex: number | undefined = undefined;
+
+    if (fromItems[0].level === toParent.level) {
+        if (toParent instanceof ListTrackItem || toParent instanceof ListTrackSegmentItem || toParent instanceof ListWaypointItem) {
+            startIndex = toParent.getId() + 1;
+        }
+        toParent = toParent.getParent();
+    }
+
+    let toItems: ListItem[] = [];
+    if (toParent.level === ListLevel.ROOT) {
+        let fileIds = getFileIds(fromItems.length);
+        fileIds.forEach((fileId) => {
+            toItems.push(new ListFileItem(fileId));
+        });
+    } else {
+        let toFile = getFile(toParent.getFileId());
+        if (toFile) {
+            fromItems.forEach((item, index) => {
+                if (toParent instanceof ListFileItem) {
+                    if (item instanceof ListTrackItem || item instanceof ListTrackSegmentItem) {
+                        toItems.push(new ListTrackItem(toParent.getFileId(), (startIndex ?? toFile.trk.length) + index));
+                    } else if (item instanceof ListWaypointsItem) {
+                        toItems.push(new ListWaypointsItem(toParent.getFileId()));
+                    } else if (item instanceof ListWaypointItem) {
+                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
+                    }
+                } else if (toParent instanceof ListTrackItem) {
+                    if (item instanceof ListTrackSegmentItem) {
+                        let toTrackIndex = toParent.getTrackIndex();
+                        toItems.push(new ListTrackSegmentItem(toParent.getFileId(), toTrackIndex, (startIndex ?? toFile.trk[toTrackIndex].trkseg.length) + index));
+                    }
+                } else if (toParent instanceof ListWaypointsItem) {
+                    if (item instanceof ListWaypointItem) {
+                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
+                    }
+                }
+            });
+        }
+    }
+
+    if (fromItems.length === toItems.length) {
+        moveItems(fromParent, toParent, fromItems, toItems, get(cut));
+        resetCopied();
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/file-list/StyleDialog.svelte b/website/src/lib/components/file-list/StyleDialog.svelte
new file mode 100755
index 0000000..3f0a57b
--- /dev/null
+++ b/website/src/lib/components/file-list/StyleDialog.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Slider } from '$lib/components/ui/slider';
+	import * as Popover from '$lib/components/ui/popover';
+	import { dbUtils, getFile, settings } from '$lib/db';
+	import { Save } from 'lucide-svelte';
+	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+	import { selection } from './Selection';
+	import { editStyle, gpxLayers } from '$lib/stores';
+	import { _ } from 'svelte-i18n';
+
+	export let item: ListItem;
+	export let open = false;
+
+	const { defaultOpacity, defaultWeight } = settings;
+
+	let colors: string[] = [];
+	let color: string | undefined = undefined;
+	let opacity: number[] = [];
+	let weight: number[] = [];
+	let colorChanged = false;
+	let opacityChanged = false;
+	let weightChanged = false;
+
+	function setStyleInputs() {
+		colors = [];
+		opacity = [];
+		weight = [];
+
+		$selection.forEach((item) => {
+			if (item instanceof ListFileItem) {
+				let file = getFile(item.getFileId());
+				let layer = gpxLayers.get(item.getFileId());
+				if (file && layer) {
+					let style = file.getStyle();
+					style.color.push(layer.layerColor);
+
+					style.color.forEach((c) => {
+						if (!colors.includes(c)) {
+							colors.push(c);
+						}
+					});
+					style.opacity.forEach((o) => {
+						if (!opacity.includes(o)) {
+							opacity.push(o);
+						}
+					});
+					style.weight.forEach((w) => {
+						if (!weight.includes(w)) {
+							weight.push(w);
+						}
+					});
+				}
+			} else if (item instanceof ListTrackItem) {
+				let file = getFile(item.getFileId());
+				let layer = gpxLayers.get(item.getFileId());
+				if (file && layer) {
+					let track = file.trk[item.getTrackIndex()];
+					let style = track.getStyle();
+					if (style) {
+						if (style.color && !colors.includes(style.color)) {
+							colors.push(style.color);
+						}
+						if (style.opacity && !opacity.includes(style.opacity)) {
+							opacity.push(style.opacity);
+						}
+						if (style.weight && !weight.includes(style.weight)) {
+							weight.push(style.weight);
+						}
+					}
+					if (!colors.includes(layer.layerColor)) {
+						colors.push(layer.layerColor);
+					}
+				}
+			}
+		});
+
+		color = colors[0];
+		opacity = [opacity[0] ?? $defaultOpacity];
+		weight = [weight[0] ?? $defaultWeight];
+
+		colorChanged = false;
+		opacityChanged = false;
+		weightChanged = false;
+	}
+
+	$: if ($selection && open) {
+		setStyleInputs();
+	}
+
+	$: if (!open) {
+		$editStyle = false;
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger />
+	<Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
+		<Label class="flex flex-row gap-2 items-center justify-between">
+			{$_('menu.style.color')}
+			<Input
+				bind:value={color}
+				type="color"
+				class="p-0 h-6 w-40"
+				on:change={() => (colorChanged = true)}
+			/>
+		</Label>
+		<Label class="flex flex-row gap-2 items-center justify-between">
+			{$_('menu.style.opacity')}
+			<div class="w-40 p-2">
+				<Slider
+					bind:value={opacity}
+					min={0.3}
+					max={1}
+					step={0.1}
+					onValueChange={() => (opacityChanged = true)}
+				/>
+			</div>
+		</Label>
+		<Label class="flex flex-row gap-2 items-center justify-between">
+			{$_('menu.style.width')}
+			<div class="w-40 p-2">
+				<Slider
+					bind:value={weight}
+					id="weight"
+					min={1}
+					max={10}
+					step={1}
+					onValueChange={() => (weightChanged = true)}
+				/>
+			</div>
+		</Label>
+		<Button
+			variant="outline"
+			disabled={!colorChanged && !opacityChanged && !weightChanged}
+			on:click={() => {
+				let style = {};
+				if (colorChanged) {
+					style.color = color;
+				}
+				if (opacityChanged) {
+					style.opacity = opacity[0];
+				}
+				if (weightChanged) {
+					style.weight = weight[0];
+				}
+				dbUtils.setStyleToSelection(style);
+
+				if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+					if (style.opacity) {
+						$defaultOpacity = style.opacity;
+					}
+					if (style.weight) {
+						$defaultWeight = style.weight;
+					}
+				}
+
+				open = false;
+			}}
+		>
+			<Save size="16" class="mr-1" />
+			{$_('menu.metadata.save')}
+		</Button>
+	</Popover.Content>
+</Popover.Root>
diff --git a/website/src/lib/components/gpx-layer/DistanceMarkers.ts b/website/src/lib/components/gpx-layer/DistanceMarkers.ts
new file mode 100755
index 0000000..1b663ba
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/DistanceMarkers.ts
@@ -0,0 +1,95 @@
+
+import { settings } from "$lib/db";
+import { gpxStatistics } from "$lib/stores";
+import { get } from "svelte/store";
+
+const { distanceMarkers, distanceUnits } = settings;
+
+export class DistanceMarkers {
+    map: mapboxgl.Map;
+    updateBinded: () => void = this.update.bind(this);
+    unsubscribes: (() => void)[] = [];
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+
+        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
+        this.map.on('style.import.load', this.updateBinded);
+    }
+
+    update() {
+        try {
+            if (get(distanceMarkers)) {
+                let distanceSource = this.map.getSource('distance-markers');
+                if (distanceSource) {
+                    distanceSource.setData(this.getDistanceMarkersGeoJSON());
+                } else {
+                    this.map.addSource('distance-markers', {
+                        type: 'geojson',
+                        data: this.getDistanceMarkersGeoJSON()
+                    });
+                }
+                if (!this.map.getLayer('distance-markers')) {
+                    this.map.addLayer({
+                        id: 'distance-markers',
+                        type: 'symbol',
+                        source: 'distance-markers',
+                        layout: {
+                            'text-field': ['get', 'distance'],
+                            'text-size': 14,
+                            'text-font': ['Open Sans Bold'],
+                            'text-padding': 20,
+                        },
+                        paint: {
+                            'text-color': 'black',
+                            'text-halo-width': 2,
+                            'text-halo-color': 'white',
+                        }
+                    });
+                } else {
+                    this.map.moveLayer('distance-markers');
+                }
+            } else {
+                if (this.map.getLayer('distance-markers')) {
+                    this.map.removeLayer('distance-markers');
+                }
+            }
+        } catch (e) { // No reliable way to check if the map is ready to add sources and layers
+            return;
+        }
+    }
+
+    remove() {
+        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+    }
+
+    getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
+        let statistics = get(gpxStatistics);
+
+        let features = [];
+        let currentTargetDistance = 1;
+        for (let i = 0; i < statistics.local.distance.total.length; i++) {
+            if (statistics.local.distance.total[i] >= currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)) {
+                let distance = currentTargetDistance.toFixed(0);
+                features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [statistics.local.points[i].getLongitude(), statistics.local.points[i].getLatitude()]
+                    },
+                    properties: {
+                        distance,
+                    }
+                } as GeoJSON.Feature);
+                currentTargetDistance += 1;
+            }
+        }
+
+        return {
+            type: 'FeatureCollection',
+            features
+        };
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts
new file mode 100755
index 0000000..b9e5484
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/GPXLayer.ts
@@ -0,0 +1,471 @@
+import { currentTool, map, Tool } from "$lib/stores";
+import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
+import { get, type Readable } from "svelte/store";
+import mapboxgl from "mapbox-gl";
+import { currentPopupWaypoint, deleteWaypoint, waypointPopup } from "./WaypointPopup";
+import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
+import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
+import type { Waypoint } from "gpx";
+import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
+import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
+import { MapPin, Square } from "lucide-static";
+import { getSymbolKey, symbols } from "$lib/assets/symbols";
+
+const colors = [
+    '#ff0000',
+    '#0000ff',
+    '#46e646',
+    '#00ccff',
+    '#ff9900',
+    '#ff00ff',
+    '#ffff32',
+    '#288228',
+    '#9933ff',
+    '#50f0be',
+    '#8c645a'
+];
+
+const colorCount: { [key: string]: number } = {};
+for (let color of colors) {
+    colorCount[color] = 0;
+}
+
+// Get the color with the least amount of uses
+function getColor() {
+    let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
+    colorCount[color]++;
+    return color;
+}
+
+function decrementColor(color: string) {
+    if (colorCount.hasOwnProperty(color)) {
+        colorCount[color]--;
+    }
+}
+
+function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
+    let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    ${Square
+            .replace('width="24"', 'width="12"')
+            .replace('height="24"', 'height="12"')
+            .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+            .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+            .replace('fill="none"', `fill="${layerColor}"`)}
+    ${MapPin
+            .replace('width="24"', '')
+            .replace('height="24"', '')
+            .replace('stroke="currentColor"', '')
+            .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
+            .replace('circle', `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`)} 
+    ${symbolSvg?.replace('width="24"', 'width="10"')
+            .replace('height="24"', 'height="10"')
+            .replace('stroke="currentColor"', 'stroke="white"')
+            .replace('stroke-width="2"', 'stroke-width="2.5" x="7" y="5"') ?? ''}
+    </svg>`;
+}
+
+const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
+
+export class GPXLayer {
+    map: mapboxgl.Map;
+    fileId: string;
+    file: Readable<GPXFileWithStatistics | undefined>;
+    layerColor: string;
+    markers: mapboxgl.Marker[] = [];
+    selected: boolean = false;
+    draggable: boolean;
+    unsubscribe: Function[] = [];
+
+    updateBinded: () => void = this.update.bind(this);
+    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
+    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
+    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
+    maybeHideWaypointPopupBinded: (e: any) => void = this.maybeHideWaypointPopup.bind(this);
+
+    constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
+        this.map = map;
+        this.fileId = fileId;
+        this.file = file;
+        this.layerColor = getColor();
+        this.unsubscribe.push(file.subscribe(this.updateBinded));
+        this.unsubscribe.push(selection.subscribe($selection => {
+            let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
+            if (this.selected || newSelected) {
+                this.selected = newSelected;
+                this.update();
+            }
+            if (newSelected) {
+                this.moveToFront();
+            }
+        }));
+        this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
+        this.unsubscribe.push(currentTool.subscribe(tool => {
+            if (tool === Tool.WAYPOINT && !this.draggable) {
+                this.draggable = true;
+                this.markers.forEach(marker => marker.setDraggable(true));
+            } else if (tool !== Tool.WAYPOINT && this.draggable) {
+                this.draggable = false;
+                this.markers.forEach(marker => marker.setDraggable(false));
+            }
+        }));
+        this.draggable = get(currentTool) === Tool.WAYPOINT;
+
+        this.map.on('style.import.load', this.updateBinded);
+    }
+
+    update() {
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        if (file._data.style && file._data.style.color && this.layerColor !== `#${file._data.style.color}`) {
+            decrementColor(this.layerColor);
+            this.layerColor = `#${file._data.style.color}`;
+        }
+
+        try {
+            let source = this.map.getSource(this.fileId);
+            if (source) {
+                source.setData(this.getGeoJSON());
+            } else {
+                this.map.addSource(this.fileId, {
+                    type: 'geojson',
+                    data: this.getGeoJSON()
+                });
+            }
+
+            if (!this.map.getLayer(this.fileId)) {
+                this.map.addLayer({
+                    id: this.fileId,
+                    type: 'line',
+                    source: this.fileId,
+                    layout: {
+                        'line-join': 'round',
+                        'line-cap': 'round'
+                    },
+                    paint: {
+                        'line-color': ['get', 'color'],
+                        'line-width': ['get', 'weight'],
+                        'line-opacity': ['get', 'opacity']
+                    }
+                });
+
+                this.map.on('click', this.fileId, this.layerOnClickBinded);
+                this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+                this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+                this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            }
+
+            if (get(directionMarkers)) {
+                if (!this.map.getLayer(this.fileId + '-direction')) {
+                    this.map.addLayer({
+                        id: this.fileId + '-direction',
+                        type: 'symbol',
+                        source: this.fileId,
+                        layout: {
+                            'text-field': '»',
+                            'text-offset': [0, -0.1],
+                            'text-keep-upright': false,
+                            'text-max-angle': 361,
+                            'text-allow-overlap': true,
+                            'text-font': ['Open Sans Bold'],
+                            'symbol-placement': 'line',
+                            'symbol-spacing': 20,
+                        },
+                        paint: {
+                            'text-color': 'white',
+                            'text-opacity': 0.7,
+                            'text-halo-width': 0.2,
+                            'text-halo-color': 'white'
+                        }
+                    }, this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
+                }
+            } else {
+                if (this.map.getLayer(this.fileId + '-direction')) {
+                    this.map.removeLayer(this.fileId + '-direction');
+                }
+            }
+
+            let visibleItems: [number, number][] = [];
+            file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                if (!segment._data.hidden) {
+                    visibleItems.push([trackIndex, segmentIndex]);
+                }
+            });
+
+            this.map.setFilter(this.fileId, ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+            if (this.map.getLayer(this.fileId + '-direction')) {
+                this.map.setFilter(this.fileId + '-direction', ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+            }
+        } catch (e) { // No reliable way to check if the map is ready to add sources and layers
+            return;
+        }
+
+        let markerIndex = 0;
+
+        if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
+            file.wpt.forEach((waypoint) => { // Update markers
+                let symbolKey = getSymbolKey(waypoint.sym);
+                if (markerIndex < this.markers.length) {
+                    this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
+                    this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
+                    Object.defineProperty(this.markers[markerIndex], '_waypoint', { value: waypoint, writable: true });
+                } else {
+                    let element = document.createElement('div');
+                    element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
+                    element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
+                    let marker = new mapboxgl.Marker({
+                        draggable: this.draggable,
+                        element,
+                        anchor: 'bottom'
+                    }).setLngLat(waypoint.getCoordinates());
+                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
+                    let dragEndTimestamp = 0;
+                    marker.getElement().addEventListener('mouseover', (e) => {
+                        if (marker._isDragging) {
+                            return;
+                        }
+                        this.showWaypointPopup(marker._waypoint);
+                        e.stopPropagation();
+                    });
+                    marker.getElement().addEventListener('click', (e) => {
+                        if (dragEndTimestamp && Date.now() - dragEndTimestamp < 1000) {
+                            return;
+                        }
+
+                        if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
+                            deleteWaypoint(this.fileId, marker._waypoint._data.index);
+                            e.stopPropagation();
+                            return;
+                        }
+
+                        if (get(verticalFileView)) {
+                            if ((e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
+                                addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                            } else {
+                                selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                            }
+                        } else if (get(currentTool) === Tool.WAYPOINT) {
+                            selectedWaypoint.set([marker._waypoint, this.fileId]);
+                        } else {
+                            this.showWaypointPopup(marker._waypoint);
+                        }
+                        e.stopPropagation();
+                    });
+                    marker.on('dragstart', () => {
+                        setGrabbingCursor();
+                        marker.getElement().style.cursor = 'grabbing';
+                        this.hideWaypointPopup();
+                    });
+                    marker.on('dragend', (e) => {
+                        resetCursor();
+                        marker.getElement().style.cursor = '';
+                        getElevation([marker._waypoint]).then((ele) => {
+                            dbUtils.applyToFile(this.fileId, (file) => {
+                                let latLng = marker.getLngLat();
+                                let wpt = file.wpt[marker._waypoint._data.index];
+                                wpt.setCoordinates({
+                                    lat: latLng.lat,
+                                    lon: latLng.lng
+                                });
+                                wpt.ele = ele[0];
+                            });
+                        });
+                        dragEndTimestamp = Date.now()
+                    });
+                    this.markers.push(marker);
+                }
+                markerIndex++;
+            });
+        }
+
+        while (markerIndex < this.markers.length) { // Remove extra markers
+            this.markers.pop()?.remove();
+        }
+
+        this.markers.forEach((marker) => {
+            if (!marker._waypoint._data.hidden) {
+                marker.addTo(this.map);
+            } else {
+                marker.remove();
+            }
+        });
+    }
+
+    updateMap(map: mapboxgl.Map) {
+        this.map = map;
+        this.map.on('style.import.load', this.updateBinded);
+        this.update();
+    }
+
+    remove() {
+        if (get(map)) {
+            this.map.off('click', this.fileId, this.layerOnClickBinded);
+            this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+            this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+            this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            this.map.off('style.import.load', this.updateBinded);
+
+            if (this.map.getLayer(this.fileId + '-direction')) {
+                this.map.removeLayer(this.fileId + '-direction');
+            }
+            if (this.map.getLayer(this.fileId)) {
+                this.map.removeLayer(this.fileId);
+            }
+            if (this.map.getSource(this.fileId)) {
+                this.map.removeSource(this.fileId);
+            }
+        }
+
+        this.markers.forEach((marker) => {
+            marker.remove();
+        });
+
+        this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+
+        decrementColor(this.layerColor);
+    }
+
+    moveToFront() {
+        if (this.map.getLayer(this.fileId)) {
+            this.map.moveLayer(this.fileId);
+        }
+        if (this.map.getLayer(this.fileId + '-direction')) {
+            this.map.moveLayer(this.fileId + '-direction', this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
+        }
+    }
+
+    layerOnMouseEnter(e: any) {
+        let trackIndex = e.features[0].properties.trackIndex;
+        let segmentIndex = e.features[0].properties.segmentIndex;
+
+        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+            setScissorsCursor();
+        } else {
+            setPointerCursor();
+        }
+    }
+
+    layerOnMouseLeave() {
+        resetCursor();
+    }
+
+    layerOnClick(e: any) {
+        if (get(currentTool) === Tool.ROUTING && get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
+            return;
+        }
+
+        let trackIndex = e.features[0].properties.trackIndex;
+        let segmentIndex = e.features[0].properties.segmentIndex;
+
+        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+            dbUtils.split(this.fileId, trackIndex, segmentIndex, { lat: e.lngLat.lat, lon: e.lngLat.lng });
+            return;
+        }
+
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let item = undefined;
+        if (get(verticalFileView) && file.getSegments().length > 1) { // Select inner item
+            item = file.children[trackIndex].children.length > 1 ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex) : new ListTrackItem(this.fileId, trackIndex);
+        } else {
+            item = new ListFileItem(this.fileId);
+        }
+
+        if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
+            addSelectItem(item);
+        } else {
+            selectItem(item);
+        }
+    }
+
+    layerOnContextMenu(e: any) {
+        if (e.originalEvent.ctrlKey) {
+            this.layerOnClick(e);
+        }
+    }
+
+    showWaypointPopup(waypoint: Waypoint) {
+        if (get(currentPopupWaypoint) !== null) {
+            this.hideWaypointPopup();
+        }
+        let marker = this.markers[waypoint._data.index];
+        if (marker) {
+            currentPopupWaypoint.set([waypoint, this.fileId]);
+            marker.setPopup(waypointPopup);
+            marker.togglePopup();
+            this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
+        }
+    }
+
+    maybeHideWaypointPopup(e: any) {
+        let waypoint = get(currentPopupWaypoint)?.[0];
+        if (waypoint) {
+            let marker = this.markers[waypoint._data.index];
+            if (marker) {
+                if (this.map.project(marker.getLngLat()).dist(this.map.project(e.lngLat)) > 100) {
+                    this.hideWaypointPopup();
+                }
+            } else {
+                this.hideWaypointPopup();
+            }
+        }
+    }
+
+    hideWaypointPopup() {
+        let waypoint = get(currentPopupWaypoint)?.[0];
+        if (waypoint) {
+            let marker = this.markers[waypoint._data.index];
+            marker?.getPopup()?.remove();
+            currentPopupWaypoint.set(null);
+            this.map.off('mousemove', this.maybeHideWaypointPopupBinded);
+        }
+    }
+
+    getGeoJSON(): GeoJSON.FeatureCollection {
+        let file = get(this.file)?.file;
+        if (!file) {
+            return {
+                type: 'FeatureCollection',
+                features: []
+            };
+        }
+
+        let data = file.toGeoJSON();
+
+        let trackIndex = 0, segmentIndex = 0;
+        for (let feature of data.features) {
+            if (!feature.properties) {
+                feature.properties = {};
+            }
+            if (!feature.properties.color) {
+                feature.properties.color = this.layerColor;
+            }
+            if (!feature.properties.weight) {
+                feature.properties.weight = get(defaultWeight);
+            }
+            if (!feature.properties.opacity) {
+                feature.properties.opacity = get(defaultOpacity);
+            }
+            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)) || get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)) {
+                feature.properties.weight = feature.properties.weight + 2;
+                feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);
+            }
+            feature.properties.trackIndex = trackIndex;
+            feature.properties.segmentIndex = segmentIndex;
+
+            segmentIndex++;
+            if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
+                segmentIndex = 0;
+                trackIndex++;
+            }
+        }
+        return data;
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/gpx-layer/GPXLayers.svelte b/website/src/lib/components/gpx-layer/GPXLayers.svelte
new file mode 100755
index 0000000..b18cbf8
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/GPXLayers.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { map, gpxLayers } from '$lib/stores';
+	import { GPXLayer } from './GPXLayer';
+	import WaypointPopup from './WaypointPopup.svelte';
+	import { fileObservers } from '$lib/db';
+	import { DistanceMarkers } from './DistanceMarkers';
+	import { StartEndMarkers } from './StartEndMarkers';
+	import { onDestroy } from 'svelte';
+
+	let distanceMarkers: DistanceMarkers | undefined = undefined;
+	let startEndMarkers: StartEndMarkers | undefined = undefined;
+
+	$: if ($map && $fileObservers) {
+		// remove layers for deleted files
+		gpxLayers.forEach((layer, fileId) => {
+			if (!$fileObservers.has(fileId)) {
+				layer.remove();
+				gpxLayers.delete(fileId);
+			} else if ($map !== layer.map) {
+				layer.updateMap($map);
+			}
+		});
+		// add layers for new files
+		$fileObservers.forEach((file, fileId) => {
+			if (!gpxLayers.has(fileId)) {
+				gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
+			}
+		});
+	}
+
+	$: if ($map) {
+		if (distanceMarkers) {
+			distanceMarkers.remove();
+		}
+		if (startEndMarkers) {
+			startEndMarkers.remove();
+		}
+		distanceMarkers = new DistanceMarkers($map);
+		startEndMarkers = new StartEndMarkers($map);
+	}
+
+	onDestroy(() => {
+		gpxLayers.forEach((layer) => layer.remove());
+		gpxLayers.clear();
+
+		if (distanceMarkers) {
+			distanceMarkers.remove();
+			distanceMarkers = undefined;
+		}
+
+		if (startEndMarkers) {
+			startEndMarkers.remove();
+			startEndMarkers = undefined;
+		}
+	});
+</script>
+
+<WaypointPopup />
diff --git a/website/src/lib/components/gpx-layer/StartEndMarkers.ts b/website/src/lib/components/gpx-layer/StartEndMarkers.ts
new file mode 100755
index 0000000..41936f7
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/StartEndMarkers.ts
@@ -0,0 +1,47 @@
+import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from "$lib/stores";
+import mapboxgl from "mapbox-gl";
+import { get } from "svelte/store";
+
+export class StartEndMarkers {
+    map: mapboxgl.Map;
+    start: mapboxgl.Marker;
+    end: mapboxgl.Marker;
+    updateBinded: () => void = this.update.bind(this);
+    unsubscribes: (() => void)[] = [];
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+
+        let startElement = document.createElement('div');
+        let endElement = document.createElement('div');
+        startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
+        endElement.className = `h-4 w-4 rounded-full border-2 border-white`;
+        endElement.style.background = 'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
+
+        this.start = new mapboxgl.Marker({ element: startElement });
+        this.end = new mapboxgl.Marker({ element: endElement });
+
+        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
+    }
+
+    update() {
+        let tool = get(currentTool);
+        let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
+        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
+            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
+            this.end.setLngLat(statistics.local.points[statistics.local.points.length - 1].getCoordinates()).addTo(this.map);
+        } else {
+            this.start.remove();
+            this.end.remove();
+        }
+    }
+
+    remove() {
+        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+
+        this.start.remove();
+        this.end.remove();
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
new file mode 100755
index 0000000..0f0adf1
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { waypointPopup, currentPopupWaypoint, deleteWaypoint } from './WaypointPopup';
+	import WithUnits from '$lib/components/WithUnits.svelte';
+	import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+	import { Tool, currentTool } from '$lib/stores';
+	import { getSymbolKey, symbols } from '$lib/assets/symbols';
+	import { _ } from 'svelte-i18n';
+	import sanitizeHtml from 'sanitize-html';
+
+	let popupElement: HTMLDivElement;
+
+	onMount(() => {
+		waypointPopup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
+
+	$: symbolKey = $currentPopupWaypoint ? getSymbolKey($currentPopupWaypoint[0].sym) : undefined;
+
+	function sanitize(text: string | undefined): string {
+		if (text === undefined) {
+			return '';
+		}
+		return sanitizeHtml(text, {
+			allowedTags: ['a', 'br', 'img'],
+			allowedAttributes: {
+				a: ['href', 'target'],
+				img: ['src']
+			}
+		}).trim();
+	}
+</script>
+
+<div bind:this={popupElement} class="hidden">
+	{#if $currentPopupWaypoint}
+		<Card.Root class="border-none shadow-md text-base max-w-80 p-2">
+			<Card.Header class="p-0">
+				<Card.Title class="text-md">
+					{#if $currentPopupWaypoint[0].link && $currentPopupWaypoint[0].link.attributes && $currentPopupWaypoint[0].link.attributes.href}
+						<a href={$currentPopupWaypoint[0].link.attributes.href} target="_blank">
+							{$currentPopupWaypoint[0].name ?? $currentPopupWaypoint[0].link.attributes.href}
+							<ExternalLink size="12" class="inline-block mb-1.5" />
+						</a>
+					{:else}
+						{$currentPopupWaypoint[0].name ?? $_('gpx.waypoint')}
+					{/if}
+				</Card.Title>
+			</Card.Header>
+			<Card.Content class="flex flex-col p-0 text-sm">
+				<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
+					{#if symbolKey}
+						<span>
+							{#if symbols[symbolKey].icon}
+								<svelte:component
+									this={symbols[symbolKey].icon}
+									size="12"
+									class="inline-block mb-0.5"
+								/>
+							{:else}
+								<span class="w-4 inline-block" />
+							{/if}
+							{$_(`gpx.symbol.${symbolKey}`)}
+						</span>
+						<Dot size="16" />
+					{/if}
+					{$currentPopupWaypoint[0].getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint[0]
+						.getLongitude()
+						.toFixed(6)}&deg;
+					{#if $currentPopupWaypoint[0].ele !== undefined}
+						<Dot size="16" />
+						<WithUnits value={$currentPopupWaypoint[0].ele} type="elevation" />
+					{/if}
+				</div>
+				{#if $currentPopupWaypoint[0].desc}
+					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].desc)}</span>
+				{/if}
+				{#if $currentPopupWaypoint[0].cmt && $currentPopupWaypoint[0].cmt !== $currentPopupWaypoint[0].desc}
+					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].cmt)}</span>
+				{/if}
+				{#if $currentTool === Tool.WAYPOINT}
+					<Button
+						class="mt-2 w-full px-2 py-1 h-8 justify-start"
+						variant="outline"
+						on:click={() =>
+							deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
+					>
+						<Trash2 size="16" class="mr-1" />
+						{$_('menu.delete')}
+						<Shortcut shift={true} click={true} />
+					</Button>
+				{/if}
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>
+
+<style lang="postcss">
+	div :global(a) {
+		@apply text-link;
+		@apply hover:underline;
+	}
+
+	div :global(img) {
+		@apply my-0;
+		@apply rounded-md;
+	}
+</style>
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.ts b/website/src/lib/components/gpx-layer/WaypointPopup.ts
new file mode 100755
index 0000000..0f8820d
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.ts
@@ -0,0 +1,25 @@
+import { dbUtils } from "$lib/db";
+import type { Waypoint } from "gpx";
+import mapboxgl from "mapbox-gl";
+import { writable } from "svelte/store";
+
+export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
+
+export const waypointPopup = new mapboxgl.Popup({
+    closeButton: false,
+    maxWidth: undefined,
+    offset: {
+        'top': [0, 0],
+        'top-left': [0, 0],
+        'top-right': [0, 0],
+        'bottom': [0, -30],
+        'bottom-left': [0, -30],
+        'bottom-right': [0, -30],
+        'left': [0, 0],
+        'right': [0, 0]
+    },
+});
+
+export function deleteWaypoint(fileId: string, waypointIndex: number) {
+    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
+}
\ No newline at end of file
diff --git a/website/src/lib/components/layer-control/CustomLayers.svelte b/website/src/lib/components/layer-control/CustomLayers.svelte
new file mode 100755
index 0000000..15a7a16
--- /dev/null
+++ b/website/src/lib/components/layer-control/CustomLayers.svelte
@@ -0,0 +1,435 @@
+<script lang="ts">
+    import * as Card from '$lib/components/ui/card';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label';
+    import { Button } from '$lib/components/ui/button';
+    import { Separator } from '$lib/components/ui/separator';
+    import * as RadioGroup from '$lib/components/ui/radio-group';
+    import {
+        CirclePlus,
+        CircleX,
+        Minus,
+        Pencil,
+        Plus,
+        Save,
+        Trash2,
+        Move,
+        Map,
+        Layers2
+    } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import { settings } from '$lib/db';
+    import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
+    import { map } from '$lib/stores';
+    import { onDestroy, onMount } from 'svelte';
+    import Sortable from 'sortablejs/Sortable';
+    import { customBasemapUpdate } from './utils';
+
+    const {
+        customLayers,
+        selectedBasemapTree,
+        selectedOverlayTree,
+        currentBasemap,
+        previousBasemap,
+        currentOverlays,
+        previousOverlays,
+        customBasemapOrder,
+        customOverlayOrder
+    } = settings;
+
+    let name: string = '';
+    let tileUrls: string[] = [''];
+    let maxZoom: number = 20;
+    let layerType: 'basemap' | 'overlay' = 'basemap';
+    let resourceType: 'raster' | 'vector' = 'raster';
+
+    let basemapContainer: HTMLElement;
+    let overlayContainer: HTMLElement;
+
+    let basemapSortable: Sortable;
+    let overlaySortable: Sortable;
+
+    onMount(() => {
+        if ($customBasemapOrder.length === 0) {
+            $customBasemapOrder = Object.keys($customLayers).filter(
+                (id) => $customLayers[id].layerType === 'basemap'
+            );
+        }
+        if ($customOverlayOrder.length === 0) {
+            $customOverlayOrder = Object.keys($customLayers).filter(
+                (id) => $customLayers[id].layerType === 'overlay'
+            );
+        }
+
+        basemapSortable = Sortable.create(basemapContainer, {
+            onSort: (e) => {
+                $customBasemapOrder = basemapSortable.toArray();
+                $selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
+                    acc[id] = true;
+                    return acc;
+                }, {});
+            }
+        });
+        overlaySortable = Sortable.create(overlayContainer, {
+            onSort: (e) => {
+                $customOverlayOrder = overlaySortable.toArray();
+                $selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
+                    acc[id] = true;
+                    return acc;
+                }, {});
+            }
+        });
+
+        basemapSortable.sort($customBasemapOrder);
+        overlaySortable.sort($customOverlayOrder);
+    });
+
+    onDestroy(() => {
+        basemapSortable.destroy();
+        overlaySortable.destroy();
+    });
+
+    $: if (tileUrls[0].length > 0) {
+        if (
+            tileUrls[0].includes('.json') ||
+            (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+        ) {
+            resourceType = 'vector';
+        } else {
+            resourceType = 'raster';
+        }
+    }
+
+    function createLayer() {
+        if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
+            deleteLayer(selectedLayerId);
+        }
+
+        if (typeof maxZoom === 'string') {
+            maxZoom = parseInt(maxZoom);
+        }
+
+        let layerId = selectedLayerId ?? getLayerId();
+        let layer: CustomLayer = {
+            id: layerId,
+            name: name,
+            tileUrls: tileUrls.map((url) => decodeURI(url.trim())),
+            maxZoom: maxZoom,
+            layerType: layerType,
+            resourceType: resourceType,
+            value: ''
+        };
+
+        if (resourceType === 'vector') {
+            layer.value = layer.tileUrls[0];
+        } else {
+            layer.value = {
+                version: 8,
+                sources: {
+                    [layerId]: {
+                        type: 'raster',
+                        tiles: layer.tileUrls,
+                        tileSize: 256,
+                        maxzoom: maxZoom
+                    }
+                },
+                layers: [
+                    {
+                        id: layerId,
+                        type: 'raster',
+                        source: layerId
+                    }
+                ]
+            };
+        }
+        $customLayers[layerId] = layer;
+        addLayer(layerId);
+        selectedLayerId = undefined;
+        setDataFromSelectedLayer();
+    }
+
+    function getLayerId() {
+        for (let id = 0; ; id++) {
+            if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
+                return `custom-${id}`;
+            }
+        }
+    }
+
+    function addLayer(layerId: string) {
+        if (layerType === 'basemap') {
+            selectedBasemapTree.update(($tree) => {
+                if (!$tree.basemaps.hasOwnProperty('custom')) {
+                    $tree.basemaps['custom'] = {};
+                }
+                $tree.basemaps['custom'][layerId] = true;
+                return $tree;
+            });
+
+            if ($currentBasemap === layerId) {
+                $customBasemapUpdate++;
+            } else {
+                $currentBasemap = layerId;
+            }
+
+            if (!$customBasemapOrder.includes(layerId)) {
+                $customBasemapOrder = [...$customBasemapOrder, layerId];
+            }
+        } else {
+            selectedOverlayTree.update(($tree) => {
+                if (!$tree.overlays.hasOwnProperty('custom')) {
+                    $tree.overlays['custom'] = {};
+                }
+                $tree.overlays['custom'][layerId] = true;
+                return $tree;
+            });
+
+            if (
+                $currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'][layerId] &&
+                $map
+            ) {
+                try {
+                    $map.removeImport(layerId);
+                } catch (e) {
+                    // No reliable way to check if the map is ready to remove sources and layers
+                }
+            }
+
+            if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
+                $currentOverlays.overlays['custom'] = {};
+            }
+            $currentOverlays.overlays['custom'][layerId] = true;
+
+            if (!$customOverlayOrder.includes(layerId)) {
+                $customOverlayOrder = [...$customOverlayOrder, layerId];
+            }
+        }
+    }
+
+    function tryDeleteLayer(node: any, id: string): any {
+        if (node.hasOwnProperty(id)) {
+            delete node[id];
+        }
+        return node;
+    }
+
+    function deleteLayer(layerId: string) {
+        let layer = $customLayers[layerId];
+        if (layer.layerType === 'basemap') {
+            if (layerId === $currentBasemap) {
+                $currentBasemap = defaultBasemap;
+            }
+            if (layerId === $previousBasemap) {
+                $previousBasemap = defaultBasemap;
+            }
+
+            $selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
+                $selectedBasemapTree.basemaps['custom'],
+                layerId
+            );
+            if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
+                $selectedBasemapTree.basemaps = tryDeleteLayer(
+                    $selectedBasemapTree.basemaps,
+                    'custom'
+                );
+            }
+            $customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
+        } else {
+            $currentOverlays.overlays['custom'][layerId] = false;
+            if ($previousOverlays.overlays['custom']) {
+                $previousOverlays.overlays['custom'] = tryDeleteLayer(
+                    $previousOverlays.overlays['custom'],
+                    layerId
+                );
+            }
+
+            $selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
+                $selectedOverlayTree.overlays['custom'],
+                layerId
+            );
+            if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
+                $selectedOverlayTree.overlays = tryDeleteLayer(
+                    $selectedOverlayTree.overlays,
+                    'custom'
+                );
+            }
+            $customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
+
+            if (
+                $currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'][layerId] &&
+                $map
+            ) {
+                try {
+                    $map.removeImport(layerId);
+                } catch (e) {
+                    // No reliable way to check if the map is ready to remove sources and layers
+                }
+            }
+        }
+        $customLayers = tryDeleteLayer($customLayers, layerId);
+    }
+
+    let selectedLayerId: string | undefined = undefined;
+
+    function setDataFromSelectedLayer() {
+        if (selectedLayerId) {
+            const layer = $customLayers[selectedLayerId];
+            name = layer.name;
+            tileUrls = layer.tileUrls;
+            maxZoom = layer.maxZoom;
+            layerType = layer.layerType;
+            resourceType = layer.resourceType;
+        } else {
+            name = '';
+            tileUrls = [''];
+            maxZoom = 20;
+            layerType = 'basemap';
+            resourceType = 'raster';
+        }
+    }
+
+    $: selectedLayerId, setDataFromSelectedLayer();
+</script>
+
+<div class="flex flex-col">
+    {#if $customBasemapOrder.length > 0}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Map size="16" />
+            {$_('layers.label.basemaps')}
+            <div class="grow">
+                <Separator />
+            </div>
+        </div>
+    {/if}
+    <div
+        bind:this={basemapContainer}
+        class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
+    >
+        {#each $customBasemapOrder as id (id)}
+            <div class="flex flex-row items-center gap-2" data-id={id}>
+                <Move size="12" />
+                <span class="grow">{$customLayers[id].name}</span>
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                    <Pencil size="16" />
+                </Button>
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
+    {#if $customOverlayOrder.length > 0}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Layers2 size="16" />
+            {$_('layers.label.overlays')}
+            <div class="grow">
+                <Separator />
+            </div>
+        </div>
+    {/if}
+    <div
+        bind:this={overlayContainer}
+        class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
+    >
+        {#each $customOverlayOrder as id (id)}
+            <div class="flex flex-row items-center gap-2" data-id={id}>
+                <Move size="12" />
+                <span class="grow">{$customLayers[id].name}</span>
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                    <Pencil size="16" />
+                </Button>
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
+
+    <Card.Root>
+        <Card.Header class="p-3">
+            <Card.Title class="text-base">
+                {#if selectedLayerId}
+                    {$_('layers.custom_layers.edit')}
+                {:else}
+                    {$_('layers.custom_layers.new')}
+                {/if}
+            </Card.Title>
+        </Card.Header>
+        <Card.Content class="p-3 pt-0">
+            <fieldset class="flex flex-col gap-2">
+                <Label for="name">{$_('menu.metadata.name')}</Label>
+                <Input bind:value={name} id="name" class="h-8" />
+                <Label for="url">{$_('layers.custom_layers.urls')}</Label>
+                {#each tileUrls as url, i}
+                    <div class="flex flex-row gap-2">
+                        <Input
+                            bind:value={tileUrls[i]}
+                            id="url"
+                            class="h-8"
+                            placeholder={$_('layers.custom_layers.url_placeholder')}
+                        />
+                        {#if tileUrls.length > 1}
+                            <Button
+                                on:click={() =>
+                                    (tileUrls = tileUrls.filter((_, index) => index !== i))}
+                                variant="outline"
+                                class="p-1 h-8"
+                            >
+                                <Minus size="16" />
+                            </Button>
+                        {/if}
+                        {#if i === tileUrls.length - 1}
+                            <Button
+                                on:click={() => (tileUrls = [...tileUrls, ''])}
+                                variant="outline"
+                                class="p-1 h-8"
+                            >
+                                <Plus size="16" />
+                            </Button>
+                        {/if}
+                    </div>
+                {/each}
+                {#if resourceType === 'raster'}
+                    <Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
+                    <Input
+                        type="number"
+                        bind:value={maxZoom}
+                        id="maxZoom"
+                        min={0}
+                        max={22}
+                        class="h-8"
+                    />
+                {/if}
+                <Label>{$_('layers.custom_layers.layer_type')}</Label>
+                <RadioGroup.Root bind:value={layerType} class="flex flex-row">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="basemap" id="basemap" />
+                        <Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="overlay" id="overlay" />
+                        <Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
+                    </div>
+                </RadioGroup.Root>
+                {#if selectedLayerId}
+                    <div class="mt-2 flex flex-row gap-2">
+                        <Button variant="outline" on:click={createLayer} class="grow">
+                            <Save size="16" class="mr-1" />
+                            {$_('layers.custom_layers.update')}
+                        </Button>
+                        <Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
+                            <CircleX size="16" />
+                        </Button>
+                    </div>
+                {:else}
+                    <Button variant="outline" class="mt-2" on:click={createLayer}>
+                        <CirclePlus size="16" class="mr-1" />
+                        {$_('layers.custom_layers.create')}
+                    </Button>
+                {/if}
+            </fieldset>
+        </Card.Content>
+    </Card.Root>
+</div>
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
new file mode 100755
index 0000000..98db64b
--- /dev/null
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+	import LayerTree from './LayerTree.svelte';
+
+	import { Separator } from '$lib/components/ui/separator';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+
+	import { Layers } from 'lucide-svelte';
+
+	import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
+	import { settings } from '$lib/db';
+	import { map } from '$lib/stores';
+	import { get, writable } from 'svelte/store';
+	import { customBasemapUpdate, getLayers } from './utils';
+	import { OverpassLayer } from './OverpassLayer';
+	import OverpassPopup from './OverpassPopup.svelte';
+
+	let container: HTMLDivElement;
+	let overpassLayer: OverpassLayer;
+
+	const {
+		currentBasemap,
+		previousBasemap,
+		currentOverlays,
+		currentOverpassQueries,
+		selectedBasemapTree,
+		selectedOverlayTree,
+		selectedOverpassTree,
+		customLayers,
+		opacities
+	} = settings;
+
+	function setStyle() {
+		if ($map) {
+			let basemap = basemaps.hasOwnProperty($currentBasemap)
+				? basemaps[$currentBasemap]
+				: $customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap];
+			$map.removeImport('basemap');
+			if (typeof basemap === 'string') {
+				$map.addImport({ id: 'basemap', url: basemap }, 'overlays');
+			} else {
+				$map.addImport(
+					{
+						id: 'basemap',
+						data: basemap
+					},
+					'overlays'
+				);
+			}
+		}
+	}
+
+	$: if ($map && ($currentBasemap || $customBasemapUpdate)) {
+		setStyle();
+	}
+
+	function addOverlay(id: string) {
+		try {
+			let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
+			if (typeof overlay === 'string') {
+				$map.addImport({ id, url: overlay });
+			} else {
+				if ($opacities.hasOwnProperty(id)) {
+					overlay = {
+						...overlay,
+						layers: overlay.layers.map((layer) => {
+							if (layer.type === 'raster') {
+								if (!layer.paint) {
+									layer.paint = {};
+								}
+								layer.paint['raster-opacity'] = $opacities[id];
+							}
+							return layer;
+						})
+					};
+				}
+				$map.addImport({
+					id,
+					data: overlay
+				});
+			}
+		} catch (e) {
+			// No reliable way to check if the map is ready to add sources and layers
+		}
+	}
+
+	function updateOverlays() {
+		if ($map && $currentOverlays) {
+			let overlayLayers = getLayers($currentOverlays);
+			try {
+				let activeOverlays = $map
+					.getStyle()
+					.imports.filter((i) => i.id !== 'basemap' && i.id !== 'overlays');
+				let toRemove = activeOverlays.filter((i) => !overlayLayers[i.id]);
+				toRemove.forEach((i) => {
+					$map.removeImport(i.id);
+				});
+				let toAdd = Object.entries(overlayLayers)
+					.filter(([id, selected]) => selected && !activeOverlays.some((j) => j.id === id))
+					.map(([id]) => id);
+				toAdd.forEach((id) => {
+					addOverlay(id);
+				});
+			} catch (e) {
+				// No reliable way to check if the map is ready to add sources and layers
+			}
+		}
+	}
+
+	$: if ($map && $currentOverlays) {
+		updateOverlays();
+	}
+
+	$: if ($map) {
+		if (overpassLayer) {
+			overpassLayer.remove();
+		}
+		overpassLayer = new OverpassLayer($map);
+		overpassLayer.add();
+		$map.on('style.import.load', updateOverlays);
+	}
+
+	let selectedBasemap = writable(get(currentBasemap));
+	selectedBasemap.subscribe((value) => {
+		// Updates coming from radio buttons
+		if (value !== get(currentBasemap)) {
+			previousBasemap.set(get(currentBasemap));
+			currentBasemap.set(value);
+		}
+	});
+	currentBasemap.subscribe((value) => {
+		// Updates coming from the database, or from the user swapping basemaps
+		selectedBasemap.set(value);
+	});
+
+	let open = false;
+	function openLayerControl() {
+		open = true;
+	}
+	function closeLayerControl() {
+		open = false;
+	}
+	let cancelEvents = false;
+</script>
+
+<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		bind:this={container}
+		class="h-full w-full"
+		on:mouseenter={openLayerControl}
+		on:mouseleave={closeLayerControl}
+		on:pointerenter={() => {
+			if (!open) {
+				cancelEvents = true;
+				openLayerControl();
+				setTimeout(() => {
+					cancelEvents = false;
+				}, 500);
+			}
+		}}
+	>
+		<div
+			class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
+				? 'opacity-0 w-0 h-0 delay-0'
+				: 'w-[29px] h-[29px]'}"
+		>
+			<Layers size="20" />
+		</div>
+		<div
+			class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
+				? 'grid-rows-[1fr] grid-cols-[1fr]'
+				: ''} {cancelEvents ? 'pointer-events-none' : ''}"
+		>
+			<ScrollArea>
+				<div class="h-fit">
+					<div class="p-2">
+						<LayerTree
+							layerTree={$selectedBasemapTree}
+							name="basemaps"
+							bind:selected={$selectedBasemap}
+						/>
+					</div>
+					<Separator class="w-full" />
+					<div class="p-2">
+						{#if $currentOverlays}
+							<LayerTree
+								layerTree={$selectedOverlayTree}
+								name="overlays"
+								multiple={true}
+								bind:checked={$currentOverlays}
+							/>
+						{/if}
+					</div>
+					<Separator class="w-full" />
+					<div class="p-2">
+						{#if $currentOverpassQueries}
+							<LayerTree
+								layerTree={$selectedOverpassTree}
+								name="overpass"
+								multiple={true}
+								bind:checked={$currentOverpassQueries}
+							/>
+						{/if}
+					</div>
+				</div>
+			</ScrollArea>
+		</div>
+	</div>
+</CustomControl>
+
+<OverpassPopup />
+
+<svelte:window
+	on:click={(e) => {
+		if (open && !cancelEvents && !container.contains(e.target)) {
+			closeLayerControl();
+		}
+	}}
+/>
diff --git a/website/src/lib/components/layer-control/LayerControlSettings.svelte b/website/src/lib/components/layer-control/LayerControlSettings.svelte
new file mode 100755
index 0000000..1cde4c0
--- /dev/null
+++ b/website/src/lib/components/layer-control/LayerControlSettings.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+	import LayerTree from './LayerTree.svelte';
+
+	import { Separator } from '$lib/components/ui/separator';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Accordion from '$lib/components/ui/accordion';
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+	import { Slider } from '$lib/components/ui/slider';
+
+	import {
+		basemapTree,
+		defaultBasemap,
+		overlays,
+		overlayTree,
+		overpassTree
+	} from '$lib/assets/layers';
+	import { getLayers, isSelected, toggle } from '$lib/components/layer-control/utils';
+	import { settings } from '$lib/db';
+
+	import { _ } from 'svelte-i18n';
+	import { writable } from 'svelte/store';
+	import { map } from '$lib/stores';
+	import CustomLayers from './CustomLayers.svelte';
+
+	const {
+		selectedBasemapTree,
+		selectedOverlayTree,
+		selectedOverpassTree,
+		currentBasemap,
+		currentOverlays,
+		customLayers,
+		opacities
+	} = settings;
+
+	export let open: boolean;
+	let accordionValue: string | string[] | undefined = undefined;
+
+	let selectedOverlay = writable(undefined);
+	let overlayOpacity = writable([1]);
+
+	function setOpacityFromSelection() {
+		if ($selectedOverlay) {
+			let overlayId = $selectedOverlay.value;
+			if ($opacities.hasOwnProperty(overlayId)) {
+				$overlayOpacity = [$opacities[overlayId]];
+			} else {
+				$overlayOpacity = [1];
+			}
+		} else {
+			$overlayOpacity = [1];
+		}
+	}
+
+	$: if ($selectedBasemapTree && $currentBasemap) {
+		if (!isSelected($selectedBasemapTree, $currentBasemap)) {
+			if (!isSelected($selectedBasemapTree, defaultBasemap)) {
+				$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
+			}
+			$currentBasemap = defaultBasemap;
+		}
+	}
+
+	$: if ($selectedOverlayTree && $currentOverlays) {
+		let overlayLayers = getLayers($currentOverlays);
+		let toRemove = Object.entries(overlayLayers).filter(
+			([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
+		);
+		if (toRemove.length > 0) {
+			currentOverlays.update((tree) => {
+				toRemove.forEach(([id]) => {
+					toggle(tree, id);
+				});
+				return tree;
+			});
+		}
+	}
+
+	$: if ($selectedOverlay) {
+		setOpacityFromSelection();
+	}
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Trigger class="hidden" />
+	<Sheet.Content>
+		<Sheet.Header class="h-full">
+			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
+			<ScrollArea class="w-[105%] min-h-full pr-4">
+				<Sheet.Description>
+					{$_('layers.settings_help')}
+				</Sheet.Description>
+				<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
+					<Accordion.Item value="layer-selection" class="flex flex-col">
+						<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
+						<Accordion.Content class="grow flex flex-col border rounded">
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={basemapTree}
+									name="basemapSettings"
+									multiple={true}
+									bind:checked={$selectedBasemapTree}
+								/>
+							</div>
+							<Separator />
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={overlayTree}
+									name="overlaySettings"
+									multiple={true}
+									bind:checked={$selectedOverlayTree}
+								/>
+							</div>
+							<Separator />
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={overpassTree}
+									name="overpassSettings"
+									multiple={true}
+									bind:checked={$selectedOverpassTree}
+								/>
+							</div>
+						</Accordion.Content>
+					</Accordion.Item>
+					<Accordion.Item value="overlay-opacity">
+						<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+						<Accordion.Content class="flex flex-col gap-3 overflow-visible">
+							<div class="flex flex-row gap-6 items-center">
+								<Label>
+									{$_('layers.custom_layers.overlay')}
+								</Label>
+								<Select.Root bind:selected={$selectedOverlay}>
+									<Select.Trigger class="h-8 mr-1">
+										<Select.Value />
+									</Select.Trigger>
+									<Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
+										{#each Object.keys(overlays) as id}
+											{#if isSelected($selectedOverlayTree, id)}
+												<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
+											{/if}
+										{/each}
+										{#each Object.entries($customLayers) as [id, layer]}
+											{#if layer.layerType === 'overlay'}
+												<Select.Item value={id}>{layer.name}</Select.Item>
+											{/if}
+										{/each}
+									</Select.Content>
+								</Select.Root>
+							</div>
+							<Label class="flex flex-row gap-6 items-center">
+								{$_('menu.style.opacity')}
+								<div class="p-2 pr-3 grow">
+									<Slider
+										bind:value={$overlayOpacity}
+										min={0.1}
+										max={1}
+										step={0.1}
+										disabled={$selectedOverlay === undefined}
+										onValueChange={() => {
+											if ($selectedOverlay) {
+												$opacities[$selectedOverlay.value] = $overlayOpacity[0];
+												if ($map) {
+													if ($map.getLayer($selectedOverlay.value)) {
+														$map.removeLayer($selectedOverlay.value);
+														$currentOverlays = $currentOverlays;
+													}
+												}
+											}
+										}}
+									/>
+								</div>
+							</Label>
+						</Accordion.Content>
+					</Accordion.Item>
+					<Accordion.Item value="custom-layers">
+						<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+						<Accordion.Content>
+							<ScrollArea>
+								<CustomLayers />
+							</ScrollArea>
+						</Accordion.Content>
+					</Accordion.Item>
+				</Accordion.Root>
+			</ScrollArea>
+		</Sheet.Header>
+	</Sheet.Content>
+</Sheet.Root>
diff --git a/website/src/lib/components/layer-control/LayerTree.svelte b/website/src/lib/components/layer-control/LayerTree.svelte
new file mode 100755
index 0000000..49ddaba
--- /dev/null
+++ b/website/src/lib/components/layer-control/LayerTree.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import LayerTreeNode from './LayerTreeNode.svelte';
+	import { type LayerTreeType } from '$lib/assets/layers';
+	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+
+	export let layerTree: LayerTreeType;
+	export let name: string;
+	export let selected: string | undefined = undefined;
+	export let multiple: boolean = false;
+
+	export let checked: LayerTreeType = {};
+</script>
+
+<form>
+	<fieldset class="min-w-64 mb-1">
+		<CollapsibleTree nohover={true}>
+			<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
+		</CollapsibleTree>
+	</fieldset>
+</form>
diff --git a/website/src/lib/components/layer-control/LayerTreeNode.svelte b/website/src/lib/components/layer-control/LayerTreeNode.svelte
new file mode 100755
index 0000000..2330394
--- /dev/null
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
+
+	import { type LayerTreeType } from '$lib/assets/layers';
+	import { anySelectedLayer } from './utils';
+
+	import { _ } from 'svelte-i18n';
+	import { settings } from '$lib/db';
+	import { beforeUpdate } from 'svelte';
+
+	export let name: string;
+	export let node: LayerTreeType;
+	export let selected: string | undefined = undefined;
+	export let multiple: boolean = false;
+
+	export let checked: LayerTreeType;
+
+	const { customLayers } = settings;
+
+	beforeUpdate(() => {
+		if (checked !== undefined) {
+			Object.keys(node).forEach((id) => {
+				if (!checked.hasOwnProperty(id)) {
+					if (typeof node[id] == 'boolean') {
+						checked[id] = false;
+					} else {
+						checked[id] = {};
+					}
+				}
+			});
+		}
+	});
+</script>
+
+<div class="flex flex-col gap-[3px]">
+	{#each Object.keys(node) as id}
+		{#if typeof node[id] == 'boolean'}
+			{#if node[id]}
+				<div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
+					{#if multiple}
+						<Checkbox
+							id="{name}-{id}"
+							{name}
+							value={id}
+							bind:checked={checked[id]}
+							class="scale-90"
+							aria-label={$_(`layers.label.${id}`)}
+						/>
+					{:else}
+						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
+					{/if}
+					<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
+						{#if $customLayers.hasOwnProperty(id)}
+							{$customLayers[id].name}
+						{:else}
+							{$_(`layers.label.${id}`)}
+						{/if}
+					</Label>
+				</div>
+			{/if}
+		{:else if anySelectedLayer(node[id])}
+			<CollapsibleTreeNode {id}>
+				<span slot="trigger">{$_(`layers.label.${id}`)}</span>
+				<div slot="content">
+					<svelte:self node={node[id]} {name} bind:selected {multiple} bind:checked={checked[id]} />
+				</div>
+			</CollapsibleTreeNode>
+		{/if}
+	{/each}
+</div>
+
+<style lang="postcss">
+	div :global(input[type='radio']) {
+		@apply appearance-none;
+		@apply w-4 h-4;
+		@apply border-[1.5px] border-primary;
+		@apply rounded-full;
+		@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply cursor-pointer;
+		@apply checked:bg-primary;
+		@apply checked:bg-clip-content;
+		@apply checked:p-0.5;
+	}
+</style>
diff --git a/website/src/lib/components/layer-control/OverpassLayer.ts b/website/src/lib/components/layer-control/OverpassLayer.ts
new file mode 100755
index 0000000..e9c12f2
--- /dev/null
+++ b/website/src/lib/components/layer-control/OverpassLayer.ts
@@ -0,0 +1,314 @@
+import SphericalMercator from "@mapbox/sphericalmercator";
+import { getLayers } from "./utils";
+import mapboxgl from "mapbox-gl";
+import { get, writable } from "svelte/store";
+import { liveQuery } from "dexie";
+import { db, settings } from "$lib/db";
+import { overpassQueryData } from "$lib/assets/layers";
+
+const {
+    currentOverpassQueries
+} = settings;
+
+const mercator = new SphericalMercator({
+    size: 256,
+});
+
+export const overpassPopupPOI = writable<Record<string, any> | null>(null);
+
+export const overpassPopup = new mapboxgl.Popup({
+    closeButton: false,
+    maxWidth: undefined,
+    offset: 15,
+});
+
+let data = writable<GeoJSON.FeatureCollection>({ type: 'FeatureCollection', features: [] });
+
+liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
+    data.set({ type: 'FeatureCollection', features: pois.map((poi) => poi.poi) });
+});
+
+export class OverpassLayer {
+    overpassUrl = 'https://overpass.private.coffee/api/interpreter';
+    minZoom = 12;
+    queryZoom = 12;
+    expirationTime = 7 * 24 * 3600 * 1000;
+    map: mapboxgl.Map;
+
+    currentQueries: Set<string> = new Set();
+    nextQueries: Map<string, { x: number, y: number, queries: string[] }> = new Map();
+
+    unsubscribes: (() => void)[] = [];
+    queryIfNeededBinded = this.queryIfNeeded.bind(this);
+    updateBinded = this.update.bind(this);
+    onHoverBinded = this.onHover.bind(this);
+    maybeHidePopupBinded = this.maybeHidePopup.bind(this);
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+    }
+
+    add() {
+        this.map.on('moveend', this.queryIfNeededBinded);
+        this.map.on('style.import.load', this.updateBinded);
+        this.unsubscribes.push(data.subscribe(this.updateBinded));
+        this.unsubscribes.push(currentOverpassQueries.subscribe(() => {
+            this.updateBinded();
+            this.queryIfNeededBinded();
+        }));
+
+        this.update();
+    }
+
+    queryIfNeeded() {
+        if (this.map.getZoom() >= this.minZoom) {
+            const bounds = this.map.getBounds().toArray();
+            this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+        }
+    }
+
+    update() {
+        this.loadIcons();
+
+        let d = get(data);
+
+        try {
+            let source = this.map.getSource('overpass');
+            if (source) {
+                source.setData(d);
+            } else {
+                this.map.addSource('overpass', {
+                    type: 'geojson',
+                    data: d,
+                });
+            }
+
+            if (!this.map.getLayer('overpass')) {
+                this.map.addLayer({
+                    id: 'overpass',
+                    type: 'symbol',
+                    source: 'overpass',
+                    layout: {
+                        'icon-image': ['get', 'icon'],
+                        'icon-size': 0.25,
+                        'icon-padding': 0,
+                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                    },
+                });
+
+                this.map.on('mouseenter', 'overpass', this.onHoverBinded);
+                this.map.on('click', 'overpass', this.onHoverBinded);
+            }
+
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
+
+    remove() {
+        this.map.off('moveend', this.queryIfNeededBinded);
+        this.map.off('style.import.load', this.updateBinded);
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+
+        try {
+            if (this.map.getLayer('overpass')) {
+                this.map.removeLayer('overpass');
+            }
+
+            if (this.map.getSource('overpass')) {
+                this.map.removeSource('overpass');
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to remove sources and layers
+        }
+    }
+
+    onHover(e: any) {
+        overpassPopupPOI.set({
+            ...e.features[0].properties,
+            sym: overpassQueryData[e.features[0].properties.query].symbol ?? ''
+        });
+        overpassPopup.setLngLat(e.features[0].geometry.coordinates);
+        overpassPopup.addTo(this.map);
+        this.map.on('mousemove', this.maybeHidePopupBinded);
+    }
+
+    maybeHidePopup(e: any) {
+        let poi = get(overpassPopupPOI);
+        if (poi && this.map.project([poi.lon, poi.lat]).dist(this.map.project(e.lngLat)) > 100) {
+            this.hideWaypointPopup();
+        }
+    }
+
+    hideWaypointPopup() {
+        overpassPopupPOI.set(null);
+        overpassPopup.remove();
+
+        this.map.off('mousemove', this.maybeHidePopupBinded);
+    }
+
+    query(bbox: [number, number, number, number]) {
+        let queries = getCurrentQueries();
+        if (queries.length === 0) {
+            return;
+        }
+
+        let tileLimits = mercator.xyz(bbox, this.queryZoom);
+        let time = Date.now();
+
+        for (let x = tileLimits.minX; x <= tileLimits.maxX; x++) {
+            for (let y = tileLimits.minY; y <= tileLimits.maxY; y++) {
+                if (this.currentQueries.has(`${x},${y}`)) {
+                    continue;
+                }
+
+                db.overpasstiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
+                    let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query && time - querytile.time < this.expirationTime));
+                    if (missingQueries.length > 0) {
+                        this.queryTile(x, y, missingQueries);
+                    }
+                });
+            }
+        }
+    }
+
+    queryTile(x: number, y: number, queries: string[]) {
+        if (this.currentQueries.size > 5) {
+            return;
+        }
+
+        this.currentQueries.add(`${x},${y}`);
+
+        const bounds = mercator.bbox(x, y, this.queryZoom);
+        fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
+            .then((response) => {
+                if (response.ok) {
+                    return response.json();
+                }
+                this.currentQueries.delete(`${x},${y}`);
+                return Promise.reject();
+            }, () => (this.currentQueries.delete(`${x},${y}`)))
+            .then((data) => this.storeOverpassData(x, y, queries, data))
+            .catch(() => this.currentQueries.delete(`${x},${y}`));
+    }
+
+    storeOverpassData(x: number, y: number, queries: string[], data: any) {
+        let time = Date.now();
+        let queryTiles = queries.map((query) => ({ x, y, query, time }));
+        let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
+
+        if (data.elements === undefined) {
+            return;
+        }
+
+        for (let element of data.elements) {
+            for (let query of queries) {
+                if (belongsToQuery(element, query)) {
+                    pois.push({
+                        query,
+                        id: element.id,
+                        poi: {
+                            type: 'Feature',
+                            geometry: {
+                                type: 'Point',
+                                coordinates: element.center ? [element.center.lon, element.center.lat] : [element.lon, element.lat],
+                            },
+                            properties: {
+                                id: element.id,
+                                lat: element.center ? element.center.lat : element.lat,
+                                lon: element.center ? element.center.lon : element.lon,
+                                query: query,
+                                icon: `overpass-${query}`,
+                                tags: element.tags
+                            },
+                        }
+                    });
+                }
+            }
+        }
+
+        db.transaction('rw', db.overpasstiles, db.overpassdata, async () => {
+            await db.overpasstiles.bulkPut(queryTiles);
+            await db.overpassdata.bulkPut(pois);
+        });
+
+        this.currentQueries.delete(`${x},${y}`);
+    }
+
+    loadIcons() {
+        let currentQueries = getCurrentQueries();
+        currentQueries.forEach((query) => {
+            if (!this.map.hasImage(`overpass-${query}`)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!this.map.hasImage(`overpass-${query}`)) {
+                        this.map.addImage(`overpass-${query}`, icon);
+                    }
+                }
+
+                // Lucide icons are SVG files with a 24x24 viewBox
+                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+                icon.src = 'data:image/svg+xml,' + encodeURIComponent(`
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                    <circle cx="20" cy="20" r="20" fill="${overpassQueryData[query].icon.color}" />
+                    <g transform="translate(8 8)">
+                    ${overpassQueryData[query].icon.svg.replace('stroke="currentColor"', 'stroke="white"')}
+                    </g>
+                </svg>
+            `);
+            }
+        });
+    }
+}
+
+function getQueryForBounds(bounds: [number, number, number, number], queries: string[]) {
+    return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueries(queries)});out center;`;
+}
+
+function getQueries(queries: string[]) {
+    return queries.map((query) => getQuery(query)).join('');
+}
+
+function getQuery(query: string) {
+    if (Array.isArray(overpassQueryData[query].tags)) {
+        return overpassQueryData[query].tags.map((tags) => getQueryItem(tags)).join('');
+    } else {
+        return getQueryItem(overpassQueryData[query].tags);
+    }
+}
+
+function getQueryItem(tags: Record<string, string | boolean | string[]>) {
+    let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
+    if (arrayEntry !== undefined) {
+        return arrayEntry[1].map((val) => `nwr${Object.entries(tags)
+            .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
+            .join('')};`).join('');
+    } else {
+        return `nwr${Object.entries(tags)
+            .map(([tag, value]) => `[${tag}=${value}]`)
+            .join('')};`;
+    }
+}
+
+function belongsToQuery(element: any, query: string) {
+    if (Array.isArray(overpassQueryData[query].tags)) {
+        return overpassQueryData[query].tags.some((tags) => belongsToQueryItem(element, tags));
+    } else {
+        return belongsToQueryItem(element, overpassQueryData[query].tags);
+    }
+}
+
+function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
+    return Object.entries(tags)
+        .every(([tag, value]) => Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value);
+}
+
+function getCurrentQueries() {
+    let currentQueries = get(currentOverpassQueries);
+    if (currentQueries === undefined) {
+        return [];
+    }
+
+    return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
+}
\ No newline at end of file
diff --git a/website/src/lib/components/layer-control/OverpassPopup.svelte b/website/src/lib/components/layer-control/OverpassPopup.svelte
new file mode 100755
index 0000000..7bb611b
--- /dev/null
+++ b/website/src/lib/components/layer-control/OverpassPopup.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import { overpassPopup, overpassPopupPOI } from './OverpassLayer';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { PencilLine, MapPin } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { dbUtils } from '$lib/db';
+
+	let popupElement: HTMLDivElement;
+
+	onMount(() => {
+		overpassPopup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
+
+	let tags = {};
+	let name = '';
+	$: if ($overpassPopupPOI) {
+		tags = JSON.parse($overpassPopupPOI.tags);
+		if (tags.name !== undefined && tags.name !== '') {
+			name = tags.name;
+		} else {
+			name = $_(`layers.label.${$overpassPopupPOI.query}`);
+		}
+	}
+</script>
+
+<div bind:this={popupElement} class="hidden">
+	{#if $overpassPopupPOI}
+		<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
+			<Card.Header class="p-0">
+				<Card.Title class="text-md">
+					<div class="flex flex-row gap-3">
+						<div class="flex flex-col">
+							{name}
+							<div class="text-muted-foreground text-sm font-normal">
+								{$overpassPopupPOI.lat.toFixed(6)}&deg; {$overpassPopupPOI.lon.toFixed(6)}&deg;
+							</div>
+						</div>
+						<Button
+							class="ml-auto p-1.5 h-8"
+							variant="outline"
+							href="https://www.openstreetmap.org/edit?editor=id&node={$overpassPopupPOI.id}"
+							target="_blank"
+						>
+							<PencilLine size="16" />
+						</Button>
+					</div>
+				</Card.Title>
+			</Card.Header>
+			{#if tags.image || tags['image:0']}
+				<div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<img src={tags.image ?? tags['image:0']} />
+				</div>
+			{/if}
+			<Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
+				<div class="grid grid-cols-[auto_auto] gap-x-3">
+					{#each Object.entries(tags) as [key, value]}
+						{#if key !== 'name' && !key.includes('image')}
+							<span class="font-mono">{key}</span>
+							{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
+								<a href={value} target="_blank" class="text-link underline">{value}</a>
+							{:else if key === 'phone' || key === 'contact:phone'}
+								<a href={'tel:' + value} class="text-link underline">{value}</a>
+							{:else if key === 'email' || key === 'contact:email'}
+								<a href={'mailto:' + value} class="text-link underline">{value}</a>
+							{:else}
+								<span>{value}</span>
+							{/if}
+						{/if}
+					{/each}
+				</div>
+				<Button
+					class="mt-2"
+					variant="outline"
+					disabled={$selection.size === 0}
+					on:click={() => {
+						let desc = Object.entries(tags)
+							.map(([key, value]) => `${key}: ${value}`)
+							.join('\n');
+						dbUtils.addOrUpdateWaypoint({
+							attributes: {
+								lat: $overpassPopupPOI.lat,
+								lon: $overpassPopupPOI.lon
+							},
+							name: name,
+							desc: desc,
+							cmt: desc,
+							sym: $overpassPopupPOI.sym
+						});
+					}}
+				>
+					<MapPin size="16" class="mr-1" />
+					{$_('toolbar.waypoint.add')}
+				</Button>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>
diff --git a/website/src/lib/components/layer-control/utils.ts b/website/src/lib/components/layer-control/utils.ts
new file mode 100755
index 0000000..937f2d5
--- /dev/null
+++ b/website/src/lib/components/layer-control/utils.ts
@@ -0,0 +1,53 @@
+import type { LayerTreeType } from "$lib/assets/layers";
+import { writable } from "svelte/store";
+
+export function anySelectedLayer(node: LayerTreeType) {
+    return Object.keys(node).find((id) => {
+        if (typeof node[id] == "boolean") {
+            if (node[id]) {
+                return true;
+            }
+        } else {
+            if (anySelectedLayer(node[id])) {
+                return true;
+            }
+        }
+        return false;
+    }) !== undefined;
+}
+
+export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
+    Object.keys(node).forEach((id) => {
+        if (typeof node[id] == "boolean") {
+            layers[id] = node[id];
+        } else {
+            getLayers(node[id], layers);
+        }
+    });
+    return layers;
+}
+
+export function isSelected(node: LayerTreeType, id: string) {
+    return Object.keys(node).some((key) => {
+        if (key === id) {
+            return node[key];
+        }
+        if (typeof node[key] !== "boolean" && isSelected(node[key], id)) {
+            return true;
+        }
+        return false;
+    });
+}
+
+export function toggle(node: LayerTreeType, id: string) {
+    Object.keys(node).forEach((key) => {
+        if (key === id) {
+            node[key] = !node[key];
+        } else if (typeof node[key] !== "boolean") {
+            toggle(node[key], id);
+        }
+    });
+    return node;
+}
+
+export const customBasemapUpdate = writable(0);
\ No newline at end of file
diff --git a/website/src/lib/components/street-view-control/Google.ts b/website/src/lib/components/street-view-control/Google.ts
new file mode 100755
index 0000000..3057f25
--- /dev/null
+++ b/website/src/lib/components/street-view-control/Google.ts
@@ -0,0 +1,33 @@
+import { resetCursor, setCrosshairCursor } from "$lib/utils";
+import type mapboxgl from "mapbox-gl";
+
+export class GoogleRedirect {
+    map: mapboxgl.Map;
+    enabled = false;
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+    }
+
+    add() {
+        if (this.enabled) return;
+
+        this.enabled = true;
+        setCrosshairCursor();
+        this.map.on('click', this.openStreetView);
+    }
+
+    remove() {
+        if (!this.enabled) return;
+
+        this.enabled = false;
+        resetCursor();
+        this.map.off('click', this.openStreetView);
+    }
+
+    openStreetView(e) {
+        window.open(
+            `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
+        );
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/street-view-control/Mapillary.ts b/website/src/lib/components/street-view-control/Mapillary.ts
new file mode 100755
index 0000000..7581e65
--- /dev/null
+++ b/website/src/lib/components/street-view-control/Mapillary.ts
@@ -0,0 +1,122 @@
+import mapboxgl from "mapbox-gl";
+import { Viewer } from 'mapillary-js/dist/mapillary.module';
+import 'mapillary-js/dist/mapillary.css';
+import { resetCursor, setPointerCursor } from "$lib/utils";
+
+const mapillarySource = {
+    type: 'vector',
+    tiles: ['https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=MLY|4381405525255083|3204871ec181638c3c31320490f03011'],
+    minzoom: 6,
+    maxzoom: 14,
+};
+
+const mapillarySequenceLayer = {
+    id: 'mapillary-sequence',
+    type: 'line',
+    source: 'mapillary',
+    'source-layer': 'sequence',
+    paint: {
+        'line-color': 'rgb(0, 150, 70)',
+        'line-opacity': 0.7,
+        'line-width': 5,
+    },
+    layout: {
+        'line-cap': 'round',
+        'line-join': 'round',
+    },
+};
+
+const mapillaryImageLayer = {
+    id: 'mapillary-image',
+    type: 'circle',
+    source: 'mapillary',
+    'source-layer': 'image',
+    paint: {
+        'circle-color': 'rgb(0, 150, 70)',
+        'circle-radius': 5,
+        'circle-opacity': 0.7,
+    },
+};
+
+export class MapillaryLayer {
+    map: mapboxgl.Map;
+    popup: mapboxgl.Popup;
+    viewer: Viewer;
+    addBinded = this.add.bind(this);
+    onMouseEnterBinded = this.onMouseEnter.bind(this);
+    onMouseLeaveBinded = this.onMouseLeave.bind(this);
+
+    constructor(map: mapboxgl.Map, container: HTMLElement) {
+        this.map = map;
+
+        this.viewer = new Viewer({
+            accessToken: 'MLY|4381405525255083|3204871ec181638c3c31320490f03011',
+            container,
+        });
+        container.classList.remove('hidden');
+
+        this.popup = new mapboxgl.Popup({
+            closeButton: false,
+            maxWidth: container.style.width,
+        }).setDOMContent(container);
+
+        this.viewer.on('position', async () => {
+            if (this.popup.isOpen()) {
+                let latLng = await this.viewer.getPosition();
+                this.popup.setLngLat(latLng);
+                if (!this.map.getBounds().contains(latLng)) {
+                    this.map.panTo(latLng);
+                }
+            }
+        });
+    }
+
+    add() {
+        if (!this.map.getSource('mapillary')) {
+            this.map.addSource('mapillary', mapillarySource);
+        }
+        if (!this.map.getLayer('mapillary-sequence')) {
+            this.map.addLayer(mapillarySequenceLayer);
+        }
+        if (!this.map.getLayer('mapillary-image')) {
+            this.map.addLayer(mapillaryImageLayer);
+        }
+        this.map.on('style.load', this.addBinded);
+        this.map.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
+        this.map.on('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);
+    }
+
+    remove() {
+        this.map.off('style.load', this.addBinded);
+        this.map.off('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
+        this.map.off('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);
+
+        if (this.map.getLayer('mapillary-image')) {
+            this.map.removeLayer('mapillary-image');
+        }
+        if (this.map.getLayer('mapillary-sequence')) {
+            this.map.removeLayer('mapillary-sequence');
+        }
+        if (this.map.getSource('mapillary')) {
+            this.map.removeSource('mapillary');
+        }
+
+        this.popup.remove();
+    }
+
+    closePopup() {
+        this.popup.remove();
+    }
+
+    onMouseEnter(e: mapboxgl.MapLayerMouseEvent) {
+        this.popup.addTo(this.map).setLngLat(e.lngLat);
+        this.viewer.resize();
+        this.viewer.moveTo(e.features[0].properties.id);
+
+        setPointerCursor();
+    }
+
+    onMouseLeave() {
+        resetCursor();
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/components/street-view-control/StreetViewControl.svelte b/website/src/lib/components/street-view-control/StreetViewControl.svelte
new file mode 100755
index 0000000..92e6be0
--- /dev/null
+++ b/website/src/lib/components/street-view-control/StreetViewControl.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { Toggle } from '$lib/components/ui/toggle';
+	import { PersonStanding, X } from 'lucide-svelte';
+	import { MapillaryLayer } from './Mapillary';
+	import { GoogleRedirect } from './Google';
+	import { map, streetViewEnabled } from '$lib/stores';
+	import { settings } from '$lib/db';
+	import { _ } from 'svelte-i18n';
+
+	const { streetViewSource } = settings;
+
+	let googleRedirect: GoogleRedirect;
+	let mapillaryLayer: MapillaryLayer;
+	let container: HTMLElement;
+
+	$: if ($map) {
+		googleRedirect = new GoogleRedirect($map);
+		mapillaryLayer = new MapillaryLayer($map, container);
+	}
+
+	$: if (mapillaryLayer) {
+		if ($streetViewSource === 'mapillary') {
+			googleRedirect.remove();
+			if ($streetViewEnabled) {
+				mapillaryLayer.add();
+			} else {
+				mapillaryLayer.remove();
+			}
+		} else {
+			mapillaryLayer.remove();
+			if ($streetViewEnabled) {
+				googleRedirect.add();
+			} else {
+				googleRedirect.remove();
+			}
+		}
+	}
+</script>
+
+<CustomControl class="w-[29px] h-[29px] shrink-0">
+	<Tooltip class="w-full h-full" side="left" label={$_('menu.toggle_street_view')}>
+		<Toggle
+			bind:pressed={$streetViewEnabled}
+			class="w-full h-full rounded p-0"
+			aria-label={$_('menu.toggle_street_view')}
+		>
+			<PersonStanding size="22" />
+		</Toggle>
+	</Tooltip>
+</CustomControl>
+
+<div
+	bind:this={container}
+	class="hidden relative w-[50vw] h-[40vh] rounded-md border-background border-2"
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="absolute top-0 right-0 z-10 bg-background p-1 rounded-bl-md cursor-pointer"
+		on:click={() => {
+			if (mapillaryLayer) {
+				mapillaryLayer.closePopup();
+			}
+		}}
+	>
+		<X size="16" />
+	</div>
+</div>
diff --git a/website/src/lib/components/toolbar/Toolbar.svelte b/website/src/lib/components/toolbar/Toolbar.svelte
new file mode 100755
index 0000000..7b8aab2
--- /dev/null
+++ b/website/src/lib/components/toolbar/Toolbar.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Tool } from '$lib/stores';
+	import ToolbarItem from './ToolbarItem.svelte';
+	import {
+		Group,
+		CalendarClock,
+		Pencil,
+		SquareDashedMousePointer,
+		Ungroup,
+		MapPin,
+		Filter,
+		Scissors,
+		MountainSnow
+	} from 'lucide-svelte';
+
+	import { _ } from 'svelte-i18n';
+	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
+</script>
+
+<div class="flex flex-row w-full items-center pr-12">
+	<div
+		class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
+			''}"
+	>
+		<ToolbarItem tool={Tool.ROUTING} label={$_('toolbar.routing.tooltip')}>
+			<Pencil slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.WAYPOINT} label={$_('toolbar.waypoint.tooltip')}>
+			<MapPin slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.SCISSORS} label={$_('toolbar.scissors.tooltip')}>
+			<Scissors slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.TIME} label={$_('toolbar.time.tooltip')}>
+			<CalendarClock slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.MERGE} label={$_('toolbar.merge.tooltip')}>
+			<Group slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.EXTRACT} label={$_('toolbar.extract.tooltip')}>
+			<Ungroup slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.ELEVATION} label={$_('toolbar.elevation.button')}>
+			<MountainSnow slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.REDUCE} label={$_('toolbar.reduce.tooltip')}>
+			<Filter slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.CLEAN} label={$_('toolbar.clean.tooltip')}>
+			<SquareDashedMousePointer slot="icon" size="18" />
+		</ToolbarItem>
+	</div>
+	<ToolbarItemMenu class={$$props.class ?? ''} />
+</div>
diff --git a/website/src/lib/components/toolbar/ToolbarItem.svelte b/website/src/lib/components/toolbar/ToolbarItem.svelte
new file mode 100755
index 0000000..02acf26
--- /dev/null
+++ b/website/src/lib/components/toolbar/ToolbarItem.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { currentTool, type Tool } from '$lib/stores';
+
+	export let tool: Tool;
+	export let label: string;
+
+	function toggleTool() {
+		currentTool.update((current) => (current === tool ? null : tool));
+	}
+</script>
+
+<Tooltip.Root openDelay={300}>
+	<Tooltip.Trigger asChild let:builder>
+		<Button
+			builders={[builder]}
+			variant="ghost"
+			class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
+			on:click={toggleTool}
+			aria-label={label}
+		>
+			<slot name="icon" />
+		</Button>
+	</Tooltip.Trigger>
+	<Tooltip.Content side="right">
+		<span>{label}</span>
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/website/src/lib/components/toolbar/ToolbarItemMenu.svelte b/website/src/lib/components/toolbar/ToolbarItemMenu.svelte
new file mode 100755
index 0000000..2c4534a
--- /dev/null
+++ b/website/src/lib/components/toolbar/ToolbarItemMenu.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Tool, currentTool } from '$lib/stores';
+	import { settings } from '$lib/db';
+	import { flyAndScale } from '$lib/utils';
+	import * as Card from '$lib/components/ui/card';
+	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+	import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+	import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+	import Time from '$lib/components/toolbar/tools/Time.svelte';
+	import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+	import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+	import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+	import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+	import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+	import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+
+	const { minimizeRoutingMenu } = settings;
+
+	let popupElement: HTMLElement;
+	let popup: mapboxgl.Popup;
+
+	onMount(() => {
+		popup = new mapboxgl.Popup({
+			closeButton: false,
+			maxWidth: undefined
+		});
+		popup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
+</script>
+
+{#if $currentTool !== null}
+	<div
+		in:flyAndScale={{ x: -2, y: 0, duration: 100 }}
+		class="translate-x-1 h-full {$$props.class ?? ''}"
+	>
+		<div class="rounded-md shadow-md pointer-events-auto">
+			<Card.Root class="rounded-md border-none">
+				<Card.Content class="p-2.5">
+					{#if $currentTool === Tool.ROUTING}
+						<Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
+					{:else if $currentTool === Tool.SCISSORS}
+						<Scissors />
+					{:else if $currentTool === Tool.WAYPOINT}
+						<Waypoint />
+					{:else if $currentTool === Tool.TIME}
+						<Time />
+					{:else if $currentTool === Tool.MERGE}
+						<Merge />
+					{:else if $currentTool === Tool.ELEVATION}
+						<Elevation />
+					{:else if $currentTool === Tool.EXTRACT}
+						<Extract />
+					{:else if $currentTool === Tool.CLEAN}
+						<Clean />
+					{:else if $currentTool === Tool.REDUCE}
+						<Reduce />
+					{/if}
+				</Card.Content>
+			</Card.Root>
+		</div>
+	</div>
+{/if}
+
+<svelte:window
+	on:keydown={(e) => {
+		if ($currentTool !== null && e.key === 'Escape') {
+			currentTool.set(null);
+		}
+	}}
+/>
+
+<RoutingControlPopup bind:element={popupElement} />
diff --git a/website/src/lib/components/toolbar/tools/Clean.svelte b/website/src/lib/components/toolbar/tools/Clean.svelte
new file mode 100755
index 0000000..04da25c
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -0,0 +1,188 @@
+<script lang="ts" context="module">
+	enum CleanType {
+		INSIDE = 'inside',
+		OUTSIDE = 'outside'
+	}
+</script>
+
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { Button } from '$lib/components/ui/button';
+	import Help from '$lib/components/Help.svelte';
+	import { _, locale } from 'svelte-i18n';
+	import { onDestroy, onMount } from 'svelte';
+	import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { Trash2 } from 'lucide-svelte';
+	import { map } from '$lib/stores';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { dbUtils } from '$lib/db';
+
+	let cleanType = CleanType.INSIDE;
+	let deleteTrackpoints = true;
+	let deleteWaypoints = true;
+	let rectangleCoordinates: mapboxgl.LngLat[] = [];
+
+	function updateRectangle() {
+		if ($map) {
+			if (rectangleCoordinates.length != 2) {
+				if ($map.getLayer('rectangle')) {
+					$map.removeLayer('rectangle');
+				}
+			} else {
+				let data = {
+					type: 'Feature',
+					geometry: {
+						type: 'Polygon',
+						coordinates: [
+							[
+								[rectangleCoordinates[0].lng, rectangleCoordinates[0].lat],
+								[rectangleCoordinates[1].lng, rectangleCoordinates[0].lat],
+								[rectangleCoordinates[1].lng, rectangleCoordinates[1].lat],
+								[rectangleCoordinates[0].lng, rectangleCoordinates[1].lat],
+								[rectangleCoordinates[0].lng, rectangleCoordinates[0].lat]
+							]
+						]
+					}
+				};
+				let source = $map.getSource('rectangle');
+				if (source) {
+					source.setData(data);
+				} else {
+					$map.addSource('rectangle', {
+						type: 'geojson',
+						data: data
+					});
+				}
+				if (!$map.getLayer('rectangle')) {
+					$map.addLayer({
+						id: 'rectangle',
+						type: 'fill',
+						source: 'rectangle',
+						paint: {
+							'fill-color': 'SteelBlue',
+							'fill-opacity': 0.5
+						}
+					});
+				}
+			}
+		}
+	}
+
+	$: if (rectangleCoordinates) {
+		updateRectangle();
+	}
+
+	let mousedown = false;
+	function onMouseDown(e: any) {
+		mousedown = true;
+		rectangleCoordinates = [e.lngLat, e.lngLat];
+	}
+
+	function onMouseMove(e: any) {
+		if (mousedown) {
+			rectangleCoordinates[1] = e.lngLat;
+		}
+	}
+
+	function onMouseUp(e: any) {
+		mousedown = false;
+	}
+
+	onMount(() => {
+		setCrosshairCursor();
+	});
+
+	$: if ($map) {
+		$map.on('mousedown', onMouseDown);
+		$map.on('mousemove', onMouseMove);
+		$map.on('mouseup', onMouseUp);
+		$map.on('touchstart', onMouseDown);
+		$map.on('touchmove', onMouseMove);
+		$map.on('touchend', onMouseUp);
+		$map.dragPan.disable();
+	}
+
+	onDestroy(() => {
+		resetCursor();
+		if ($map) {
+			$map.off('mousedown', onMouseDown);
+			$map.off('mousemove', onMouseMove);
+			$map.off('mouseup', onMouseUp);
+			$map.off('touchstart', onMouseDown);
+			$map.off('touchmove', onMouseMove);
+			$map.off('touchend', onMouseUp);
+			$map.dragPan.enable();
+
+			if ($map.getLayer('rectangle')) {
+				$map.removeLayer('rectangle');
+			}
+			if ($map.getSource('rectangle')) {
+				$map.removeSource('rectangle');
+			}
+		}
+	});
+
+	$: validSelection = $selection.size > 0;
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
+	<fieldset class="flex flex-col gap-3">
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
+			<Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
+			<Label for="delete-trkpt">
+				{$_('toolbar.clean.delete_trackpoints')}
+			</Label>
+		</div>
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
+			<Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
+			<Label for="delete-wpt">
+				{$_('toolbar.clean.delete_waypoints')}
+			</Label>
+		</div>
+		<RadioGroup.Root bind:value={cleanType}>
+			<Label class="flex flex-row items-center gap-2">
+				<RadioGroup.Item value={CleanType.INSIDE} />
+				{$_('toolbar.clean.delete_inside')}
+			</Label>
+			<Label class="flex flex-row items-center gap-2">
+				<RadioGroup.Item value={CleanType.OUTSIDE} />
+				{$_('toolbar.clean.delete_outside')}
+			</Label>
+		</RadioGroup.Root>
+	</fieldset>
+	<Button
+		variant="outline"
+		class="w-full"
+		disabled={!validSelection || rectangleCoordinates.length != 2}
+		on:click={() => {
+			dbUtils.cleanSelection(
+				[
+					{
+						lat: Math.min(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
+						lon: Math.min(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng)
+					},
+					{
+						lat: Math.max(rectangleCoordinates[0].lat, rectangleCoordinates[1].lat),
+						lon: Math.max(rectangleCoordinates[0].lng, rectangleCoordinates[1].lng)
+					}
+				],
+				cleanType === CleanType.INSIDE,
+				deleteTrackpoints,
+				deleteWaypoints
+			);
+			rectangleCoordinates = [];
+		}}
+	>
+		<Trash2 size="16" class="mr-1" />
+		{$_('toolbar.clean.button')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/clean')}>
+		{#if validSelection}
+			{$_('toolbar.clean.help')}
+		{:else}
+			{$_('toolbar.clean.help_no_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/Elevation.svelte b/website/src/lib/components/toolbar/tools/Elevation.svelte
new file mode 100755
index 0000000..2c920e7
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { selection } from '$lib/components/file-list/Selection';
+	import Help from '$lib/components/Help.svelte';
+	import { MountainSnow } from 'lucide-svelte';
+	import { dbUtils } from '$lib/db';
+	import { map } from '$lib/stores';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
+
+	$: validSelection = $selection.size > 0;
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<Button
+		variant="outline"
+		class="whitespace-normal h-fit"
+		disabled={!validSelection}
+		on:click={async () => {
+			if ($map) {
+				dbUtils.addElevationToSelection($map);
+			}
+		}}
+	>
+		<MountainSnow size="16" class="mr-1 shrink-0" />
+		{$_('toolbar.elevation.button')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/elevation')}>
+		{#if validSelection}
+			{$_('toolbar.elevation.help')}
+		{:else}
+			{$_('toolbar.elevation.help_no_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/Extract.svelte b/website/src/lib/components/toolbar/tools/Extract.svelte
new file mode 100755
index 0000000..c101be0
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Extract.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Ungroup } from 'lucide-svelte';
+	import { selection } from '$lib/components/file-list/Selection';
+	import {
+		ListFileItem,
+		ListTrackItem,
+		ListTrackSegmentItem,
+		ListWaypointItem,
+		ListWaypointsItem
+	} from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { dbUtils, getFile } from '$lib/db';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
+
+	$: validSelection =
+		$selection.size > 0 &&
+		$selection.getSelected().every((item) => {
+			if (
+				item instanceof ListWaypointsItem ||
+				item instanceof ListWaypointItem ||
+				item instanceof ListTrackSegmentItem
+			) {
+				return false;
+			}
+			let file = getFile(item.getFileId());
+			if (file) {
+				if (item instanceof ListFileItem) {
+					return file.getSegments().length > 1;
+				} else if (item instanceof ListTrackItem) {
+					if (item.getTrackIndex() < file.trk.length) {
+						return file.trk[item.getTrackIndex()].getSegments().length > 1;
+					}
+				}
+			}
+			return false;
+		});
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<Button variant="outline" disabled={!validSelection} on:click={dbUtils.extractSelection}>
+		<Ungroup size="16" class="mr-1" />
+		{$_('toolbar.extract.button')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/extract')}>
+		{#if validSelection}
+			{$_('toolbar.extract.help')}
+		{:else}
+			{$_('toolbar.extract.help_invalid_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
new file mode 100755
index 0000000..57c2c90
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -0,0 +1,105 @@
+<script lang="ts" context="module">
+	enum MergeType {
+		TRACES = 'traces',
+		CONTENTS = 'contents'
+	}
+</script>
+
+<script lang="ts">
+	import { ListFileItem, ListTrackItem } from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { Button } from '$lib/components/ui/button';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { _, locale } from 'svelte-i18n';
+	import { dbUtils, getFile } from '$lib/db';
+	import { Group } from 'lucide-svelte';
+	import { getURLForLanguage } from '$lib/utils';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+
+	let canMergeTraces = false;
+	let canMergeContents = false;
+
+	$: if ($selection.size > 1) {
+		canMergeTraces = true;
+	} else if ($selection.size === 1) {
+		let selected = $selection.getSelected()[0];
+		if (selected instanceof ListFileItem) {
+			let file = getFile(selected.getFileId());
+			if (file) {
+				canMergeTraces = file.getSegments().length > 1;
+			} else {
+				canMergeTraces = false;
+			}
+		} else if (selected instanceof ListTrackItem) {
+			let trackIndex = selected.getTrackIndex();
+			let file = getFile(selected.getFileId());
+			if (file && trackIndex < file.trk.length) {
+				canMergeTraces = file.trk[trackIndex].getSegments().length > 1;
+			} else {
+				canMergeTraces = false;
+			}
+		} else {
+			canMergeContents = false;
+		}
+	}
+
+	$: canMergeContents =
+		$selection.size > 1 &&
+		$selection
+			.getSelected()
+			.some((item) => item instanceof ListFileItem || item instanceof ListTrackItem);
+
+	let mergeType = MergeType.TRACES;
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<RadioGroup.Root bind:value={mergeType}>
+		<Label class="flex flex-row items-center gap-2 leading-5">
+			<RadioGroup.Item value={MergeType.TRACES} />
+			{$_('toolbar.merge.merge_traces')}
+		</Label>
+		<Label class="flex flex-row items-center gap-2 leading-5">
+			<RadioGroup.Item value={MergeType.CONTENTS} />
+			{$_('toolbar.merge.merge_contents')}
+		</Label>
+	</RadioGroup.Root>
+	<Button
+		variant="outline"
+		class="whitespace-normal h-fit"
+		disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
+			(mergeType === MergeType.CONTENTS && !canMergeContents)}
+		on:click={() => {
+			dbUtils.mergeSelection(mergeType === MergeType.TRACES);
+		}}
+	>
+		<Group size="16" class="mr-1 shrink-0" />
+		{$_('toolbar.merge.merge_selection')}
+	</Button>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/merge')}>
+		{#if mergeType === MergeType.TRACES && canMergeTraces}
+			{$_('toolbar.merge.help_merge_traces')}
+		{:else if mergeType === MergeType.TRACES && !canMergeTraces}
+			{$_('toolbar.merge.help_cannot_merge_traces')}
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+			<Shortcut
+				ctrl={true}
+				click={true}
+				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+			/>
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
+		{:else if mergeType === MergeType.CONTENTS && canMergeContents}
+			{$_('toolbar.merge.help_merge_contents')}
+		{:else if mergeType === MergeType.CONTENTS && !canMergeContents}
+			{$_('toolbar.merge.help_cannot_merge_contents')}
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
+			<Shortcut
+				ctrl={true}
+				click={true}
+				class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
+			/>
+			{$_('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/Reduce.svelte b/website/src/lib/components/toolbar/tools/Reduce.svelte
new file mode 100755
index 0000000..ef4210a
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Reduce.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { Slider } from '$lib/components/ui/slider';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { ListItem, ListRootItem, ListTrackSegmentItem } from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { Filter } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+	import WithUnits from '$lib/components/WithUnits.svelte';
+	import { dbUtils, fileObservers } from '$lib/db';
+	import { map } from '$lib/stores';
+	import { onDestroy } from 'svelte';
+	import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
+	import { derived } from 'svelte/store';
+	import { getURLForLanguage } from '$lib/utils';
+
+	let sliderValue = [50];
+	let maxPoints = 0;
+	let currentPoints = 0;
+
+	$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+
+	$: tolerance = 2 ** (sliderValue[0] / (100 / Math.log2(10000)));
+
+	let simplified = new Map<string, [ListItem, number, SimplifiedTrackPoint[]]>();
+	let unsubscribes = new Map<string, () => void>();
+
+	function update() {
+		maxPoints = 0;
+		currentPoints = 0;
+
+		let data: GeoJSON.FeatureCollection = {
+			type: 'FeatureCollection',
+			features: []
+		};
+
+		simplified.forEach(([item, maxPts, points], itemFullId) => {
+			maxPoints += maxPts;
+
+			let current = points.filter(
+				(point) => point.distance === undefined || point.distance >= tolerance
+			);
+			currentPoints += current.length;
+
+			data.features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'LineString',
+					coordinates: current.map((point) => [
+						point.point.getLongitude(),
+						point.point.getLatitude()
+					])
+				},
+				properties: {}
+			});
+		});
+
+		if ($map) {
+			let source = $map.getSource('simplified');
+			if (source) {
+				source.setData(data);
+			} else {
+				$map.addSource('simplified', {
+					type: 'geojson',
+					data: data
+				});
+			}
+			if (!$map.getLayer('simplified')) {
+				$map.addLayer({
+					id: 'simplified',
+					type: 'line',
+					source: 'simplified',
+					paint: {
+						'line-color': 'white',
+						'line-width': 3
+					}
+				});
+			} else {
+				$map.moveLayer('simplified');
+			}
+		}
+	}
+
+	$: if ($fileObservers) {
+		unsubscribes.forEach((unsubscribe, fileId) => {
+			if (!$fileObservers.has(fileId)) {
+				unsubscribe();
+				unsubscribes.delete(fileId);
+			}
+		});
+		$fileObservers.forEach((fileStore, fileId) => {
+			if (!unsubscribes.has(fileId)) {
+				let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [fs, sel]).subscribe(
+					([fs, sel]) => {
+						if (fs) {
+							fs.file.forEachSegment((segment, trackIndex, segmentIndex) => {
+								let segmentItem = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex);
+								if (sel.hasAnyParent(segmentItem)) {
+									let statistics = fs.statistics.getStatisticsFor(segmentItem);
+									simplified.set(segmentItem.getFullId(), [
+										segmentItem,
+										statistics.local.points.length,
+										ramerDouglasPeucker(statistics.local.points, 1)
+									]);
+									update();
+								} else if (simplified.has(segmentItem.getFullId())) {
+									simplified.delete(segmentItem.getFullId());
+									update();
+								}
+							});
+						}
+					}
+				);
+				unsubscribes.set(fileId, unsubscribe);
+			}
+		});
+	}
+
+	$: if (tolerance) {
+		update();
+	}
+
+	onDestroy(() => {
+		if ($map) {
+			if ($map.getLayer('simplified')) {
+				$map.removeLayer('simplified');
+			}
+			if ($map.getSource('simplified')) {
+				$map.removeSource('simplified');
+			}
+		}
+		unsubscribes.forEach((unsubscribe) => unsubscribe());
+		simplified.clear();
+	});
+
+	function reduce() {
+		let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
+		simplified.forEach(([item, maxPts, points], itemFullId) => {
+			itemsAndPoints.set(
+				item,
+				points
+					.filter((point) => point.distance === undefined || point.distance >= tolerance)
+					.map((point) => point.point)
+			);
+		});
+		dbUtils.reduce(itemsAndPoints);
+	}
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<div class="p-2">
+		<Slider bind:value={sliderValue} min={0} max={100} step={1} />
+	</div>
+	<Label class="flex flex-row justify-between">
+		<span>{$_('toolbar.reduce.tolerance')}</span>
+		<WithUnits value={tolerance / 1000} type="distance" decimals={3} class="font-normal" />
+	</Label>
+	<Label class="flex flex-row justify-between">
+		<span>{$_('toolbar.reduce.number_of_points')}</span>
+		<span class="font-normal">{currentPoints}/{maxPoints}</span>
+	</Label>
+	<Button variant="outline" disabled={!validSelection} on:click={reduce}>
+		<Filter size="16" class="mr-1" />
+		{$_('toolbar.reduce.button')}
+	</Button>
+
+	<Help link={getURLForLanguage($locale, '/help/toolbar/minify')}>
+		{#if validSelection}
+			{$_('toolbar.reduce.help')}
+		{:else}
+			{$_('toolbar.reduce.help_no_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
new file mode 100755
index 0000000..a932114
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -0,0 +1,393 @@
+<script lang="ts">
+	import DatePicker from '$lib/components/ui/date-picker/DatePicker.svelte';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import TimePicker from '$lib/components/ui/time-picker/TimePicker.svelte';
+	import { dbUtils, settings } from '$lib/db';
+	import { gpxStatistics } from '$lib/stores';
+	import {
+		distancePerHourToSecondsPerDistance,
+		getConvertedVelocity,
+		milesToKilometers,
+		nauticalMilesToKilometers
+	} from '$lib/units';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from 'lucide-svelte';
+	import { tick } from 'svelte';
+	import { _, locale } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import { selection } from '$lib/components/file-list/Selection';
+	import {
+		ListFileItem,
+		ListRootItem,
+		ListTrackItem,
+		ListTrackSegmentItem
+	} from '$lib/components/file-list/FileList';
+	import Help from '$lib/components/Help.svelte';
+	import { getURLForLanguage } from '$lib/utils';
+
+	let startDate: DateValue | undefined = undefined;
+	let startTime: string | undefined = undefined;
+	let endDate: DateValue | undefined = undefined;
+	let endTime: string | undefined = undefined;
+	let movingTime: number | undefined = undefined;
+	let speed: number | undefined = undefined;
+	let artificial = false;
+
+	function toCalendarDate(date: Date): CalendarDate {
+		return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+	}
+
+	function toTimeString(date: Date): string {
+		return date.toTimeString().split(' ')[0];
+	}
+
+	const { velocityUnits, distanceUnits } = settings;
+
+	function setSpeed(value: number) {
+		let speedValue = getConvertedVelocity(value);
+		if ($velocityUnits === 'speed') {
+			speedValue = parseFloat(speedValue.toFixed(2));
+		}
+		speed = speedValue;
+	}
+
+	function setGPXData() {
+		if ($gpxStatistics.global.time.start) {
+			startDate = toCalendarDate($gpxStatistics.global.time.start);
+			startTime = toTimeString($gpxStatistics.global.time.start);
+		} else {
+			startDate = undefined;
+			startTime = undefined;
+		}
+		if ($gpxStatistics.global.time.end) {
+			endDate = toCalendarDate($gpxStatistics.global.time.end);
+			endTime = toTimeString($gpxStatistics.global.time.end);
+		} else {
+			endDate = undefined;
+			endTime = undefined;
+		}
+		if ($gpxStatistics.global.time.moving) {
+			movingTime = $gpxStatistics.global.time.moving;
+		} else {
+			movingTime = undefined;
+		}
+		if ($gpxStatistics.global.speed.moving) {
+			setSpeed($gpxStatistics.global.speed.moving);
+		} else {
+			speed = undefined;
+		}
+	}
+
+	$: if ($gpxStatistics && $velocityUnits && $distanceUnits) {
+		setGPXData();
+	}
+
+	function getDate(date: DateValue, time: string): Date {
+		if (date === undefined) {
+			return new Date();
+		}
+		let [hours, minutes, seconds] = time.split(':').map((x) => parseInt(x));
+		if (seconds === undefined) {
+			seconds = 0;
+		}
+		return new Date(date.year, date.month - 1, date.day, hours, minutes, seconds);
+	}
+
+	function updateEnd() {
+		if (startDate && movingTime !== undefined) {
+			if (startTime === undefined) {
+				startTime = '00:00:00';
+			}
+			let start = getDate(startDate, startTime);
+			let ratio =
+				$gpxStatistics.global.time.moving > 0
+					? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
+					: 1;
+			let end = new Date(start.getTime() + ratio * movingTime * 1000);
+			endDate = toCalendarDate(end);
+			endTime = toTimeString(end);
+		}
+	}
+
+	function updateStart() {
+		if (endDate && movingTime !== undefined) {
+			if (endTime === undefined) {
+				endTime = '00:00:00';
+			}
+			let end = getDate(endDate, endTime);
+			let ratio =
+				$gpxStatistics.global.time.moving > 0
+					? $gpxStatistics.global.time.total / $gpxStatistics.global.time.moving
+					: 1;
+			let start = new Date(end.getTime() - ratio * movingTime * 1000);
+			startDate = toCalendarDate(start);
+			startTime = toTimeString(start);
+		}
+	}
+
+	function getSpeed() {
+		if (speed === undefined) {
+			return undefined;
+		}
+
+		let speedValue = speed;
+		if ($velocityUnits === 'pace') {
+			speedValue = distancePerHourToSecondsPerDistance(speed);
+		}
+		if ($distanceUnits === 'imperial') {
+			speedValue = milesToKilometers(speedValue);
+		} else if ($distanceUnits === 'nautical') {
+			speedValue = nauticalMilesToKilometers(speedValue);
+		}
+		return speedValue;
+	}
+
+	function updateDataFromSpeed() {
+		let speedValue = getSpeed();
+		if (speedValue === undefined) {
+			return;
+		}
+
+		let distance =
+			$gpxStatistics.global.distance.moving > 0
+				? $gpxStatistics.global.distance.moving
+				: $gpxStatistics.global.distance.total;
+		movingTime = (distance / speedValue) * 3600;
+
+		updateEnd();
+	}
+
+	function updateDataFromTotalTime() {
+		if (movingTime === undefined) {
+			return;
+		}
+		let distance =
+			$gpxStatistics.global.distance.moving > 0
+				? $gpxStatistics.global.distance.moving
+				: $gpxStatistics.global.distance.total;
+		setSpeed(distance / (movingTime / 3600));
+		updateEnd();
+	}
+
+	$: canUpdate =
+		$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<fieldset class="flex flex-col gap-2">
+		<div class="flex flex-row gap-2 justify-center">
+			<div class="flex flex-col gap-2 grow">
+				<Label for="speed" class="flex flex-row">
+					<Zap size="16" class="mr-1" />
+					{#if $velocityUnits === 'speed'}
+						{$_('quantities.speed')}
+					{:else}
+						{$_('quantities.pace')}
+					{/if}
+				</Label>
+				<div class="flex flex-row gap-1 items-center">
+					{#if $velocityUnits === 'speed'}
+						<Input
+							id="speed"
+							type="number"
+							step={0.01}
+							min={0.01}
+							disabled={!canUpdate}
+							bind:value={speed}
+							on:change={updateDataFromSpeed}
+						/>
+						<span class="text-sm shrink-0">
+							{#if $distanceUnits === 'imperial'}
+								{$_('units.miles_per_hour')}
+							{:else if $distanceUnits === 'metric'}
+								{$_('units.kilometers_per_hour')}
+							{:else if $distanceUnits === 'nautical'}
+								{$_('units.knots')}
+							{/if}
+						</span>
+					{:else}
+						<TimePicker
+							bind:value={speed}
+							showHours={false}
+							disabled={!canUpdate}
+							onChange={updateDataFromSpeed}
+						/>
+						<span class="text-sm shrink-0">
+							{#if $distanceUnits === 'imperial'}
+								{$_('units.minutes_per_mile')}
+							{:else if $distanceUnits === 'metric'}
+								{$_('units.minutes_per_kilometer')}
+							{:else if $distanceUnits === 'nautical'}
+								{$_('units.minutes_per_nautical_mile')}
+							{/if}
+						</span>
+					{/if}
+				</div>
+			</div>
+			<div class="flex flex-col gap-2 grow">
+				<Label for="duration" class="flex flex-row">
+					<Timer size="16" class="mr-1" />
+					{$_('toolbar.time.total_time')}
+				</Label>
+				<TimePicker
+					bind:value={movingTime}
+					disabled={!canUpdate}
+					onChange={updateDataFromTotalTime}
+				/>
+			</div>
+		</div>
+		<Label class="flex flex-row">
+			<CirclePlay size="16" class="mr-1" />
+			{$_('toolbar.time.start')}
+		</Label>
+		<div class="flex flex-row gap-2">
+			<DatePicker
+				bind:value={startDate}
+				disabled={!canUpdate}
+				locale={get(locale) ?? 'fr'}
+				placeholder={$_('toolbar.time.pick_date')}
+				class="w-fit grow"
+				onValueChange={async () => {
+					await tick();
+					updateEnd();
+				}}
+			/>
+			<input
+				type="time"
+				step={1}
+				disabled={!canUpdate}
+				bind:value={startTime}
+				class="w-fit"
+				on:change={updateEnd}
+			/>
+		</div>
+		<Label class="flex flex-row">
+			<CircleStop size="16" class="mr-1" />
+			{$_('toolbar.time.end')}
+		</Label>
+		<div class="flex flex-row gap-2">
+			<DatePicker
+				bind:value={endDate}
+				disabled={!canUpdate}
+				locale={get(locale) ?? 'fr'}
+				placeholder={$_('toolbar.time.pick_date')}
+				class="w-fit grow"
+				onValueChange={async () => {
+					await tick();
+					updateStart();
+				}}
+			/>
+			<input
+				type="time"
+				step={1}
+				disabled={!canUpdate}
+				bind:value={endTime}
+				class="w-fit"
+				on:change={updateStart}
+			/>
+		</div>
+		{#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
+			<div class="mt-0.5 flex flex-row gap-1 items-center">
+				<Checkbox id="artificial-time" bind:checked={artificial} disabled={!canUpdate} />
+				<Label for="artificial-time">
+					{$_('toolbar.time.artificial')}
+				</Label>
+			</div>
+		{/if}
+	</fieldset>
+	<div class="flex flex-row gap-2 items-center">
+		<Button
+			variant="outline"
+			disabled={!canUpdate}
+			class="grow whitespace-normal h-fit"
+			on:click={() => {
+				let effectiveSpeed = getSpeed();
+				if (startDate === undefined || startTime === undefined || effectiveSpeed === undefined) {
+					return;
+				}
+
+				if (Math.abs(effectiveSpeed - $gpxStatistics.global.speed.moving) < 0.01) {
+					effectiveSpeed = $gpxStatistics.global.speed.moving;
+				}
+
+				let ratio = 1;
+				if (
+					$gpxStatistics.global.speed.moving > 0 &&
+					$gpxStatistics.global.speed.moving !== effectiveSpeed
+				) {
+					ratio = $gpxStatistics.global.speed.moving / effectiveSpeed;
+				}
+
+				let item = $selection.getSelected()[0];
+				let fileId = item.getFileId();
+				dbUtils.applyToFile(fileId, (file) => {
+					if (item instanceof ListFileItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(getDate(startDate, startTime), movingTime);
+						} else {
+							file.changeTimestamps(getDate(startDate, startTime), effectiveSpeed, ratio);
+						}
+					} else if (item instanceof ListTrackItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(
+								getDate(startDate, startTime),
+								movingTime,
+								item.getTrackIndex()
+							);
+						} else {
+							file.changeTimestamps(
+								getDate(startDate, startTime),
+								effectiveSpeed,
+								ratio,
+								item.getTrackIndex()
+							);
+						}
+					} else if (item instanceof ListTrackSegmentItem) {
+						if (artificial) {
+							file.createArtificialTimestamps(
+								getDate(startDate, startTime),
+								movingTime,
+								item.getTrackIndex(),
+								item.getSegmentIndex()
+							);
+						} else {
+							file.changeTimestamps(
+								getDate(startDate, startTime),
+								effectiveSpeed,
+								ratio,
+								item.getTrackIndex(),
+								item.getSegmentIndex()
+							);
+						}
+					}
+				});
+			}}
+		>
+			<CalendarClock size="16" class="mr-1 shrink-0" />
+			{$_('toolbar.time.update')}
+		</Button>
+		<Button variant="outline" on:click={setGPXData}>
+			<CircleX size="16" />
+		</Button>
+	</div>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/time')}>
+		{#if canUpdate}
+			{$_('toolbar.time.help')}
+		{:else}
+			{$_('toolbar.time.help_invalid_selection')}
+		{/if}
+	</Help>
+</div>
+
+<style lang="postcss">
+	div :global(input[type='time']) {
+		/*
+        Style copy-pasted from shadcn-svelte Input.
+        Needed to use native time input to avoid a bug with 2-level bind:value.
+        */
+		@apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+	}
+</style>
diff --git a/website/src/lib/components/toolbar/tools/Waypoint.svelte b/website/src/lib/components/toolbar/tools/Waypoint.svelte
new file mode 100755
index 0000000..96dc426
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/Waypoint.svelte
@@ -0,0 +1,283 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store';
+
+	export const selectedWaypoint = writable<[Waypoint, string] | undefined>(undefined);
+</script>
+
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { Waypoint } from 'gpx';
+	import { _, locale } from 'svelte-i18n';
+	import { ListWaypointItem } from '$lib/components/file-list/FileList';
+	import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
+	import { get } from 'svelte/store';
+	import Help from '$lib/components/Help.svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { map } from '$lib/stores';
+	import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { MapPin, CircleX, Save } from 'lucide-svelte';
+	import { getSymbolKey, symbols } from '$lib/assets/symbols';
+
+	let name: string;
+	let description: string;
+	let link: string;
+	let longitude: number;
+	let latitude: number;
+
+	let selectedSymbol = {
+		value: '',
+		label: ''
+	};
+
+	const { verticalFileView } = settings;
+
+	$: canCreate = $selection.size > 0;
+
+	$: if ($verticalFileView && $selection) {
+		selectedWaypoint.update(() => {
+			if ($selection.size === 1) {
+				let item = $selection.getSelected()[0];
+				if (item instanceof ListWaypointItem) {
+					let file = getFile(item.getFileId());
+					let waypoint = file?.wpt[item.getWaypointIndex()];
+					if (waypoint) {
+						return [waypoint, item.getFileId()];
+					}
+				}
+			}
+			return undefined;
+		});
+	}
+
+	let unsubscribe: (() => void) | undefined = undefined;
+	function updateWaypointData(fileStore: GPXFileWithStatistics | undefined) {
+		if ($selectedWaypoint) {
+			if (fileStore) {
+				if ($selectedWaypoint[0]._data.index < fileStore.file.wpt.length) {
+					$selectedWaypoint[0] = fileStore.file.wpt[$selectedWaypoint[0]._data.index];
+					name = $selectedWaypoint[0].name ?? '';
+					description = $selectedWaypoint[0].desc ?? '';
+					if (
+						$selectedWaypoint[0].cmt !== undefined &&
+						$selectedWaypoint[0].cmt !== $selectedWaypoint[0].desc
+					) {
+						description += '\n\n' + $selectedWaypoint[0].cmt;
+					}
+					link = $selectedWaypoint[0].link?.attributes?.href ?? '';
+					let symbol = $selectedWaypoint[0].sym ?? '';
+					let symbolKey = getSymbolKey(symbol);
+					if (symbolKey) {
+						selectedSymbol = {
+							value: symbol,
+							label: $_(`gpx.symbol.${symbolKey}`)
+						};
+					} else {
+						selectedSymbol = {
+							value: symbol,
+							label: ''
+						};
+					}
+					longitude = parseFloat($selectedWaypoint[0].getLongitude().toFixed(6));
+					latitude = parseFloat($selectedWaypoint[0].getLatitude().toFixed(6));
+				} else {
+					selectedWaypoint.set(undefined);
+				}
+			} else {
+				selectedWaypoint.set(undefined);
+			}
+		}
+	}
+
+	function resetWaypointData() {
+		name = '';
+		description = '';
+		link = '';
+		selectedSymbol = {
+			value: '',
+			label: ''
+		};
+		longitude = 0;
+		latitude = 0;
+	}
+
+	$: {
+		if (unsubscribe) {
+			unsubscribe();
+			unsubscribe = undefined;
+		}
+		if ($selectedWaypoint) {
+			let fileStore = get(fileObservers).get($selectedWaypoint[1]);
+			if (fileStore) {
+				unsubscribe = fileStore.subscribe(updateWaypointData);
+			}
+		} else {
+			resetWaypointData();
+		}
+	}
+
+	function createOrUpdateWaypoint() {
+		if (typeof latitude === 'string') {
+			latitude = parseFloat(latitude);
+		}
+		if (typeof longitude === 'string') {
+			longitude = parseFloat(longitude);
+		}
+		latitude = parseFloat(latitude.toFixed(6));
+		longitude = parseFloat(longitude.toFixed(6));
+
+		dbUtils.addOrUpdateWaypoint(
+			{
+				attributes: {
+					lat: latitude,
+					lon: longitude
+				},
+				name: name.length > 0 ? name : undefined,
+				desc: description.length > 0 ? description : undefined,
+				cmt: description.length > 0 ? description : undefined,
+				link: link.length > 0 ? { attributes: { href: link } } : undefined,
+				sym: selectedSymbol.value.length > 0 ? selectedSymbol.value : undefined
+			},
+			$selectedWaypoint
+				? new ListWaypointItem($selectedWaypoint[1], $selectedWaypoint[0]._data.index)
+				: undefined
+		);
+
+		selectedWaypoint.set(undefined);
+		resetWaypointData();
+	}
+
+	function setCoordinates(e: any) {
+		latitude = e.lngLat.lat.toFixed(6);
+		longitude = e.lngLat.lng.toFixed(6);
+	}
+
+	$: sortedSymbols = Object.entries(symbols).sort((a, b) => {
+		return $_(`gpx.symbol.${a[0]}`).localeCompare($_(`gpx.symbol.${b[0]}`), $locale ?? 'fr');
+	});
+
+	onMount(() => {
+		let m = get(map);
+		m?.on('click', setCoordinates);
+		setCrosshairCursor();
+	});
+
+	onDestroy(() => {
+		let m = get(map);
+		m?.off('click', setCoordinates);
+		resetCursor();
+
+		if (unsubscribe) {
+			unsubscribe();
+			unsubscribe = undefined;
+		}
+	});
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-96 {$$props.class ?? ''}">
+	<fieldset class="flex flex-col gap-2">
+		<Label for="name">{$_('menu.metadata.name')}</Label>
+		<Input
+			bind:value={name}
+			id="name"
+			class="font-semibold h-8"
+			disabled={!canCreate && !$selectedWaypoint}
+		/>
+		<Label for="description">{$_('menu.metadata.description')}</Label>
+		<Textarea
+			bind:value={description}
+			id="description"
+			disabled={!canCreate && !$selectedWaypoint}
+		/>
+		<Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
+		<Select.Root bind:selected={selectedSymbol}>
+			<Select.Trigger id="symbol" class="w-full h-8" disabled={!canCreate && !$selectedWaypoint}>
+				<Select.Value />
+			</Select.Trigger>
+			<Select.Content class="max-h-60 overflow-y-scroll">
+				{#each sortedSymbols as [key, symbol]}
+					<Select.Item value={symbol.value}>
+						<span>
+							{#if symbol.icon}
+								<svelte:component
+									this={symbol.icon}
+									size="14"
+									class="inline-block align-sub mr-0.5"
+								/>
+							{:else}
+								<span class="w-4 inline-block" />
+							{/if}
+							{$_(`gpx.symbol.${key}`)}
+						</span>
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<Label for="link">{$_('toolbar.waypoint.link')}</Label>
+		<Input bind:value={link} id="link" class="h-8" disabled={!canCreate && !$selectedWaypoint} />
+		<div class="flex flex-row gap-2">
+			<div class="grow">
+				<Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
+				<Input
+					bind:value={latitude}
+					type="number"
+					id="latitude"
+					step={1e-6}
+					min={-90}
+					max={90}
+					class="text-xs h-8"
+					disabled={!canCreate && !$selectedWaypoint}
+				/>
+			</div>
+			<div class="grow">
+				<Label for="longitude">{$_('toolbar.waypoint.longitude')}</Label>
+				<Input
+					bind:value={longitude}
+					type="number"
+					id="longitude"
+					step={1e-6}
+					min={-180}
+					max={180}
+					class="text-xs h-8"
+					disabled={!canCreate && !$selectedWaypoint}
+				/>
+			</div>
+		</div>
+	</fieldset>
+	<div class="flex flex-row gap-2 items-center">
+		<Button
+			variant="outline"
+			disabled={!canCreate && !$selectedWaypoint}
+			class="grow whitespace-normal h-fit"
+			on:click={createOrUpdateWaypoint}
+		>
+			{#if $selectedWaypoint}
+				<Save size="16" class="mr-1 shrink-0" />
+				{$_('menu.metadata.save')}
+			{:else}
+				<MapPin size="16" class="mr-1 shrink-0" />
+				{$_('toolbar.waypoint.create')}
+			{/if}
+		</Button>
+		<Button
+			variant="outline"
+			on:click={() => {
+				selectedWaypoint.set(undefined);
+				resetWaypointData();
+			}}
+		>
+			<CircleX size="16" />
+		</Button>
+	</div>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/poi')}>
+		{#if $selectedWaypoint || canCreate}
+			{$_('toolbar.waypoint.help')}
+		{:else}
+			{$_('toolbar.waypoint.help_no_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
new file mode 100755
index 0000000..5e581a4
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -0,0 +1,249 @@
+<script lang="ts">
+	import * as Select from '$lib/components/ui/select';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import Help from '$lib/components/Help.svelte';
+	import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import {
+		Bike,
+		Footprints,
+		Waves,
+		TrainFront,
+		Route,
+		TriangleAlert,
+		ArrowRightLeft,
+		Home,
+		RouteOff,
+		Repeat,
+		SquareArrowUpLeft,
+		SquareArrowOutDownRight
+	} from 'lucide-svelte';
+
+	import { map, newGPXFile, routingControls, selectFileWhenLoaded } from '$lib/stores';
+	import { dbUtils, getFile, getFileIds, settings } from '$lib/db';
+	import { brouterProfiles, routingProfileSelectItem } from './Routing';
+
+	import { _, locale } from 'svelte-i18n';
+	import { RoutingControls } from './RoutingControls';
+	import mapboxgl from 'mapbox-gl';
+	import { fileObservers } from '$lib/db';
+	import { slide } from 'svelte/transition';
+	import { getOrderedSelection, selection } from '$lib/components/file-list/Selection';
+	import {
+		ListFileItem,
+		ListRootItem,
+		ListTrackItem,
+		ListTrackSegmentItem,
+		type ListItem
+	} from '$lib/components/file-list/FileList';
+	import { flyAndScale, getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+	import { onDestroy, onMount } from 'svelte';
+	import { TrackPoint } from 'gpx';
+
+	export let minimized = false;
+	export let minimizable = true;
+	export let popup: mapboxgl.Popup | undefined = undefined;
+	export let popupElement: HTMLElement | undefined = undefined;
+	let selectedItem: ListItem | null = null;
+
+	const { privateRoads, routing } = settings;
+
+	$: if ($map && popup && popupElement) {
+		// remove controls for deleted files
+		routingControls.forEach((controls, fileId) => {
+			if (!$fileObservers.has(fileId)) {
+				controls.destroy();
+				routingControls.delete(fileId);
+
+				if (selectedItem && selectedItem.getFileId() === fileId) {
+					selectedItem = null;
+				}
+			} else if ($map !== controls.map) {
+				controls.updateMap($map);
+			}
+		});
+		// add controls for new files
+		$fileObservers.forEach((file, fileId) => {
+			if (!routingControls.has(fileId)) {
+				routingControls.set(fileId, new RoutingControls($map, fileId, file, popup, popupElement));
+			}
+		});
+	}
+
+	$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+
+	function createFileWithPoint(e: any) {
+		if ($selection.size === 0) {
+			let file = newGPXFile();
+			file.replaceTrackPoints(0, 0, 0, 0, [
+				new TrackPoint({
+					attributes: {
+						lat: e.lngLat.lat,
+						lon: e.lngLat.lng
+					}
+				})
+			]);
+			file._data.id = getFileIds(1)[0];
+			dbUtils.add(file);
+			selectFileWhenLoaded(file._data.id);
+		}
+	}
+
+	onMount(() => {
+		setCrosshairCursor();
+		$map?.on('click', createFileWithPoint);
+	});
+
+	onDestroy(() => {
+		resetCursor();
+		$map?.off('click', createFileWithPoint);
+
+		routingControls.forEach((controls) => controls.destroy());
+		routingControls.clear();
+	});
+</script>
+
+{#if minimizable && minimized}
+	<div class="-m-1.5 -mb-2">
+		<Button variant="ghost" class="px-1 h-[26px]" on:click={() => (minimized = false)}>
+			<SquareArrowOutDownRight size="18" />
+		</Button>
+	</div>
+{:else}
+	<div
+		class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}"
+		in:flyAndScale={{ x: -2, y: 0, duration: 50 }}
+	>
+		<div class="flex flex-col gap-3">
+			<Label class="flex flex-row justify-between items-center gap-2">
+				<span class="flex flex-row items-center gap-1">
+					{#if $routing}
+						<Route size="16" />
+					{:else}
+						<RouteOff size="16" />
+					{/if}
+					{$_('toolbar.routing.use_routing')}
+				</span>
+				<Tooltip label={$_('toolbar.routing.use_routing_tooltip')}>
+					<Switch class="scale-90" bind:checked={$routing} />
+					<Shortcut slot="extra" key="F5" />
+				</Tooltip>
+			</Label>
+			{#if $routing}
+				<div class="flex flex-col gap-3" in:slide>
+					<Label class="flex flex-row justify-between items-center gap-2">
+						<span class="shrink-0 flex flex-row items-center gap-1">
+							{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')}
+								<Bike size="16" />
+							{:else if $routingProfileSelectItem.value.includes('foot')}
+								<Footprints size="16" />
+							{:else if $routingProfileSelectItem.value.includes('water')}
+								<Waves size="16" />
+							{:else if $routingProfileSelectItem.value.includes('railway')}
+								<TrainFront size="16" />
+							{/if}
+							{$_('toolbar.routing.activity')}
+						</span>
+						<Select.Root bind:selected={$routingProfileSelectItem}>
+							<Select.Trigger class="h-8 grow">
+								<Select.Value />
+							</Select.Trigger>
+							<Select.Content>
+								{#each Object.keys(brouterProfiles) as profile}
+									<Select.Item value={profile}
+										>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
+									>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</Label>
+					<Label class="flex flex-row justify-between items-center gap-2">
+						<span class="flex flex-row gap-1">
+							<TriangleAlert size="16" />
+							{$_('toolbar.routing.allow_private')}
+						</span>
+						<Switch class="scale-90" bind:checked={$privateRoads} />
+					</Label>
+				</div>
+			{/if}
+		</div>
+		<div class="flex flex-row flex-wrap justify-center gap-1">
+			<ButtonWithTooltip
+				label={$_('toolbar.routing.reverse.tooltip')}
+				variant="outline"
+				class="flex flex-row gap-1 text-xs px-2"
+				disabled={!validSelection}
+				on:click={dbUtils.reverseSelection}
+			>
+				<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
+			</ButtonWithTooltip>
+			<ButtonWithTooltip
+				label={$_('toolbar.routing.route_back_to_start.tooltip')}
+				variant="outline"
+				class="flex flex-row gap-1 text-xs px-2"
+				disabled={!validSelection}
+				on:click={() => {
+					const selected = getOrderedSelection();
+					if (selected.length > 0) {
+						const firstFileId = selected[0].getFileId();
+						const firstFile = getFile(firstFileId);
+						if (firstFile) {
+							let start = (() => {
+								if (selected[0] instanceof ListFileItem) {
+									return firstFile.trk[0]?.trkseg[0]?.trkpt[0];
+								} else if (selected[0] instanceof ListTrackItem) {
+									return firstFile.trk[selected[0].getTrackIndex()]?.trkseg[0]?.trkpt[0];
+								} else if (selected[0] instanceof ListTrackSegmentItem) {
+									return firstFile.trk[selected[0].getTrackIndex()]?.trkseg[
+										selected[0].getSegmentIndex()
+									]?.trkpt[0];
+								}
+							})();
+
+							if (start !== undefined) {
+								const lastFileId = selected[selected.length - 1].getFileId();
+								routingControls
+									.get(lastFileId)
+									?.appendAnchorWithCoordinates(start.getCoordinates());
+							}
+						}
+					}
+				}}
+			>
+				<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
+			</ButtonWithTooltip>
+			<ButtonWithTooltip
+				label={$_('toolbar.routing.round_trip.tooltip')}
+				variant="outline"
+				class="flex flex-row gap-1 text-xs px-2"
+				disabled={!validSelection}
+				on:click={dbUtils.createRoundTripForSelection}
+			>
+				<Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
+			</ButtonWithTooltip>
+		</div>
+		<div class="w-full flex flex-row gap-2 items-end justify-between">
+			<Help link={getURLForLanguage($locale, '/help/toolbar/routing')}>
+				{#if !validSelection}
+					{$_('toolbar.routing.help_no_file')}
+				{:else}
+					{$_('toolbar.routing.help')}
+				{/if}
+			</Help>
+			<Button
+				variant="ghost"
+				class="px-1 h-6"
+				on:click={() => {
+					if (minimizable) {
+						minimized = true;
+					}
+				}}
+			>
+				<SquareArrowUpLeft size="18" />
+			</Button>
+		</div>
+	</div>
+{/if}
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.ts b/website/src/lib/components/toolbar/tools/routing/Routing.ts
new file mode 100755
index 0000000..cf1fcdc
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.ts
@@ -0,0 +1,134 @@
+import type { Coordinates } from "gpx";
+import { TrackPoint, distance } from "gpx";
+import { derived, get, writable } from "svelte/store";
+import { settings } from "$lib/db";
+import { _, isLoading, locale } from "svelte-i18n";
+import { map } from "$lib/stores";
+import { getElevation } from "$lib/utils";
+
+const { routing, routingProfile, privateRoads } = settings;
+
+export const brouterProfiles: { [key: string]: string } = {
+    bike: 'trekking',
+    racing_bike: 'fastbike',
+    foot: 'hiking-beta',
+    water: 'river',
+    railway: 'rail'
+};
+export const routingProfileSelectItem = writable({
+    value: '',
+    label: ''
+});
+
+derived([routingProfile, locale, isLoading], ([profile, l, i]) => [profile, l, i]).subscribe(([profile, l, i]) => {
+    if (!i && profile !== '' && (profile !== get(routingProfileSelectItem).value || get(_)(`toolbar.routing.activities.${profile}`) !== get(routingProfileSelectItem).label) && l !== null) {
+        routingProfileSelectItem.update((item) => {
+            item.value = profile;
+            item.label = get(_)(`toolbar.routing.activities.${profile}`);
+            return item;
+        });
+    }
+});
+routingProfileSelectItem.subscribe((item) => {
+    if (item.value !== '' && item.value !== get(routingProfile)) {
+        routingProfile.set(item.value);
+    }
+});
+
+export function route(points: Coordinates[]): Promise<TrackPoint[]> {
+    if (get(routing)) {
+        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
+    } else {
+        return getIntermediatePoints(points);
+    }
+}
+
+async function getRoute(points: Coordinates[], brouterProfile: string, privateRoads: boolean): Promise<TrackPoint[]> {
+    let url = `https://routeur.rnmkcy.eu?lonlats=${points.map(point => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '' : '')}&format=geojson&alternativeidx=0`;
+
+    let response = await fetch(url);
+
+    // Check if the response is ok
+    if (!response.ok) {
+        throw new Error(`${await response.text()}`);
+    }
+
+    let geojson = await response.json();
+
+    let route: TrackPoint[] = [];
+    let coordinates = geojson.features[0].geometry.coordinates;
+    let messages = geojson.features[0].properties.messages;
+
+    const lngIdx = messages[0].indexOf("Longitude");
+    const latIdx = messages[0].indexOf("Latitude");
+    const tagIdx = messages[0].indexOf("WayTags");
+    let messageIdx = 1;
+    let surface = messageIdx < messages.length ? getSurface(messages[messageIdx][tagIdx]) : undefined;
+
+    for (let i = 0; i < coordinates.length; i++) {
+        let coord = coordinates[i];
+        route.push(new TrackPoint({
+            attributes: {
+                lat: coord[1],
+                lon: coord[0]
+            },
+            ele: coord[2] ?? (i > 0 ? route[i - 1].ele : 0)
+        }));
+
+        if (messageIdx < messages.length &&
+            coordinates[i][0] == Number(messages[messageIdx][lngIdx]) / 1000000 &&
+            coordinates[i][1] == Number(messages[messageIdx][latIdx]) / 1000000) {
+            messageIdx++;
+
+            if (messageIdx == messages.length) surface = undefined;
+            else surface = getSurface(messages[messageIdx][tagIdx]);
+        }
+
+        if (surface) {
+            route[route.length - 1].setSurface(surface);
+        }
+    }
+
+    return route;
+}
+
+function getSurface(message: string): string | undefined {
+    const fields = message.split(" ");
+    for (let i = 0; i < fields.length; i++) if (fields[i].startsWith("surface=")) {
+        return fields[i].substring(8);
+    }
+    return undefined;
+};
+
+function getIntermediatePoints(points: Coordinates[]): Promise<TrackPoint[]> {
+    let route: TrackPoint[] = [];
+    let step = 0.05;
+
+    for (let i = 0; i < points.length - 1; i++) { // Add intermediate points between each pair of points
+        let dist = distance(points[i], points[i + 1]) / 1000;
+        for (let d = 0; d < dist; d += step) {
+            let lat = points[i].lat + d / dist * (points[i + 1].lat - points[i].lat);
+            let lon = points[i].lon + d / dist * (points[i + 1].lon - points[i].lon);
+            route.push(new TrackPoint({
+                attributes: {
+                    lat: lat,
+                    lon: lon
+                }
+            }));
+        }
+    }
+
+    route.push(new TrackPoint({
+        attributes: {
+            lat: points[points.length - 1].lat,
+            lon: points[points.length - 1].lon
+        }
+    }));
+
+    return getElevation(route).then((elevations) => {
+        route.forEach((point, i) => {
+            point.ele = elevations[i];
+        });
+        return route;
+    });
+}
\ No newline at end of file
diff --git a/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte b/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
new file mode 100755
index 0000000..532536c
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { canChangeStart } from './RoutingControls';
+	import { CirclePlay, Trash2 } from 'lucide-svelte';
+
+	import { _ } from 'svelte-i18n';
+
+	export let element: HTMLElement;
+</script>
+
+<div bind:this={element} class="hidden">
+	<Card.Root class="border-none shadow-md text-base">
+		<Card.Content class="flex flex-col p-1">
+			{#if $canChangeStart}
+				<Button
+					class="w-full px-2 py-1 h-6 justify-start"
+					variant="ghost"
+					on:click={() => element.dispatchEvent(new CustomEvent('change-start'))}
+				>
+					<CirclePlay size="16" class="mr-1" />
+					{$_('toolbar.routing.start_loop_here')}
+				</Button>
+			{/if}
+			<Button
+				class="w-full px-2 py-1 h-6 justify-start"
+				variant="ghost"
+				on:click={() => element.dispatchEvent(new CustomEvent('delete'))}
+			>
+				<Trash2 size="16" class="mr-1" />
+				{$_('menu.delete')}
+				<Shortcut shift={true} click={true} />
+			</Button>
+		</Card.Content>
+	</Card.Root>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
new file mode 100755
index 0000000..996374a
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
@@ -0,0 +1,656 @@
+import { distance, type Coordinates, TrackPoint, TrackSegment, Track, projectedPoint } from "gpx";
+import { get, writable, type Readable } from "svelte/store";
+import mapboxgl from "mapbox-gl";
+import { route } from "./Routing";
+
+import { toast } from "svelte-sonner";
+
+import { _ } from "svelte-i18n";
+import { dbUtils, type GPXFileWithStatistics } from "$lib/db";
+import { getOrderedSelection, selection } from "$lib/components/file-list/Selection";
+import { ListFileItem, ListTrackItem, ListTrackSegmentItem } from "$lib/components/file-list/FileList";
+import { currentTool, streetViewEnabled, Tool } from "$lib/stores";
+import { getClosestLinePoint, resetCursor, setGrabbingCursor } from "$lib/utils";
+
+export const canChangeStart = writable(false);
+
+function stopPropagation(e: any) {
+    e.stopPropagation();
+}
+
+export class RoutingControls {
+    active: boolean = false;
+    map: mapboxgl.Map;
+    fileId: string = '';
+    file: Readable<GPXFileWithStatistics | undefined>;
+    anchors: AnchorWithMarker[] = [];
+    shownAnchors: AnchorWithMarker[] = [];
+    popup: mapboxgl.Popup;
+    popupElement: HTMLElement;
+    temporaryAnchor: AnchorWithMarker;
+    lastDragEvent = 0;
+    fileUnsubscribe: () => void = () => { };
+    unsubscribes: Function[] = [];
+
+    toggleAnchorsForZoomLevelAndBoundsBinded: () => void = this.toggleAnchorsForZoomLevelAndBounds.bind(this);
+    showTemporaryAnchorBinded: (e: any) => void = this.showTemporaryAnchor.bind(this);
+    updateTemporaryAnchorBinded: (e: any) => void = this.updateTemporaryAnchor.bind(this);
+    appendAnchorBinded: (e: mapboxgl.MapMouseEvent) => void = this.appendAnchor.bind(this);
+
+    constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
+        this.map = map;
+        this.fileId = fileId;
+        this.file = file;
+        this.popup = popup;
+        this.popupElement = popupElement;
+
+        let point = new TrackPoint({
+            attributes: {
+                lat: 0,
+                lon: 0
+            }
+        });
+        this.temporaryAnchor = this.createAnchor(point, new TrackSegment(), 0, 0);
+        this.temporaryAnchor.marker.getElement().classList.remove('z-10'); // Show below the other markers
+
+        this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
+    }
+
+    addIfNeeded() {
+        let routing = get(currentTool) === Tool.ROUTING;
+        if (!routing) {
+            if (this.active) {
+                this.remove();
+            }
+            return;
+        }
+
+        let selected = get(selection).hasAnyChildren(new ListFileItem(this.fileId), true, ['waypoints']);
+        if (selected) {
+            if (this.active) {
+                this.updateControls();
+            } else {
+                this.add();
+            }
+        } else if (this.active) {
+            this.remove();
+        }
+    }
+
+    add() {
+        this.active = true;
+
+        this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
+        this.map.on('click', this.appendAnchorBinded);
+        this.map.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
+        this.map.on('click', this.fileId, stopPropagation);
+
+        this.fileUnsubscribe = this.file.subscribe(this.updateControls.bind(this));
+    }
+
+    updateControls() { // Update the markers when the file changes
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let anchorIndex = 0;
+        file.forEachSegment((segment, trackIndex, segmentIndex) => {
+            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+                for (let point of segment.trkpt) { // Update the existing anchors (could be improved by matching the existing anchors with the new ones?)
+                    if (point._data.anchor) {
+                        if (anchorIndex < this.anchors.length) {
+                            this.anchors[anchorIndex].point = point;
+                            this.anchors[anchorIndex].segment = segment;
+                            this.anchors[anchorIndex].trackIndex = trackIndex;
+                            this.anchors[anchorIndex].segmentIndex = segmentIndex;
+                            this.anchors[anchorIndex].marker.setLngLat(point.getCoordinates());
+                        } else {
+                            this.anchors.push(this.createAnchor(point, segment, trackIndex, segmentIndex));
+                        }
+                        anchorIndex++;
+                    }
+                }
+            }
+        });
+
+        while (anchorIndex < this.anchors.length) { // Remove the extra anchors
+            this.anchors.pop()?.marker.remove();
+        }
+
+        this.toggleAnchorsForZoomLevelAndBounds();
+    }
+
+    remove() {
+        this.active = false;
+
+        for (let anchor of this.anchors) {
+            anchor.marker.remove();
+        }
+        this.map.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
+        this.map.off('click', this.appendAnchorBinded);
+        this.map.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
+        this.map.off('click', this.fileId, stopPropagation);
+        this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+        this.temporaryAnchor.marker.remove();
+
+        this.fileUnsubscribe();
+    }
+
+    updateMap(map: mapboxgl.Map) {
+        this.map = map;
+    }
+
+    createAnchor(point: TrackPoint, segment: TrackSegment, trackIndex: number, segmentIndex: number): AnchorWithMarker {
+        let element = document.createElement('div');
+        element.className = `h-5 w-5 xs:h-4 xs:w-4 md:h-3 md:w-3 rounded-full bg-white border-2 border-black cursor-pointer`;
+
+        let marker = new mapboxgl.Marker({
+            draggable: true,
+            className: 'z-10',
+            element
+        }).setLngLat(point.getCoordinates());
+
+        let anchor = {
+            point,
+            segment,
+            trackIndex,
+            segmentIndex,
+            marker,
+            inZoom: false
+        };
+
+        marker.on('dragstart', (e) => {
+            this.lastDragEvent = Date.now();
+            setGrabbingCursor();
+            element.classList.remove('cursor-pointer');
+            element.classList.add('cursor-grabbing');
+        });
+        marker.on('dragend', (e) => {
+            this.lastDragEvent = Date.now();
+            resetCursor();
+            element.classList.remove('cursor-grabbing');
+            element.classList.add('cursor-pointer');
+            this.moveAnchor(anchor);
+        });
+        let handleAnchorClick = this.handleClickForAnchor(anchor, marker);
+        marker.getElement().addEventListener('click', handleAnchorClick);
+        marker.getElement().addEventListener('contextmenu', handleAnchorClick);
+
+        return anchor;
+    }
+
+    handleClickForAnchor(anchor: Anchor, marker: mapboxgl.Marker) {
+        return (e: any) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (Date.now() - this.lastDragEvent < 100) { // Prevent click event during drag
+                return;
+            }
+
+            if (marker === this.temporaryAnchor.marker) {
+                this.turnIntoPermanentAnchor();
+                return;
+            }
+
+            if (e.shiftKey) {
+                this.deleteAnchor(anchor);
+                return;
+            }
+
+            canChangeStart.update(() => {
+                if (anchor.point._data.index === 0) {
+                    return false;
+                }
+                let segment = anchor.segment;
+                if (distance(segment.trkpt[0].getCoordinates(), segment.trkpt[segment.trkpt.length - 1].getCoordinates()) > 1000) {
+                    return false;
+                }
+                return true;
+            });
+
+            marker.setPopup(this.popup);
+            marker.togglePopup();
+
+            let deleteThisAnchor = this.getDeleteAnchor(anchor);
+            this.popupElement.addEventListener('delete', deleteThisAnchor); // Register the delete event for this anchor
+            let startLoopAtThisAnchor = this.getStartLoopAtAnchor(anchor);
+            this.popupElement.addEventListener('change-start', startLoopAtThisAnchor); // Register the start loop event for this anchor
+            this.popup.once('close', () => {
+                this.popupElement.removeEventListener('delete', deleteThisAnchor);
+                this.popupElement.removeEventListener('change-start', startLoopAtThisAnchor);
+            });
+        };
+    }
+
+    toggleAnchorsForZoomLevelAndBounds() { // Show markers only if they are in the current zoom level and bounds
+        this.shownAnchors.splice(0, this.shownAnchors.length);
+
+        let center = this.map.getCenter();
+        let bottomLeft = this.map.unproject([0, this.map.getCanvas().height]);
+        let topRight = this.map.unproject([this.map.getCanvas().width, 0]);
+        let diagonal = bottomLeft.distanceTo(topRight);
+
+        let zoom = this.map.getZoom();
+        this.anchors.forEach((anchor) => {
+            anchor.inZoom = anchor.point._data.zoom <= zoom;
+            if (anchor.inZoom && center.distanceTo(anchor.marker.getLngLat()) < diagonal) {
+                anchor.marker.addTo(this.map);
+                this.shownAnchors.push(anchor);
+            } else {
+                anchor.marker.remove();
+            }
+        });
+    }
+
+    showTemporaryAnchor(e: any) {
+        if (this.temporaryAnchor.marker.getElement().classList.contains('cursor-grabbing')) { // Do not not change the source point if it is already being dragged
+            return;
+        }
+
+        if (get(streetViewEnabled)) {
+            return;
+        }
+
+        if (!get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, e.features[0].properties.trackIndex, e.features[0].properties.segmentIndex))) {
+            return;
+        }
+
+        if (this.temporaryAnchorCloseToOtherAnchor(e)) {
+            return;
+        }
+
+        this.temporaryAnchor.point.setCoordinates({
+            lat: e.lngLat.lat,
+            lon: e.lngLat.lng
+        });
+        this.temporaryAnchor.marker.setLngLat(e.lngLat).addTo(this.map);
+
+        this.map.on('mousemove', this.updateTemporaryAnchorBinded);
+    }
+
+    updateTemporaryAnchor(e: any) {
+        if (this.temporaryAnchor.marker.getElement().classList.contains('cursor-grabbing')) { // Do not hide if it is being dragged, and stop listening for mousemove
+            this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+            return;
+        }
+
+        if (e.point.dist(this.map.project(this.temporaryAnchor.point.getCoordinates())) > 20 || this.temporaryAnchorCloseToOtherAnchor(e)) { // Hide if too far from the layer
+            this.temporaryAnchor.marker.remove();
+            this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+            return;
+        }
+
+        this.temporaryAnchor.marker.setLngLat(e.lngLat); // Update the position of the temporary anchor
+    }
+
+    temporaryAnchorCloseToOtherAnchor(e: any) {
+        for (let anchor of this.shownAnchors) {
+            if (e.point.dist(this.map.project(anchor.marker.getLngLat())) < 10) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    async moveAnchor(anchorWithMarker: AnchorWithMarker) { // Move the anchor and update the route from and to the neighbouring anchors
+        let coordinates = {
+            lat: anchorWithMarker.marker.getLngLat().lat,
+            lon: anchorWithMarker.marker.getLngLat().lng
+        };
+
+        let anchor = anchorWithMarker as Anchor;
+        if (anchorWithMarker === this.temporaryAnchor) { // Temporary anchor, need to find the closest point of the segment and create an anchor for it
+            this.temporaryAnchor.marker.remove();
+            anchor = this.getPermanentAnchor();
+        }
+
+        let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
+
+        let anchors = [];
+        let targetCoordinates = [];
+
+        if (previousAnchor !== null) {
+            anchors.push(previousAnchor);
+            targetCoordinates.push(previousAnchor.point.getCoordinates());
+        }
+
+        anchors.push(anchor);
+        targetCoordinates.push(coordinates);
+
+        if (nextAnchor !== null) {
+            anchors.push(nextAnchor);
+            targetCoordinates.push(nextAnchor.point.getCoordinates());
+        }
+
+        let success = await this.routeBetweenAnchors(anchors, targetCoordinates);
+
+        if (!success) { // Route failed, revert the anchor to the previous position
+            anchorWithMarker.marker.setLngLat(anchorWithMarker.point.getCoordinates());
+        }
+    }
+
+    getPermanentAnchor(): Anchor {
+        let file = get(this.file)?.file;
+
+        // Find the point closest to the temporary anchor
+        let minDetails: any = { distance: Number.MAX_VALUE };
+        let minAnchor = this.temporaryAnchor as Anchor;
+        file?.forEachSegment((segment, trackIndex, segmentIndex) => {
+            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+                let details: any = {};
+                let closest = getClosestLinePoint(segment.trkpt, this.temporaryAnchor.point, details);
+                if (details.distance < minDetails.distance) {
+                    minDetails = details;
+                    minAnchor = {
+                        point: closest,
+                        segment,
+                        trackIndex,
+                        segmentIndex
+                    };
+                }
+            }
+        });
+
+        if (minAnchor.point._data.anchor) {
+            minAnchor.point = minAnchor.point.clone();
+            if (minDetails.before) {
+                minAnchor.point._data.index = minAnchor.point._data.index + 0.5;
+            } else {
+                minAnchor.point._data.index = minAnchor.point._data.index - 0.5;
+            }
+        }
+
+        return minAnchor;
+    }
+
+    turnIntoPermanentAnchor() {
+        let file = get(this.file)?.file;
+
+        // Find the point closest to the temporary anchor
+        let minDetails: any = { distance: Number.MAX_VALUE };
+        let minInfo = {
+            point: this.temporaryAnchor.point,
+            trackIndex: -1,
+            segmentIndex: -1,
+            trkptIndex: -1
+        };
+
+        file?.forEachSegment((segment, trackIndex, segmentIndex) => {
+            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+                let details: any = {};
+                getClosestLinePoint(segment.trkpt, this.temporaryAnchor.point, details);
+                if (details.distance < minDetails.distance) {
+                    minDetails = details;
+                    let before = details.before ? details.index : details.index - 1;
+
+                    let projectedPt = projectedPoint(segment.trkpt[before], segment.trkpt[before + 1], this.temporaryAnchor.point);
+                    let ratio = distance(segment.trkpt[before], projectedPt) / distance(segment.trkpt[before], segment.trkpt[before + 1]);
+
+                    let point = segment.trkpt[before].clone();
+                    point.setCoordinates(projectedPt);
+                    point.ele = (1 - ratio) * (segment.trkpt[before].ele ?? 0) + ratio * (segment.trkpt[before + 1].ele ?? 0);
+                    point.time = (segment.trkpt[before].time && segment.trkpt[before + 1].time) ? new Date((1 - ratio) * segment.trkpt[before].time.getTime() + ratio * segment.trkpt[before + 1].time.getTime()) : undefined;
+                    point._data = {
+                        anchor: true,
+                        zoom: 0
+                    };
+
+                    minInfo = {
+                        point,
+                        trackIndex,
+                        segmentIndex,
+                        trkptIndex: before + 1
+                    };
+                }
+            }
+        });
+
+        if (minInfo.trackIndex !== -1) {
+            dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(minInfo.trackIndex, minInfo.segmentIndex, minInfo.trkptIndex, minInfo.trkptIndex - 1, [minInfo.point]));
+        }
+    }
+
+    getDeleteAnchor(anchor: Anchor) {
+        return () => this.deleteAnchor(anchor);
+    }
+
+    async deleteAnchor(anchor: Anchor) { // Remove the anchor and route between the neighbouring anchors if they exist
+        this.popup.remove();
+
+        let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
+
+        if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it
+            dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, 0, []));
+        } else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor
+            dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, nextAnchor.point._data.index - 1, []));
+        } else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor
+            dbUtils.applyToFile(this.fileId, (file) => {
+                let segment = file.getSegment(anchor.trackIndex, anchor.segmentIndex);
+                file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []);
+            });
+        } else { // Route between previousAnchor and nextAnchor
+            this.routeBetweenAnchors([previousAnchor, nextAnchor], [previousAnchor.point.getCoordinates(), nextAnchor.point.getCoordinates()]);
+        }
+    }
+
+    getStartLoopAtAnchor(anchor: Anchor) {
+        return () => this.startLoopAtAnchor(anchor);
+    }
+
+    startLoopAtAnchor(anchor: Anchor) {
+        this.popup.remove();
+
+        let fileWithStats = get(this.file);
+        if (!fileWithStats) {
+            return;
+        }
+
+        let speed = fileWithStats.statistics.getStatisticsFor(new ListTrackSegmentItem(this.fileId, anchor.trackIndex, anchor.segmentIndex)).global.speed.moving;
+
+        let segment = anchor.segment;
+        dbUtils.applyToFile(this.fileId, (file) => {
+            file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, segment.trkpt.length, segment.trkpt.length - 1, segment.trkpt.slice(0, anchor.point._data.index), speed > 0 ? speed : undefined);
+            file.crop(anchor.point._data.index, anchor.point._data.index + segment.trkpt.length - 1, [anchor.trackIndex], [anchor.segmentIndex]);
+        });
+    }
+
+    async appendAnchor(e: mapboxgl.MapMouseEvent) { // Add a new anchor to the end of the last segment
+        if (get(streetViewEnabled)) {
+            return;
+        }
+
+        this.appendAnchorWithCoordinates({
+            lat: e.lngLat.lat,
+            lon: e.lngLat.lng
+        });
+    }
+
+    async appendAnchorWithCoordinates(coordinates: Coordinates) { // Add a new anchor to the end of the last segment
+        let selected = getOrderedSelection();
+        if (selected.length === 0 || selected[selected.length - 1].getFileId() !== this.fileId) {
+            return;
+        }
+        let item = selected[selected.length - 1];
+
+        let lastAnchor = this.anchors[this.anchors.length - 1];
+
+        let newPoint = new TrackPoint({
+            attributes: coordinates
+        });
+        newPoint._data.anchor = true;
+        newPoint._data.zoom = 0;
+
+        if (!lastAnchor) {
+            dbUtils.applyToFile(this.fileId, (file) => {
+                let trackIndex = file.trk.length > 0 ? file.trk.length - 1 : 0;
+                if (item instanceof ListTrackItem || item instanceof ListTrackSegmentItem) {
+                    trackIndex = item.getTrackIndex();
+                }
+                let segmentIndex = (file.trk.length > 0 && file.trk[trackIndex].trkseg.length > 0) ? file.trk[trackIndex].trkseg.length - 1 : 0;
+                if (item instanceof ListTrackSegmentItem) {
+                    segmentIndex = item.getSegmentIndex();
+                }
+                if (file.trk.length === 0) {
+                    let track = new Track();
+                    track.replaceTrackPoints(0, 0, 0, [newPoint]);
+                    file.replaceTracks(0, 0, [track]);
+                } else if (file.trk[trackIndex].trkseg.length === 0) {
+                    let segment = new TrackSegment();
+                    segment.replaceTrackPoints(0, 0, [newPoint]);
+                    file.replaceTrackSegments(trackIndex, 0, 0, [segment]);
+                } else {
+                    file.replaceTrackPoints(trackIndex, segmentIndex, 0, 0, [newPoint]);
+                }
+            });
+            return;
+        }
+
+        newPoint._data.index = lastAnchor.segment.trkpt.length - 1; // Do as if the point was the last point in the segment
+        let newAnchor = {
+            point: newPoint,
+            segment: lastAnchor.segment,
+            trackIndex: lastAnchor.trackIndex,
+            segmentIndex: lastAnchor.segmentIndex
+        };
+
+        await this.routeBetweenAnchors([lastAnchor, newAnchor], [lastAnchor.point.getCoordinates(), newAnchor.point.getCoordinates()]);
+    }
+
+    getNeighbouringAnchors(anchor: Anchor): [Anchor | null, Anchor | null] {
+        let previousAnchor: Anchor | null = null;
+        let nextAnchor: Anchor | null = null;
+
+        for (let i = 0; i < this.anchors.length; i++) {
+            if (this.anchors[i].segment === anchor.segment && this.anchors[i].inZoom) {
+                if (this.anchors[i].point._data.index < anchor.point._data.index) {
+                    if (!previousAnchor || this.anchors[i].point._data.index > previousAnchor.point._data.index) {
+                        previousAnchor = this.anchors[i];
+                    }
+                } else if (this.anchors[i].point._data.index > anchor.point._data.index) {
+                    if (!nextAnchor || this.anchors[i].point._data.index < nextAnchor.point._data.index) {
+                        nextAnchor = this.anchors[i];
+                    }
+                }
+            }
+        }
+
+        return [previousAnchor, nextAnchor];
+    }
+
+    async routeBetweenAnchors(anchors: Anchor[], targetCoordinates: Coordinates[]): Promise<boolean> {
+        let segment = anchors[0].segment;
+
+        let fileWithStats = get(this.file);
+        if (!fileWithStats) {
+            return false;
+        }
+
+        if (anchors.length === 1) { // Only one anchor, update the point in the segment
+            dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].trackIndex, anchors[0].segmentIndex, 0, 0, [new TrackPoint({
+                attributes: targetCoordinates[0],
+            })]));
+            return true;
+        }
+
+        let response: TrackPoint[];
+        try {
+            response = await route(targetCoordinates);
+        } catch (e: any) {
+            if (e.message.includes('from-position not mapped in existing datafile')) {
+                toast.error(get(_)("toolbar.routing.error.from"));
+            } else if (e.message.includes('via1-position not mapped in existing datafile')) {
+                toast.error(get(_)("toolbar.routing.error.via"));
+            } else if (e.message.includes('to-position not mapped in existing datafile')) {
+                toast.error(get(_)("toolbar.routing.error.to"));
+            } else if (e.message.includes('Time-out')) {
+                toast.error(get(_)("toolbar.routing.error.timeout"));
+            } else {
+                toast.error(e.message);
+            }
+            return false;
+        }
+
+        if (anchors[0].point._data.index === 0) { // First anchor is the first point of the segment
+            anchors[0].point = response[0]; // replace the first anchor
+            anchors[0].point._data.index = 0;
+        } else if (anchors[0].point._data.index === segment.trkpt.length - 1 && distance(anchors[0].point.getCoordinates(), response[0].getCoordinates()) < 1) { // First anchor is the last point of the segment, and the new point is close enough
+            anchors[0].point = response[0]; // replace the first anchor
+            anchors[0].point._data.index = segment.trkpt.length - 1;
+        } else {
+            anchors[0].point = anchors[0].point.clone(); // Clone the anchor to assign new properties
+            response.splice(0, 0, anchors[0].point); // Insert it in the response to keep it
+        }
+
+        if (anchors[anchors.length - 1].point._data.index === segment.trkpt.length - 1) { // Last anchor is the last point of the segment
+            anchors[anchors.length - 1].point = response[response.length - 1]; // replace the last anchor
+            anchors[anchors.length - 1].point._data.index = segment.trkpt.length - 1;
+        } else {
+            anchors[anchors.length - 1].point = anchors[anchors.length - 1].point.clone(); // Clone the anchor to assign new properties
+            response.push(anchors[anchors.length - 1].point); // Insert it in the response to keep it
+        }
+
+        for (let i = 1; i < anchors.length - 1; i++) {
+            // Find the closest point to the intermediate anchor
+            // and transfer the marker to that point
+            anchors[i].point = getClosestLinePoint(response.slice(1, - 1), targetCoordinates[i]);
+        }
+
+        anchors.forEach((anchor) => {
+            anchor.point._data.anchor = true;
+            anchor.point._data.zoom = 0; // Make these anchors permanent
+        });
+
+        let stats = fileWithStats.statistics.getStatisticsFor(new ListTrackSegmentItem(this.fileId, anchors[0].trackIndex, anchors[0].segmentIndex));
+        let speed: number | undefined = undefined;
+        let startTime = anchors[0].point.time;
+
+        if (stats.global.speed.moving > 0) {
+            let replacingDistance = 0;
+            for (let i = 1; i < response.length; i++) {
+                replacingDistance += distance(response[i - 1].getCoordinates(), response[i].getCoordinates()) / 1000;
+            }
+            let replacedDistance = stats.local.distance.moving[anchors[anchors.length - 1].point._data.index] - stats.local.distance.moving[anchors[0].point._data.index];
+
+            let newDistance = stats.global.distance.moving + replacingDistance - replacedDistance;
+            let newTime = newDistance / stats.global.speed.moving * 3600;
+
+            let remainingTime = stats.global.time.moving - (stats.local.time.moving[anchors[anchors.length - 1].point._data.index] - stats.local.time.moving[anchors[0].point._data.index]);
+            let replacingTime = newTime - remainingTime;
+
+            if (replacingTime <= 0) { // Fallback to simple time difference
+                replacingTime = stats.local.time.total[anchors[anchors.length - 1].point._data.index] - stats.local.time.total[anchors[0].point._data.index];
+            }
+
+            speed = replacingDistance / replacingTime * 3600;
+
+            if (startTime === undefined) { // Replacing the first point
+                let endIndex = anchors[anchors.length - 1].point._data.index;
+                startTime = new Date((segment.trkpt[endIndex].time?.getTime() ?? 0) - (replacingTime + stats.local.time.total[endIndex] - stats.local.time.moving[endIndex]) * 1000);
+            }
+        }
+
+        dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].trackIndex, anchors[0].segmentIndex, anchors[0].point._data.index, anchors[anchors.length - 1].point._data.index, response, speed, startTime));
+
+        return true;
+    }
+
+    destroy() {
+        this.remove();
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+}
+
+type Anchor = {
+    segment: TrackSegment;
+    trackIndex: number;
+    segmentIndex: number;
+    point: TrackPoint;
+};
+
+type AnchorWithMarker = Anchor & {
+    marker: mapboxgl.Marker;
+    inZoom: boolean;
+};
diff --git a/website/src/lib/components/toolbar/tools/routing/Simplify.ts b/website/src/lib/components/toolbar/tools/routing/Simplify.ts
new file mode 100755
index 0000000..5e12c7b
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/routing/Simplify.ts
@@ -0,0 +1,45 @@
+import { ramerDouglasPeucker, type GPXFile, type TrackSegment } from "gpx";
+
+const earthRadius = 6371008.8;
+
+export function getZoomLevelForDistance(latitude: number, distance?: number): number {
+    if (distance === undefined) {
+        return 0;
+    }
+
+    const rad = Math.PI / 180;
+    const lat = latitude * rad;
+
+    return Math.min(22, Math.max(0, Math.log2((earthRadius * Math.cos(lat)) / distance)));
+}
+
+export function updateAnchorPoints(file: GPXFile) {
+    let segments = file.getSegments();
+
+    for (let segment of segments) {
+        if (!segment._data.anchors) { // New segment, compute anchor points for it
+            computeAnchorPoints(segment);
+            continue;
+        }
+
+        if (segment.trkpt.length > 0) {
+            // Ensure first and last points are anchors and always visible
+            segment.trkpt[0]._data.anchor = true;
+            segment.trkpt[0]._data.zoom = 0;
+            segment.trkpt[segment.trkpt.length - 1]._data.anchor = true;
+            segment.trkpt[segment.trkpt.length - 1]._data.zoom = 0;
+        }
+    }
+}
+
+function computeAnchorPoints(segment: TrackSegment) {
+    let points = segment.trkpt;
+    let anchors = ramerDouglasPeucker(points, 1);
+    anchors.forEach((anchor) => {
+        let point = anchor.point;
+        point._data.anchor = true;
+        point._data.zoom = getZoomLevelForDistance(point.getLatitude(), anchor.distance);
+    });
+    segment._data.anchors = true;
+}
+
diff --git a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
new file mode 100755
index 0000000..ce00207
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -0,0 +1,146 @@
+<script lang="ts" context="module">
+	export enum SplitType {
+		FILES = 'files',
+		TRACKS = 'tracks',
+		SEGMENTS = 'segments'
+	}
+</script>
+
+<script lang="ts">
+	import Help from '$lib/components/Help.svelte';
+	import { ListRootItem } from '$lib/components/file-list/FileList';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Button } from '$lib/components/ui/button';
+	import { Slider } from '$lib/components/ui/slider';
+	import * as Select from '$lib/components/ui/select';
+	import { Separator } from '$lib/components/ui/separator';
+	import { gpxStatistics, map, slicedGPXStatistics, splitAs } from '$lib/stores';
+	import { get } from 'svelte/store';
+	import { _, locale } from 'svelte-i18n';
+	import { onDestroy, tick } from 'svelte';
+	import { Crop } from 'lucide-svelte';
+	import { dbUtils } from '$lib/db';
+	import { SplitControls } from './SplitControls';
+	import { getURLForLanguage } from '$lib/utils';
+
+	let splitControls: SplitControls | undefined = undefined;
+	let canCrop = false;
+
+	$: if ($map) {
+		if (splitControls) {
+			splitControls.destroy();
+		}
+		splitControls = new SplitControls($map);
+	}
+
+	$: validSelection =
+		$selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
+		$gpxStatistics.local.points.length > 0;
+
+	let maxSliderValue = 1;
+	let sliderValues = [0, 1];
+
+	function updateCanCrop() {
+		canCrop = sliderValues[0] != 0 || sliderValues[1] != maxSliderValue;
+	}
+
+	function updateSlicedGPXStatistics() {
+		if (validSelection && canCrop) {
+			$slicedGPXStatistics = [
+				get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
+				sliderValues[0],
+				sliderValues[1]
+			];
+		} else {
+			$slicedGPXStatistics = undefined;
+		}
+	}
+
+	function updateSliderValues() {
+		if ($slicedGPXStatistics !== undefined) {
+			sliderValues = [$slicedGPXStatistics[1], $slicedGPXStatistics[2]];
+		}
+	}
+
+	async function updateSliderLimits() {
+		if (validSelection && $gpxStatistics.local.points.length > 0) {
+			maxSliderValue = $gpxStatistics.local.points.length - 1;
+		} else {
+			maxSliderValue = 1;
+		}
+		await tick();
+		sliderValues = [0, maxSliderValue];
+	}
+
+	$: if ($gpxStatistics.local.points.length - 1 != maxSliderValue) {
+		updateSliderLimits();
+	}
+
+	$: if (sliderValues) {
+		updateCanCrop();
+		updateSlicedGPXStatistics();
+	}
+
+	$: if (
+		$slicedGPXStatistics !== undefined &&
+		($slicedGPXStatistics[1] !== sliderValues[0] || $slicedGPXStatistics[2] !== sliderValues[1])
+	) {
+		updateSliderValues();
+		updateCanCrop();
+	}
+
+	const splitTypes = [
+		{ value: SplitType.FILES, label: $_('gpx.files') },
+		{ value: SplitType.TRACKS, label: $_('gpx.tracks') },
+		{ value: SplitType.SEGMENTS, label: $_('gpx.segments') }
+	];
+
+	let splitType = splitTypes[0];
+
+	$: splitAs.set(splitType.value);
+
+	onDestroy(() => {
+		$slicedGPXStatistics = undefined;
+		if (splitControls) {
+			splitControls.destroy();
+			splitControls = undefined;
+		}
+	});
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
+	<div class="p-2">
+		<Slider bind:value={sliderValues} max={maxSliderValue} step={1} disabled={!validSelection} />
+	</div>
+	<Button
+		variant="outline"
+		disabled={!validSelection || !canCrop}
+		on:click={() => dbUtils.cropSelection(sliderValues[0], sliderValues[1])}
+	>
+		<Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}
+	</Button>
+	<Separator />
+	<Label class="flex flex-row flex-wrap gap-3 items-center">
+		<span class="shrink-0">
+			{$_('toolbar.scissors.split_as')}
+		</span>
+		<Select.Root bind:selected={splitType}>
+			<Select.Trigger class="h-8 w-fit grow">
+				<Select.Value />
+			</Select.Trigger>
+			<Select.Content>
+				{#each splitTypes as { value, label }}
+					<Select.Item {value}>{label}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	</Label>
+	<Help link={getURLForLanguage($locale, '/help/toolbar/scissors')}>
+		{#if validSelection}
+			{$_('toolbar.scissors.help')}
+		{:else}
+			{$_('toolbar.scissors.help_invalid_selection')}
+		{/if}
+	</Help>
+</div>
diff --git a/website/src/lib/components/toolbar/tools/scissors/SplitControls.ts b/website/src/lib/components/toolbar/tools/scissors/SplitControls.ts
new file mode 100755
index 0000000..8f1cbc7
--- /dev/null
+++ b/website/src/lib/components/toolbar/tools/scissors/SplitControls.ts
@@ -0,0 +1,162 @@
+import { TrackPoint, TrackSegment } from "gpx";
+import { get } from "svelte/store";
+import mapboxgl from "mapbox-gl";
+import { dbUtils, getFile } from "$lib/db";
+import { applyToOrderedSelectedItemsFromFile, selection } from "$lib/components/file-list/Selection";
+import { ListTrackSegmentItem } from "$lib/components/file-list/FileList";
+import { currentTool, gpxStatistics, Tool } from "$lib/stores";
+import { _ } from "svelte-i18n";
+import { Scissors } from "lucide-static";
+
+export class SplitControls {
+    active: boolean = false;
+    map: mapboxgl.Map;
+    controls: ControlWithMarker[] = [];
+    shownControls: ControlWithMarker[] = [];
+    unsubscribes: Function[] = [];
+
+    toggleControlsForZoomLevelAndBoundsBinded: () => void = this.toggleControlsForZoomLevelAndBounds.bind(this);
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+
+        this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
+    }
+
+    addIfNeeded() {
+        let scissors = get(currentTool) === Tool.SCISSORS;
+        if (!scissors) {
+            if (this.active) {
+                this.remove();
+            }
+            return;
+        }
+
+        if (this.active) {
+            this.updateControls();
+        } else {
+            this.add();
+        }
+    }
+
+    add() {
+        this.active = true;
+
+        this.map.on('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.on('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+    }
+
+    updateControls() { // Update the markers when the files change
+        let controlIndex = 0;
+        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+            let file = getFile(fileId);
+
+            if (file) {
+                file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                    if (get(selection).hasAnyParent(new ListTrackSegmentItem(fileId, trackIndex, segmentIndex))) {
+                        for (let point of segment.trkpt.slice(1, -1)) { // Update the existing controls (could be improved by matching the existing controls with the new ones?)
+                            if (point._data.anchor) {
+                                if (controlIndex < this.controls.length) {
+                                    this.controls[controlIndex].fileId = fileId;
+                                    this.controls[controlIndex].point = point;
+                                    this.controls[controlIndex].segment = segment;
+                                    this.controls[controlIndex].trackIndex = trackIndex;
+                                    this.controls[controlIndex].segmentIndex = segmentIndex;
+                                    this.controls[controlIndex].marker.setLngLat(point.getCoordinates());
+                                } else {
+                                    this.controls.push(this.createControl(point, segment, fileId, trackIndex, segmentIndex));
+                                }
+                                controlIndex++;
+                            }
+                        }
+                    }
+                });
+
+            }
+        }, false);
+
+        while (controlIndex < this.controls.length) { // Remove the extra controls
+            this.controls.pop()?.marker.remove();
+        }
+
+        this.toggleControlsForZoomLevelAndBounds();
+    }
+
+    remove() {
+        this.active = false;
+
+        for (let control of this.controls) {
+            control.marker.remove();
+        }
+        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+    }
+
+    toggleControlsForZoomLevelAndBounds() { // Show markers only if they are in the current zoom level and bounds
+        this.shownControls.splice(0, this.shownControls.length);
+
+        let southWest = this.map.unproject([0, this.map.getCanvas().height]);
+        let northEast = this.map.unproject([this.map.getCanvas().width, 0]);
+        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
+
+        let zoom = this.map.getZoom();
+        this.controls.forEach((control) => {
+            control.inZoom = control.point._data.zoom <= zoom;
+            if (control.inZoom && bounds.contains(control.marker.getLngLat())) {
+                control.marker.addTo(this.map);
+                this.shownControls.push(control);
+            } else {
+                control.marker.remove();
+            }
+        });
+    }
+
+    createControl(point: TrackPoint, segment: TrackSegment, fileId: string, trackIndex: number, segmentIndex: number): ControlWithMarker {
+        let element = document.createElement('div');
+        element.className = `h-6 w-6 p-0.5 rounded-full bg-white border-2 border-black cursor-pointer`;
+        element.innerHTML = Scissors.replace('width="24"', "").replace('height="24"', "").replace('stroke="currentColor"', 'stroke="black"');
+
+        let marker = new mapboxgl.Marker({
+            draggable: true,
+            className: 'z-10',
+            element
+        }).setLngLat(point.getCoordinates());
+
+        let control = {
+            point,
+            segment,
+            fileId,
+            trackIndex,
+            segmentIndex,
+            marker,
+            inZoom: false
+        };
+
+        marker.getElement().addEventListener('click', (e) => {
+            e.stopPropagation();
+            dbUtils.split(control.fileId, control.trackIndex, control.segmentIndex, control.point.getCoordinates(), control.point._data.index);
+        });
+
+        return control;
+    }
+
+    destroy() {
+        this.remove();
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+}
+
+type Control = {
+    segment: TrackSegment;
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+    point: TrackPoint;
+};
+
+type ControlWithMarker = Control & {
+    marker: mapboxgl.Marker;
+    inZoom: boolean;
+};
diff --git a/website/src/lib/components/ui/accordion/accordion-content.svelte b/website/src/lib/components/ui/accordion/accordion-content.svelte
new file mode 100755
index 0000000..0044cca
--- /dev/null
+++ b/website/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn('overflow-hidden text-sm transition-all mb-4', className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<slot />
+</AccordionPrimitive.Content>
diff --git a/website/src/lib/components/ui/accordion/accordion-item.svelte b/website/src/lib/components/ui/accordion/accordion-item.svelte
new file mode 100755
index 0000000..21a3be6
--- /dev/null
+++ b/website/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>
diff --git a/website/src/lib/components/ui/accordion/accordion-trigger.svelte b/website/src/lib/components/ui/accordion/accordion-trigger.svelte
new file mode 100755
index 0000000..1176922
--- /dev/null
+++ b/website/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/website/src/lib/components/ui/accordion/index.ts b/website/src/lib/components/ui/accordion/index.ts
new file mode 100755
index 0000000..ed49213
--- /dev/null
+++ b/website/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100755
index 0000000..57d643b
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ActionProps;
+	type $$Events = AlertDialogPrimitive.ActionEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action
+	class={cn(buttonVariants(), className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Action>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100755
index 0000000..ef0a953
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.CancelProps;
+	type $$Events = AlertDialogPrimitive.CancelEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Cancel>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100755
index 0000000..256a5ff
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import * as AlertDialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay />
+	<AlertDialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</AlertDialogPrimitive.Content>
+</AlertDialog.Portal>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100755
index 0000000..18acce9
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</AlertDialogPrimitive.Description>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100755
index 0000000..a235d1f
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100755
index 0000000..2650ef9
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100755
index 0000000..3081d75
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
new file mode 100755
index 0000000..e227219
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	type $$Props = AlertDialogPrimitive.PortalProps;
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Portal>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100755
index 0000000..7f98004
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h3";
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Title>
diff --git a/website/src/lib/components/ui/alert-dialog/index.ts b/website/src/lib/components/ui/alert-dialog/index.ts
new file mode 100755
index 0000000..be56dd7
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};
diff --git a/website/src/lib/components/ui/alert/alert-description.svelte b/website/src/lib/components/ui/alert/alert-description.svelte
new file mode 100755
index 0000000..5bbc85a
--- /dev/null
+++ b/website/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/alert/alert-title.svelte b/website/src/lib/components/ui/alert/alert-title.svelte
new file mode 100755
index 0000000..2795342
--- /dev/null
+++ b/website/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/website/src/lib/components/ui/alert/alert.svelte b/website/src/lib/components/ui/alert/alert.svelte
new file mode 100755
index 0000000..e1aa6df
--- /dev/null
+++ b/website/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/alert/index.ts b/website/src/lib/components/ui/alert/index.ts
new file mode 100755
index 0000000..c21bc1e
--- /dev/null
+++ b/website/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,33 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};
diff --git a/website/src/lib/components/ui/button/button.svelte b/website/src/lib/components/ui/button/button.svelte
new file mode 100755
index 0000000..86827f3
--- /dev/null
+++ b/website/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/website/src/lib/components/ui/button/index.ts b/website/src/lib/components/ui/button/index.ts
new file mode 100755
index 0000000..a927293
--- /dev/null
+++ b/website/src/lib/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
diff --git a/website/src/lib/components/ui/calendar/calendar-cell.svelte b/website/src/lib/components/ui/calendar/calendar-cell.svelte
new file mode 100755
index 0000000..ef2bed6
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>
diff --git a/website/src/lib/components/ui/calendar/calendar-day.svelte b/website/src/lib/components/ui/calendar/calendar-day.svelte
new file mode 100755
index 0000000..3124b25
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal ",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>
diff --git a/website/src/lib/components/ui/calendar/calendar-grid-body.svelte b/website/src/lib/components/ui/calendar/calendar-grid-body.svelte
new file mode 100755
index 0000000..80b6f84
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>
diff --git a/website/src/lib/components/ui/calendar/calendar-grid-head.svelte b/website/src/lib/components/ui/calendar/calendar-grid-head.svelte
new file mode 100755
index 0000000..dbe3e8e
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>
diff --git a/website/src/lib/components/ui/calendar/calendar-grid-row.svelte b/website/src/lib/components/ui/calendar/calendar-grid-row.svelte
new file mode 100755
index 0000000..3a1473c
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>
diff --git a/website/src/lib/components/ui/calendar/calendar-grid.svelte b/website/src/lib/components/ui/calendar/calendar-grid.svelte
new file mode 100755
index 0000000..d52c9a7
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>
diff --git a/website/src/lib/components/ui/calendar/calendar-head-cell.svelte b/website/src/lib/components/ui/calendar/calendar-head-cell.svelte
new file mode 100755
index 0000000..49aa39d
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>
diff --git a/website/src/lib/components/ui/calendar/calendar-header.svelte b/website/src/lib/components/ui/calendar/calendar-header.svelte
new file mode 100755
index 0000000..014ff28
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>
diff --git a/website/src/lib/components/ui/calendar/calendar-heading.svelte b/website/src/lib/components/ui/calendar/calendar-heading.svelte
new file mode 100755
index 0000000..409a182
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>
diff --git a/website/src/lib/components/ui/calendar/calendar-months.svelte b/website/src/lib/components/ui/calendar/calendar-months.svelte
new file mode 100755
index 0000000..4621c54
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/calendar/calendar-next-button.svelte b/website/src/lib/components/ui/calendar/calendar-next-button.svelte
new file mode 100755
index 0000000..dd0bffe
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>
diff --git a/website/src/lib/components/ui/calendar/calendar-prev-button.svelte b/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
new file mode 100755
index 0000000..48d8235
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>
diff --git a/website/src/lib/components/ui/calendar/calendar.svelte b/website/src/lib/components/ui/calendar/calendar.svelte
new file mode 100755
index 0000000..0857f3d
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.Props;
+
+	type $$Events = CalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	<Calendar.Months>
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead>
+					<Calendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<Calendar.HeadCell>
+								{weekday.slice(0, 2)}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Calendar.Cell {date}>
+									<Calendar.Day {date} month={month.value} />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</Calendar.Months>
+</CalendarPrimitive.Root>
diff --git a/website/src/lib/components/ui/calendar/index.ts b/website/src/lib/components/ui/calendar/index.ts
new file mode 100755
index 0000000..ab257ab
--- /dev/null
+++ b/website/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};
diff --git a/website/src/lib/components/ui/card/card-content.svelte b/website/src/lib/components/ui/card/card-content.svelte
new file mode 100755
index 0000000..89d82b2
--- /dev/null
+++ b/website/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/card/card-description.svelte b/website/src/lib/components/ui/card/card-description.svelte
new file mode 100755
index 0000000..9a35919
--- /dev/null
+++ b/website/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/website/src/lib/components/ui/card/card-footer.svelte b/website/src/lib/components/ui/card/card-footer.svelte
new file mode 100755
index 0000000..32f90bb
--- /dev/null
+++ b/website/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/card/card-header.svelte b/website/src/lib/components/ui/card/card-header.svelte
new file mode 100755
index 0000000..e474528
--- /dev/null
+++ b/website/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/card/card-title.svelte b/website/src/lib/components/ui/card/card-title.svelte
new file mode 100755
index 0000000..719808e
--- /dev/null
+++ b/website/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/website/src/lib/components/ui/card/card.svelte b/website/src/lib/components/ui/card/card.svelte
new file mode 100755
index 0000000..b4746df
--- /dev/null
+++ b/website/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/card/index.ts b/website/src/lib/components/ui/card/index.ts
new file mode 100755
index 0000000..bcc031d
--- /dev/null
+++ b/website/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/website/src/lib/components/ui/checkbox/checkbox.svelte b/website/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100755
index 0000000..d203953
--- /dev/null
+++ b/website/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	{...$$restProps}
+	on:click
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isChecked}
+			<Check class="h-3.5 w-3.5" />
+		{:else if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
diff --git a/website/src/lib/components/ui/checkbox/index.ts b/website/src/lib/components/ui/checkbox/index.ts
new file mode 100755
index 0000000..6d92d94
--- /dev/null
+++ b/website/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};
diff --git a/website/src/lib/components/ui/collapsible/collapsible-content.svelte b/website/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100755
index 0000000..2a8e5fa
--- /dev/null
+++ b/website/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>
diff --git a/website/src/lib/components/ui/collapsible/index.ts b/website/src/lib/components/ui/collapsible/index.ts
new file mode 100755
index 0000000..168834e
--- /dev/null
+++ b/website/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};
diff --git a/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100755
index 0000000..452d40f
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
+	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</ContextMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-content.svelte b/website/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100755
index 0000000..952ca50
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</ContextMenuPrimitive.Content>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100755
index 0000000..cd91b8b
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = ContextMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.Item>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-label.svelte b/website/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100755
index 0000000..5d52f79
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</ContextMenuPrimitive.Label>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/website/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100755
index 0000000..53fa692
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	type $$Props = ContextMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</ContextMenuPrimitive.RadioGroup>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100755
index 0000000..a0ef943
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.RadioItemProps;
+	type $$Events = ContextMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: ContextMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</ContextMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.RadioItem>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-separator.svelte b/website/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100755
index 0000000..8dc3a61
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-border", className)}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100755
index 0000000..09ab9f8
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100755
index 0000000..20f7e75
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SubContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.SubContent>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100755
index 0000000..2a5f7f5
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/website/src/lib/components/ui/context-menu/index.ts b/website/src/lib/components/ui/context-menu/index.ts
new file mode 100755
index 0000000..7d4af84
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/index.ts
@@ -0,0 +1,49 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+import Item from "./context-menu-item.svelte";
+import Label from "./context-menu-label.svelte";
+import Content from "./context-menu-content.svelte";
+import Shortcut from "./context-menu-shortcut.svelte";
+import RadioItem from "./context-menu-radio-item.svelte";
+import Separator from "./context-menu-separator.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
+import SubContent from "./context-menu-sub-content.svelte";
+import SubTrigger from "./context-menu-sub-trigger.svelte";
+import CheckboxItem from "./context-menu-checkbox-item.svelte";
+
+const Sub = ContextMenuPrimitive.Sub;
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Group = ContextMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as ContextMenu,
+	Sub as ContextMenuSub,
+	Item as ContextMenuItem,
+	Label as ContextMenuLabel,
+	Group as ContextMenuGroup,
+	Content as ContextMenuContent,
+	Trigger as ContextMenuTrigger,
+	Shortcut as ContextMenuShortcut,
+	RadioItem as ContextMenuRadioItem,
+	Separator as ContextMenuSeparator,
+	RadioGroup as ContextMenuRadioGroup,
+	SubContent as ContextMenuSubContent,
+	SubTrigger as ContextMenuSubTrigger,
+	CheckboxItem as ContextMenuCheckboxItem,
+};
diff --git a/website/src/lib/components/ui/date-picker/DatePicker.svelte b/website/src/lib/components/ui/date-picker/DatePicker.svelte
new file mode 100755
index 0000000..07afb06
--- /dev/null
+++ b/website/src/lib/components/ui/date-picker/DatePicker.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import CalendarIcon from 'lucide-svelte/icons/calendar';
+	import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
+	import { cn } from '$lib/utils.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Calendar } from '$lib/components/ui/calendar/index.js';
+	import * as Popover from '$lib/components/ui/popover/index.js';
+
+	export let value: DateValue | undefined = undefined;
+	export let placeholder: string = 'Pick a date';
+	export let locale = 'fr';
+	export let disabled: boolean = false;
+	export let onValueChange: any;
+
+	const df = new DateFormatter(locale, {
+		dateStyle: 'long'
+	});
+</script>
+
+<Popover.Root>
+	<Popover.Trigger asChild let:builder>
+		<Button
+			variant="outline"
+			class={cn(
+				'w-[280px] justify-start text-left font-normal',
+				!value && 'text-muted-foreground',
+				$$props.class
+			)}
+			{disabled}
+			builders={[builder]}
+		>
+			<CalendarIcon class="mr-2 h-4 w-4" />
+			{value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
+		</Button>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto p-0">
+		<Calendar bind:value initialFocus {locale} {onValueChange} />
+	</Popover.Content>
+</Popover.Root>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100755
index 0000000..cbca3c5
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100755
index 0000000..a94b527
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+	type $$Events = DropdownMenuPrimitive.ContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100755
index 0000000..9a05d4b
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.Item>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100755
index 0000000..43f1527
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100755
index 0000000..1c74ae1
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100755
index 0000000..79a48ee
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100755
index 0000000..e14d078
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100755
index 0000000..d8c7378
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+	<slot />
+</span>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100755
index 0000000..ff20507
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubContentProps;
+	type $$Events = DropdownMenuPrimitive.SubContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100755
index 0000000..9ba3916
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/website/src/lib/components/ui/dropdown-menu/index.ts b/website/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100755
index 0000000..c1749e9
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem,
+};
diff --git a/website/src/lib/components/ui/input/index.ts b/website/src/lib/components/ui/input/index.ts
new file mode 100755
index 0000000..75e3bc2
--- /dev/null
+++ b/website/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/website/src/lib/components/ui/input/input.svelte b/website/src/lib/components/ui/input/input.svelte
new file mode 100755
index 0000000..5824137
--- /dev/null
+++ b/website/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/label/index.ts b/website/src/lib/components/ui/label/index.ts
new file mode 100755
index 0000000..8bfca0b
--- /dev/null
+++ b/website/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/website/src/lib/components/ui/label/label.svelte b/website/src/lib/components/ui/label/label.svelte
new file mode 100755
index 0000000..2a7d479
--- /dev/null
+++ b/website/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/website/src/lib/components/ui/menubar/index.ts b/website/src/lib/components/ui/menubar/index.ts
new file mode 100755
index 0000000..62e01eb
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/index.ts
@@ -0,0 +1,52 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+
+import Root from "./menubar.svelte";
+import CheckboxItem from "./menubar-checkbox-item.svelte";
+import Content from "./menubar-content.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import RadioItem from "./menubar-radio-item.svelte";
+import Separator from "./menubar-separator.svelte";
+import Shortcut from "./menubar-shortcut.svelte";
+import SubContent from "./menubar-sub-content.svelte";
+import SubTrigger from "./menubar-sub-trigger.svelte";
+import Trigger from "./menubar-trigger.svelte";
+
+const Menu = MenubarPrimitive.Menu;
+const Group = MenubarPrimitive.Group;
+const Sub = MenubarPrimitive.Sub;
+const RadioGroup = MenubarPrimitive.RadioGroup;
+
+export {
+	Root,
+	CheckboxItem,
+	Content,
+	Item,
+	Label,
+	RadioItem,
+	Separator,
+	Shortcut,
+	SubContent,
+	SubTrigger,
+	Trigger,
+	Menu,
+	Group,
+	Sub,
+	RadioGroup,
+	//
+	Root as Menubar,
+	CheckboxItem as MenubarCheckboxItem,
+	Content as MenubarContent,
+	Item as MenubarItem,
+	Label as MenubarLabel,
+	RadioItem as MenubarRadioItem,
+	Separator as MenubarSeparator,
+	Shortcut as MenubarShortcut,
+	SubContent as MenubarSubContent,
+	SubTrigger as MenubarSubTrigger,
+	Trigger as MenubarTrigger,
+	Menu as MenubarMenu,
+	Group as MenubarGroup,
+	Sub as MenubarSub,
+	RadioGroup as MenubarRadioGroup,
+};
diff --git a/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
new file mode 100755
index 0000000..3d3a58f
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.CheckboxItemProps;
+	type $$Events = MenubarPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+	{...$$restProps}
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<MenubarPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</MenubarPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</MenubarPrimitive.CheckboxItem>
diff --git a/website/src/lib/components/ui/menubar/menubar-content.svelte b/website/src/lib/components/ui/menubar/menubar-content.svelte
new file mode 100755
index 0000000..56b18d1
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-content.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.ContentProps;
+	type $$Events = MenubarPrimitive.ContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 8;
+	export let alignOffset: $$Props["alignOffset"] = -4;
+	export let align: $$Props["align"] = "start";
+	export let side: $$Props["side"] = "bottom";
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{side}
+	class={cn(
+		"z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</MenubarPrimitive.Content>
diff --git a/website/src/lib/components/ui/menubar/menubar-item.svelte b/website/src/lib/components/ui/menubar/menubar-item.svelte
new file mode 100755
index 0000000..543bb7b
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = MenubarPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+>
+	<slot />
+</MenubarPrimitive.Item>
diff --git a/website/src/lib/components/ui/menubar/menubar-label.svelte b/website/src/lib/components/ui/menubar/menubar-label.svelte
new file mode 100755
index 0000000..afd8ffd
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-label.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.Label>
diff --git a/website/src/lib/components/ui/menubar/menubar-radio-item.svelte b/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
new file mode 100755
index 0000000..2de061d
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.RadioItemProps;
+	type $$Events = MenubarPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<MenubarPrimitive.RadioItem
+	{value}
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<MenubarPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</MenubarPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</MenubarPrimitive.RadioItem>
diff --git a/website/src/lib/components/ui/menubar/menubar-separator.svelte b/website/src/lib/components/ui/menubar/menubar-separator.svelte
new file mode 100755
index 0000000..653b18d
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
diff --git a/website/src/lib/components/ui/menubar/menubar-shortcut.svelte b/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
new file mode 100755
index 0000000..09ab9f8
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/website/src/lib/components/ui/menubar/menubar-sub-content.svelte b/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
new file mode 100755
index 0000000..b83bc56
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.SubContentProps;
+	type $$Events = MenubarPrimitive.SubContentEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = { x: -10, y: 0 };
+	export { className as class };
+</script>
+
+<MenubarPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-max rounded-md border bg-popover p-1 text-popover-foreground focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:focusout
+	on:pointermove
+	on:keydown
+>
+	<slot />
+</MenubarPrimitive.SubContent>
diff --git a/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
new file mode 100755
index 0000000..fe92434
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = MenubarPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	on:click
+	{...$$restProps}
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</MenubarPrimitive.SubTrigger>
diff --git a/website/src/lib/components/ui/menubar/menubar-trigger.svelte b/website/src/lib/components/ui/menubar/menubar-trigger.svelte
new file mode 100755
index 0000000..614a4dd
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.TriggerProps;
+	type $$Events = MenubarPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Trigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		className
+	)}
+	on:click
+	on:keydown
+	on:pointerenter
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.Trigger>
diff --git a/website/src/lib/components/ui/menubar/menubar.svelte b/website/src/lib/components/ui/menubar/menubar.svelte
new file mode 100755
index 0000000..f49192b
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = MenubarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Root
+	class={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.Root>
diff --git a/website/src/lib/components/ui/popover/index.ts b/website/src/lib/components/ui/popover/index.ts
new file mode 100755
index 0000000..63aecf9
--- /dev/null
+++ b/website/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
diff --git a/website/src/lib/components/ui/popover/popover-content.svelte b/website/src/lib/components/ui/popover/popover-content.svelte
new file mode 100755
index 0000000..794436c
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</PopoverPrimitive.Content>
diff --git a/website/src/lib/components/ui/radio-group/index.ts b/website/src/lib/components/ui/radio-group/index.ts
new file mode 100755
index 0000000..feefa79
--- /dev/null
+++ b/website/src/lib/components/ui/radio-group/index.ts
@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+const Input = RadioGroupPrimitive.Input;
+
+export {
+	Root,
+	Input,
+	Item,
+	//
+	Root as RadioGroup,
+	Input as RadioGroupInput,
+	Item as RadioGroupItem,
+};
diff --git a/website/src/lib/components/ui/radio-group/radio-group-item.svelte b/website/src/lib/components/ui/radio-group/radio-group-item.svelte
new file mode 100755
index 0000000..9ca6585
--- /dev/null
+++ b/website/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RadioGroupPrimitive.ItemProps;
+	type $$Events = RadioGroupPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<div class="flex items-center justify-center">
+		<RadioGroupPrimitive.ItemIndicator>
+			<Circle class="h-2.5 w-2.5 fill-current text-current" />
+		</RadioGroupPrimitive.ItemIndicator>
+	</div>
+</RadioGroupPrimitive.Item>
diff --git a/website/src/lib/components/ui/radio-group/radio-group.svelte b/website/src/lib/components/ui/radio-group/radio-group.svelte
new file mode 100755
index 0000000..301a925
--- /dev/null
+++ b/website/src/lib/components/ui/radio-group/radio-group.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RadioGroupPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+	<slot />
+</RadioGroupPrimitive.Root>
diff --git a/website/src/lib/components/ui/scroll-area/index.ts b/website/src/lib/components/ui/scroll-area/index.ts
new file mode 100755
index 0000000..e86a25b
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100755
index 0000000..a97f3bb
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area.svelte b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100755
index 0000000..e8e368c
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/website/src/lib/components/ui/select/index.ts b/website/src/lib/components/ui/select/index.ts
new file mode 100755
index 0000000..327541c
--- /dev/null
+++ b/website/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};
diff --git a/website/src/lib/components/ui/select/select-content.svelte b/website/src/lib/components/ui/select/select-content.svelte
new file mode 100755
index 0000000..93d758e
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
diff --git a/website/src/lib/components/ui/select/select-item.svelte b/website/src/lib/components/ui/select/select-item.svelte
new file mode 100755
index 0000000..2cd00a7
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>
diff --git a/website/src/lib/components/ui/select/select-label.svelte b/website/src/lib/components/ui/select/select-label.svelte
new file mode 100755
index 0000000..d966450
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
diff --git a/website/src/lib/components/ui/select/select-separator.svelte b/website/src/lib/components/ui/select/select-separator.svelte
new file mode 100755
index 0000000..bc518e6
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
diff --git a/website/src/lib/components/ui/select/select-trigger.svelte b/website/src/lib/components/ui/select/select-trigger.svelte
new file mode 100755
index 0000000..f5b9306
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
diff --git a/website/src/lib/components/ui/separator/index.ts b/website/src/lib/components/ui/separator/index.ts
new file mode 100755
index 0000000..82442d2
--- /dev/null
+++ b/website/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/website/src/lib/components/ui/separator/separator.svelte b/website/src/lib/components/ui/separator/separator.svelte
new file mode 100755
index 0000000..be3843a
--- /dev/null
+++ b/website/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/sheet/index.ts b/website/src/lib/components/ui/sheet/index.ts
new file mode 100755
index 0000000..1a69032
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,106 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { type VariantProps, tv } from "tailwind-variants";
+
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
+
+export const sheetVariants = tv({
+	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	variants: {
+		side: {
+			top: "inset-x-0 top-0 border-b",
+			bottom: "inset-x-0 bottom-0 border-t",
+			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
+		},
+	},
+	defaultVariants: {
+		side: "right",
+	},
+});
+
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	bottom: {
+		in: {
+			y: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	left: {
+		in: {
+			x: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	right: {
+		in: {
+			x: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+};
+
+export type Side = VariantProps<typeof sheetVariants>["side"];
diff --git a/website/src/lib/components/ui/sheet/sheet-content.svelte b/website/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100755
index 0000000..b545c90
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import { fly } from "svelte/transition";
+	import {
+		SheetOverlay,
+		SheetPortal,
+		type Side,
+		sheetTransitions,
+		sheetVariants,
+	} from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SheetPrimitive.ContentProps & {
+		side?: Side;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let side: $$Props["side"] = "right";
+	export { className as class };
+	export let inTransition: $$Props["inTransition"] = fly;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] =
+		sheetTransitions[side ?? "right"].in;
+	export let outTransition: $$Props["outTransition"] = fly;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] =
+		sheetTransitions[side ?? "right"].out;
+</script>
+
+<SheetPortal>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		{inTransition}
+		{inTransitionConfig}
+		{outTransition}
+		{outTransitionConfig}
+		class={cn(sheetVariants({ side }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/website/src/lib/components/ui/sheet/sheet-description.svelte b/website/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100755
index 0000000..e1827e1
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SheetPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Description>
diff --git a/website/src/lib/components/ui/sheet/sheet-footer.svelte b/website/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100755
index 0000000..a235d1f
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/sheet/sheet-header.svelte b/website/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100755
index 0000000..366b286
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-2 sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/website/src/lib/components/ui/sheet/sheet-overlay.svelte b/website/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100755
index 0000000..3709092
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SheetPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/sheet/sheet-portal.svelte b/website/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100755
index 0000000..5543a3b
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SheetPrimitive.PortalProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>
diff --git a/website/src/lib/components/ui/sheet/sheet-title.svelte b/website/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100755
index 0000000..8631410
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SheetPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn("text-lg font-semibold text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>
diff --git a/website/src/lib/components/ui/slider/index.ts b/website/src/lib/components/ui/slider/index.ts
new file mode 100755
index 0000000..820f209
--- /dev/null
+++ b/website/src/lib/components/ui/slider/index.ts
@@ -0,0 +1,7 @@
+import Root from "./slider.svelte";
+
+export {
+	Root,
+	//
+	Root as Slider,
+};
diff --git a/website/src/lib/components/ui/slider/slider.svelte b/website/src/lib/components/ui/slider/slider.svelte
new file mode 100755
index 0000000..b6503cb
--- /dev/null
+++ b/website/src/lib/components/ui/slider/slider.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SliderPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = [0];
+	export { className as class };
+</script>
+
+<SliderPrimitive.Root
+	bind:value
+	class={cn("relative flex w-full touch-none select-none items-center", className)}
+	{...$$restProps}
+	let:thumbs
+>
+	<span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+		<SliderPrimitive.Range class="absolute h-full bg-primary" />
+	</span>
+	{#each thumbs as thumb}
+		<SliderPrimitive.Thumb
+			{thumb}
+			class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+		/>
+	{/each}
+</SliderPrimitive.Root>
diff --git a/website/src/lib/components/ui/sonner/index.ts b/website/src/lib/components/ui/sonner/index.ts
new file mode 100755
index 0000000..1ad9f4a
--- /dev/null
+++ b/website/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/website/src/lib/components/ui/sonner/sonner.svelte b/website/src/lib/components/ui/sonner/sonner.svelte
new file mode 100755
index 0000000..7d5b2f1
--- /dev/null
+++ b/website/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...$$restProps}
+/>
diff --git a/website/src/lib/components/ui/switch/index.ts b/website/src/lib/components/ui/switch/index.ts
new file mode 100755
index 0000000..f5533db
--- /dev/null
+++ b/website/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/website/src/lib/components/ui/switch/switch.svelte b/website/src/lib/components/ui/switch/switch.svelte
new file mode 100755
index 0000000..c6bcfd2
--- /dev/null
+++ b/website/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/website/src/lib/components/ui/textarea/index.ts b/website/src/lib/components/ui/textarea/index.ts
new file mode 100755
index 0000000..6eb6ba3
--- /dev/null
+++ b/website/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,28 @@
+import Root from "./textarea.svelte";
+
+type FormTextareaEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLTextAreaElement;
+};
+
+type TextareaEvents = {
+	blur: FormTextareaEvent<FocusEvent>;
+	change: FormTextareaEvent<Event>;
+	click: FormTextareaEvent<MouseEvent>;
+	focus: FormTextareaEvent<FocusEvent>;
+	keydown: FormTextareaEvent<KeyboardEvent>;
+	keypress: FormTextareaEvent<KeyboardEvent>;
+	keyup: FormTextareaEvent<KeyboardEvent>;
+	mouseover: FormTextareaEvent<MouseEvent>;
+	mouseenter: FormTextareaEvent<MouseEvent>;
+	mouseleave: FormTextareaEvent<MouseEvent>;
+	paste: FormTextareaEvent<ClipboardEvent>;
+	input: FormTextareaEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Textarea,
+	type TextareaEvents,
+	type FormTextareaEvent,
+};
diff --git a/website/src/lib/components/ui/textarea/textarea.svelte b/website/src/lib/components/ui/textarea/textarea.svelte
new file mode 100755
index 0000000..d786257
--- /dev/null
+++ b/website/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { TextareaEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLTextareaAttributes;
+	type $$Events = TextareaEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<textarea
+	class={cn(
+		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+></textarea>
diff --git a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
new file mode 100755
index 0000000..7a65aae
--- /dev/null
+++ b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+
+	export let value: string | number;
+</script>
+
+<div>
+	<Input
+		type="text"
+		step={1}
+		bind:value
+		on:input
+		on:change
+		on:keypress
+		on:focusin={() => {
+			let input = document.activeElement;
+			if (input instanceof HTMLInputElement) {
+				input.select();
+			}
+		}}
+		on:focusin
+		class="w-[22px] {$$props.class ?? ''}"
+		{...$$restProps}
+	/>
+</div>
+
+<style lang="postcss">
+	div :global(input) {
+		@apply px-0.5;
+		@apply text-right;
+		@apply border-none;
+		@apply focus:ring-0;
+		@apply focus:ring-offset-0;
+		@apply focus:outline-none;
+		@apply focus-visible:ring-0;
+		@apply focus-visible:ring-offset-0;
+		@apply focus-visible:outline-none;
+	}
+</style>
diff --git a/website/src/lib/components/ui/time-picker/TimePicker.svelte b/website/src/lib/components/ui/time-picker/TimePicker.svelte
new file mode 100755
index 0000000..9de2368
--- /dev/null
+++ b/website/src/lib/components/ui/time-picker/TimePicker.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import TimeComponentInput from './TimeComponentInput.svelte';
+
+	export let showHours = true;
+	export let value: number | undefined = undefined;
+	export let disabled: boolean = false;
+	export let onChange = () => {};
+
+	let hours: string | number = '--';
+	let minutes: string | number = '--';
+	let seconds: string | number = '--';
+
+	function maybeParseInt(value: string | number): number {
+		if (value === '--' || value === '') {
+			return 0;
+		}
+		return typeof value === 'string' ? parseInt(value) : value;
+	}
+
+	function computeValue() {
+		return Math.max(
+			maybeParseInt(hours) * 3600 + maybeParseInt(minutes) * 60 + maybeParseInt(seconds),
+			1
+		);
+	}
+
+	function updateValue() {
+		value = computeValue();
+	}
+
+	$: hours, minutes, seconds, updateValue();
+
+	$: if (value === undefined) {
+		hours = '--';
+		minutes = '--';
+		seconds = '--';
+	} else if (value !== computeValue()) {
+		let rounded = Math.max(Math.round(value), 1);
+		if (showHours) {
+			hours = Math.floor(rounded / 3600);
+			minutes = Math.floor((rounded % 3600) / 60)
+				.toString()
+				.padStart(2, '0');
+		} else {
+			minutes = Math.floor(rounded / 60).toString();
+		}
+		seconds = (rounded % 60).toString().padStart(2, '0');
+	}
+
+	let container: HTMLDivElement;
+	let countKeyPress = 0;
+	function onKeyPress(e) {
+		if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
+			countKeyPress++;
+			if (countKeyPress === 2) {
+				if (e.target.id === 'hours') {
+					container.querySelector('#minutes')?.focus();
+				} else if (e.target.id === 'minutes') {
+					container.querySelector('#seconds')?.focus();
+				}
+			}
+		}
+	}
+</script>
+
+<div
+	bind:this={container}
+	class="flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
+		? 'opacity-50 cursor-not-allowed'
+		: ''}"
+>
+	{#if showHours}
+		<TimeComponentInput
+			id="hours"
+			bind:value={hours}
+			{disabled}
+			class="w-[30px]"
+			on:input={() => {
+				if (typeof hours === 'string') {
+					hours = parseInt(hours);
+				}
+				if (hours >= 0) {
+				} else if (hours < 0) {
+					hours = 0;
+				} else {
+					hours = 0;
+				}
+				onChange();
+			}}
+			on:keypress={onKeyPress}
+			on:focusin={() => {
+				countKeyPress = 0;
+			}}
+		/>
+		<span class="text-sm">:</span>
+	{/if}
+	<TimeComponentInput
+		id="minutes"
+		bind:value={minutes}
+		{disabled}
+		on:input={() => {
+			if (typeof minutes === 'string') {
+				minutes = parseInt(minutes);
+			}
+			if (minutes >= 0 && (minutes <= 59 || !showHours)) {
+			} else if (minutes < 0) {
+				minutes = 0;
+			} else if (showHours && minutes > 59) {
+				minutes = 59;
+			} else {
+				minutes = 0;
+			}
+			minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
+			onChange();
+		}}
+		on:keypress={onKeyPress}
+		on:focusin={() => {
+			countKeyPress = 0;
+		}}
+	/>
+	<span class="text-sm">:</span>
+	<TimeComponentInput
+		id="seconds"
+		bind:value={seconds}
+		{disabled}
+		on:input={() => {
+			if (typeof seconds === 'string') {
+				seconds = parseInt(seconds);
+			}
+			if (seconds >= 0 && seconds <= 59) {
+			} else if (seconds < 0) {
+				seconds = 0;
+			} else if (seconds > 59) {
+				seconds = 59;
+			} else {
+				seconds = 0;
+			}
+			seconds = seconds.toString().padStart(2, '0');
+			onChange();
+		}}
+		on:keypress={onKeyPress}
+		on:focusin={() => {
+			countKeyPress = 0;
+		}}
+	/>
+</div>
+
+<style>
+	div :global(input::-webkit-outer-spin-button) {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	div :global(input::-webkit-inner-spin-button) {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	div :global(input[type='number']) {
+		-moz-appearance: textfield;
+	}
+</style>
diff --git a/website/src/lib/components/ui/toggle-group/index.ts b/website/src/lib/components/ui/toggle-group/index.ts
new file mode 100755
index 0000000..053ebbc
--- /dev/null
+++ b/website/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,23 @@
+import type { VariantProps } from "tailwind-variants";
+import { getContext, setContext } from "svelte";
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+export function setToggleGroupCtx(props: ToggleVariants) {
+	setContext("toggleGroup", props);
+}
+
+export function getToggleGroupCtx() {
+	return getContext<ToggleVariants>("toggleGroup");
+}
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};
diff --git a/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100755
index 0000000..1984884
--- /dev/null
+++ b/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { type ToggleVariants, getToggleGroupCtx } from "./index.js";
+	import { cn } from "$lib/utils.js";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+
+	let className: string | undefined | null = undefined;
+
+	export { className as class };
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let value: $$Props["value"];
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</ToggleGroupPrimitive.Item>
diff --git a/website/src/lib/components/ui/toggle-group/toggle-group.svelte b/website/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100755
index 0000000..4077c11
--- /dev/null
+++ b/website/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { VariantProps } from "tailwind-variants";
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { setToggleGroupCtx } from "./index.js";
+	import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type T = $$Generic<"single" | "multiple">;
+	type $$Props = ToggleGroupPrimitive.Props<T> & VariantProps<typeof toggleVariants>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let value: $$Props["value"] = undefined;
+
+	setToggleGroupCtx({
+		variant,
+		size,
+	});
+</script>
+
+<ToggleGroupPrimitive.Root
+	class={cn("flex items-center justify-center gap-1", className)}
+	bind:value
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder} />
+</ToggleGroupPrimitive.Root>
diff --git a/website/src/lib/components/ui/toggle/index.ts b/website/src/lib/components/ui/toggle/index.ts
new file mode 100755
index 0000000..1ab27ca
--- /dev/null
+++ b/website/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,31 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import Root from "./toggle.svelte";
+
+export const toggleVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline:
+				"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+		},
+		size: {
+			default: "h-10 px-3",
+			sm: "h-9 px-2.5",
+			lg: "h-11 px-5",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof toggleVariants>["variant"];
+export type Size = VariantProps<typeof toggleVariants>["size"];
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};
diff --git a/website/src/lib/components/ui/toggle/toggle.svelte b/website/src/lib/components/ui/toggle/toggle.svelte
new file mode 100755
index 0000000..2f27b43
--- /dev/null
+++ b/website/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { type Size, type Variant, toggleVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = TogglePrimitive.Props & {
+		variant?: Variant;
+		size?: Size;
+	};
+	type $$Events = TogglePrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let pressed: $$Props["pressed"] = undefined;
+	export { className as class };
+</script>
+
+<TogglePrimitive.Root
+	bind:pressed
+	class={cn(toggleVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:click
+>
+	<slot />
+</TogglePrimitive.Root>
diff --git a/website/src/lib/components/ui/tooltip/index.ts b/website/src/lib/components/ui/tooltip/index.ts
new file mode 100755
index 0000000..7d0444d
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/website/src/lib/components/ui/tooltip/tooltip-content.svelte b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100755
index 0000000..3c00a4e
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts
new file mode 100755
index 0000000..abfd203
--- /dev/null
+++ b/website/src/lib/db.ts
@@ -0,0 +1,1133 @@
+import Dexie, { liveQuery } from 'dexie';
+import { GPXFile, GPXStatistics, Track, TrackSegment, Waypoint, TrackPoint, type Coordinates, distance, type LineStyleExtension, type WaypointType } from 'gpx';
+import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, freeze, produceWithPatches } from 'immer';
+import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
+import { gpxStatistics, initTargetMapBounds, map, splitAs, updateAllHidden, updateTargetMapBounds } from './stores';
+import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities, defaultOverpassQueries, defaultOverpassTree } from './assets/layers';
+import { applyToOrderedItemsFromFile, applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection';
+import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList';
+import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
+import { SplitType } from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+import { getClosestLinePoint, getElevation } from '$lib/utils';
+import { browser } from '$app/environment';
+import type mapboxgl from 'mapbox-gl';
+
+enableMapSet();
+enablePatches();
+
+class Database extends Dexie {
+
+    fileids!: Dexie.Table<string, string>;
+    files!: Dexie.Table<GPXFile, string>;
+    patches!: Dexie.Table<{ patch: Patch[], inversePatch: Patch[], index: number }, number>;
+    settings!: Dexie.Table<any, string>;
+    overpasstiles!: Dexie.Table<{ query: string, x: number, y: number, time: number }, [string, number, number]>;
+    overpassdata!: Dexie.Table<{ query: string, id: number, poi: GeoJSON.Feature }, [string, number]>;
+
+    constructor() {
+        super("Database", {
+            cache: 'immutable'
+        });
+        this.version(1).stores({
+            fileids: ',&fileid',
+            files: '',
+            patches: ',patch',
+            settings: '',
+            overpasstiles: '[query+x+y],[x+y]',
+            overpassdata: '[query+id]',
+        });
+    }
+}
+
+export const db = new Database();
+
+// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, and updates to the store are pushed to the DB
+export function bidirectionalDexieStore<K, V>(table: Dexie.Table<V, K>, key: K, initial: V, initialize: boolean = true): Writable<V | undefined> {
+    let first = true;
+    let store = writable<V | undefined>(initialize ? initial : undefined);
+    liveQuery(() => table.get(key)).subscribe(value => {
+        if (value === undefined) {
+            if (first) {
+                if (!initialize) {
+                    store.set(initial);
+                }
+            } else {
+                store.set(value);
+            }
+        } else {
+            store.set(value);
+        }
+        first = false;
+    });
+    return {
+        subscribe: store.subscribe,
+        set: (value: any) => {
+            if (typeof value === 'object' || value !== get(store)) {
+                table.put(value, key);
+            }
+        },
+        update: (callback: (value: any) => any) => {
+            let newValue = callback(get(store));
+            if (typeof newValue === 'object' || newValue !== get(store)) {
+                table.put(newValue, key);
+            }
+        }
+    };
+}
+
+export function dexieSettingStore<T>(key: string, initial: T, initialize: boolean = true): Writable<T> {
+    return bidirectionalDexieStore(db.settings, key, initial, initialize);
+}
+
+export const settings = {
+    distanceUnits: dexieSettingStore<'metric' | 'imperial' | 'nautical'>('distanceUnits', 'metric'),
+    velocityUnits: dexieSettingStore<'speed' | 'pace'>('velocityUnits', 'speed'),
+    temperatureUnits: dexieSettingStore<'celsius' | 'fahrenheit'>('temperatureUnits', 'celsius'),
+    elevationProfile: dexieSettingStore('elevationProfile', true),
+    additionalDatasets: dexieSettingStore<string[]>('additionalDatasets', []),
+    elevationFill: dexieSettingStore<'slope' | 'surface' | undefined>('elevationFill', undefined),
+    verticalFileView: dexieSettingStore<boolean>('fileView', false),
+    minimizeRoutingMenu: dexieSettingStore('minimizeRoutingMenu', false),
+    routing: dexieSettingStore('routing', true),
+    routingProfile: dexieSettingStore('routingProfile', 'bike'),
+    privateRoads: dexieSettingStore('privateRoads', false),
+    currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
+    previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
+    selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
+    currentOverlays: dexieSettingStore('currentOverlays', defaultOverlays, false),
+    previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
+    selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
+    currentOverpassQueries: dexieSettingStore('currentOverpassQueries', defaultOverpassQueries, false),
+    selectedOverpassTree: dexieSettingStore('selectedOverpassTree', defaultOverpassTree),
+    opacities: dexieSettingStore('opacities', defaultOpacities),
+    customLayers: dexieSettingStore<Record<string, CustomLayer>>('customLayers', {}),
+    customBasemapOrder: dexieSettingStore<string[]>('customBasemapOrder', []),
+    customOverlayOrder: dexieSettingStore<string[]>('customOverlayOrder', []),
+    directionMarkers: dexieSettingStore('directionMarkers', false),
+    distanceMarkers: dexieSettingStore('distanceMarkers', false),
+    streetViewSource: dexieSettingStore('streetViewSource', 'mapillary'),
+    fileOrder: dexieSettingStore<string[]>('fileOrder', []),
+    defaultOpacity: dexieSettingStore('defaultOpacity', 0.7),
+    defaultWeight: dexieSettingStore('defaultWeight', (browser && window.innerWidth < 600) ? 8 : 5),
+    bottomPanelSize: dexieSettingStore('bottomPanelSize', 170),
+    rightPanelSize: dexieSettingStore('rightPanelSize', 240),
+};
+
+// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber
+function dexieStore<T>(querier: () => T | Promise<T>, initial?: T): Readable<T> {
+    let store = writable<T>(initial);
+    liveQuery(querier).subscribe(value => {
+        if (value !== undefined) {
+            store.set(value);
+        }
+    });
+    return {
+        subscribe: store.subscribe,
+    };
+}
+
+export class GPXStatisticsTree {
+    level: ListLevel;
+    statistics: {
+        [key: number]: GPXStatisticsTree | GPXStatistics;
+    } = {};
+
+    constructor(element: GPXFile | Track) {
+        if (element instanceof GPXFile) {
+            this.level = ListLevel.FILE;
+            element.children.forEach((child, index) => {
+                this.statistics[index] = new GPXStatisticsTree(child);
+            });
+        } else {
+            this.level = ListLevel.TRACK;
+            element.children.forEach((child, index) => {
+                this.statistics[index] = child.getStatistics();
+            });
+        }
+    }
+
+    getStatisticsFor(item: ListItem): GPXStatistics {
+        let statistics = new GPXStatistics();
+        let id = item.getIdAtLevel(this.level);
+        if (id === undefined || id === 'waypoints') {
+            Object.keys(this.statistics).forEach(key => {
+                if (this.statistics[key] instanceof GPXStatistics) {
+                    statistics.mergeWith(this.statistics[key]);
+                } else {
+                    statistics.mergeWith(this.statistics[key].getStatisticsFor(item));
+                }
+            });
+        } else {
+            let child = this.statistics[id];
+            if (child instanceof GPXStatistics) {
+                statistics.mergeWith(child);
+            } else if (child !== undefined) {
+                statistics.mergeWith(child.getStatisticsFor(item));
+            }
+        }
+        return statistics;
+    }
+};
+export type GPXFileWithStatistics = { file: GPXFile, statistics: GPXStatisticsTree };
+
+// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, also takes care of the conversion to a GPXFile object
+function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { destroy: () => void } {
+    let store = writable<GPXFileWithStatistics>(undefined);
+    let query = liveQuery(() => db.files.get(id)).subscribe(value => {
+        if (value !== undefined) {
+            let gpx = new GPXFile(value);
+            updateAnchorPoints(gpx);
+
+            let statistics = new GPXStatisticsTree(gpx);
+            if (!fileState.has(id)) { // Update the map bounds for new files
+                updateTargetMapBounds(id, statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
+            }
+
+            fileState.set(id, gpx);
+            store.set({
+                file: gpx,
+                statistics
+            });
+
+            if (get(selection).hasAnyChildren(new ListFileItem(id))) {
+                updateAllHidden();
+            }
+        }
+    });
+    return {
+        subscribe: store.subscribe,
+        destroy: () => {
+            fileState.delete(id);
+            query.unsubscribe();
+        }
+    };
+}
+
+function updateSelection(updatedFiles: GPXFile[], deletedFileIds: string[]) {
+    let removedItems: ListItem[] = [];
+
+    applyToOrderedItemsFromFile(get(selection).getSelected(), (fileId, level, items) => {
+        let file = updatedFiles.find((file) => file._data.id === fileId);
+        if (file) {
+            items.forEach((item) => {
+                if (item instanceof ListTrackItem) {
+                    let newTrackIndex = file.trk.findIndex((track) => track._data.trackIndex === item.getTrackIndex());
+                    if (newTrackIndex === -1) {
+                        removedItems.push(item);
+                    }
+                } else if (item instanceof ListTrackSegmentItem) {
+                    let newTrackIndex = file.trk.findIndex((track) => track._data.trackIndex === item.getTrackIndex());
+                    if (newTrackIndex === -1) {
+                        removedItems.push(item);
+                    } else {
+                        let newSegmentIndex = file.trk[newTrackIndex].trkseg.findIndex((segment) => segment._data.segmentIndex === item.getSegmentIndex());
+                        if (newSegmentIndex === -1) {
+                            removedItems.push(item);
+                        }
+                    }
+                } else if (item instanceof ListWaypointItem) {
+                    let newWaypointIndex = file.wpt.findIndex((wpt) => wpt._data.index === item.getWaypointIndex());
+                    if (newWaypointIndex === -1) {
+                        removedItems.push(item);
+                    }
+                }
+            });
+        } else if (deletedFileIds.includes(fileId)) {
+            items.forEach((item) => {
+                removedItems.push(item);
+            });
+        }
+    });
+
+    if (removedItems.length > 0) {
+        selection.update(($selection) => {
+            removedItems.forEach((item) => {
+                if (item instanceof ListFileItem) {
+                    $selection.deleteChild(item.getFileId());
+                } else {
+                    $selection.set(item, false);
+                }
+            });
+            return $selection;
+        });
+    }
+}
+
+// Commit the changes to the file state to the database
+function commitFileStateChange(newFileState: ReadonlyMap<string, GPXFile>, patch: Patch[]) {
+    let changedFileIds = getChangedFileIds(patch);
+    let updatedFileIds: string[] = [], deletedFileIds: string[] = [];
+
+    changedFileIds.forEach(id => {
+        if (newFileState.has(id)) {
+            updatedFileIds.push(id);
+        } else {
+            deletedFileIds.push(id);
+        }
+    });
+
+    let updatedFiles = updatedFileIds.map(id => newFileState.get(id)).filter(file => file !== undefined) as GPXFile[];
+    updatedFileIds = updatedFiles.map(file => file._data.id);
+
+    updateSelection(updatedFiles, deletedFileIds);
+
+    return db.transaction('rw', db.fileids, db.files, async () => {
+        if (updatedFileIds.length > 0) {
+            await db.fileids.bulkPut(updatedFileIds, updatedFileIds);
+            await db.files.bulkPut(updatedFiles, updatedFileIds);
+        }
+        if (deletedFileIds.length > 0) {
+            await db.fileids.bulkDelete(deletedFileIds);
+            await db.files.bulkDelete(deletedFileIds);
+        }
+    });
+}
+
+export const fileObservers: Writable<Map<string, Readable<GPXFileWithStatistics | undefined> & { destroy?: () => void }>> = writable(new Map());
+const fileState: Map<string, GPXFile> = new Map(); // Used to generate patches
+
+// Observe the file ids in the database, and maintain a map of file observers for the corresponding files
+export function observeFilesFromDatabase(fitBounds: boolean) {
+    let initialize = true;
+    liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
+        if (initialize) {
+            if (fitBounds && dbFileIds.length > 0) {
+                initTargetMapBounds(dbFileIds);
+            }
+            initialize = false;
+        }
+        // Find new files to observe
+        let newFiles = dbFileIds.filter(id => !get(fileObservers).has(id)).sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
+        // Find deleted files to stop observing
+        let deletedFiles = Array.from(get(fileObservers).keys()).filter(id => !dbFileIds.find(fileId => fileId === id));
+
+        // Update the store
+        if (newFiles.length > 0 || deletedFiles.length > 0) {
+            fileObservers.update($files => {
+                newFiles.forEach(id => {
+                    $files.set(id, dexieGPXFileStore(id));
+                });
+                deletedFiles.forEach(id => {
+                    $files.get(id)?.destroy?.();
+                    $files.delete(id);
+                });
+                return $files;
+            });
+            settings.fileOrder.update((order) => {
+                newFiles.forEach((fileId) => {
+                    if (!order.includes(fileId)) {
+                        order.push(fileId);
+                    }
+                });
+                deletedFiles.forEach((fileId) => {
+                    let index = order.indexOf(fileId);
+                    if (index !== -1) {
+                        order.splice(index, 1);
+                    }
+                });
+                return order;
+            });
+        }
+    });
+}
+
+export function getFile(fileId: string): GPXFile | undefined {
+    let fileStore = get(fileObservers).get(fileId);
+    return fileStore ? get(fileStore)?.file : undefined;
+}
+
+export function getStatistics(fileId: string): GPXStatisticsTree | undefined {
+    let fileStore = get(fileObservers).get(fileId);
+    return fileStore ? get(fileStore)?.statistics : undefined;
+}
+
+const patchIndex: Readable<number> = dexieStore(() => db.settings.get('patchIndex'), -1);
+const patchMinMaxIndex: Readable<{ min: number, max: number }> = dexieStore(() => db.patches.orderBy(':id').keys().then(keys => {
+    if (keys.length === 0) {
+        return { min: 0, max: 0 };
+    } else {
+        return { min: keys[0], max: keys[keys.length - 1] + 1 };
+    }
+}), { min: 0, max: 0 });
+export const canUndo: Readable<boolean> = derived([patchIndex, patchMinMaxIndex], ([$patchIndex, $patchMinMaxIndex]) => $patchIndex >= $patchMinMaxIndex.min);
+export const canRedo: Readable<boolean> = derived([patchIndex, patchMinMaxIndex], ([$patchIndex, $patchMinMaxIndex]) => $patchIndex < $patchMinMaxIndex.max - 1);
+
+// Helper function to apply a callback to the global file state
+function applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, callback);
+
+    storePatches(patch, inversePatch);
+
+    return commitFileStateChange(newFileState, patch);
+}
+
+// Helper function to apply a callback to multiple files
+function applyToFiles(fileIds: string[], callback: (file: WritableDraft<GPXFile>) => void) {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
+        fileIds.forEach((fileId) => {
+            let file = draft.get(fileId);
+            if (file) {
+                callback(file);
+            }
+        });
+    });
+
+    storePatches(patch, inversePatch);
+
+    return commitFileStateChange(newFileState, patch);
+}
+
+// Helper function to apply different callbacks to multiple files
+function applyEachToFilesAndGlobal(fileIds: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => void)[], globalCallback: (files: Map<string, GPXFile>, context?: any) => void, context?: any) {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
+        fileIds.forEach((fileId, index) => {
+            let file = draft.get(fileId);
+            if (file) {
+                callbacks[index](file, context);
+            }
+        });
+        globalCallback(draft, context);
+    });
+
+    storePatches(patch, inversePatch);
+
+    return commitFileStateChange(newFileState, patch);
+}
+
+const MAX_PATCHES = 100;
+// Store the new patches in the database
+async function storePatches(patch: Patch[], inversePatch: Patch[]) {
+    if (get(patchIndex) !== undefined) {
+        db.patches.where(':id').above(get(patchIndex)).delete(); // Delete all patches after the current patch to avoid redoing them
+        let minmax = get(patchMinMaxIndex);
+        if (minmax.max - minmax.min + 1 > MAX_PATCHES) {
+            db.patches.where(':id').belowOrEqual(get(patchMinMaxIndex).max - MAX_PATCHES).delete();
+        }
+    }
+    db.transaction('rw', db.patches, db.settings, async () => {
+        let index = get(patchIndex) + 1;
+        await db.patches.put({
+            patch,
+            inversePatch,
+            index
+        }, index);
+        await db.settings.put(index, 'patchIndex');
+    });
+}
+
+// Apply a patch to the file state
+function applyPatch(patch: Patch[]) {
+    let newFileState = applyPatches(fileState, patch);
+    return commitFileStateChange(newFileState, patch);
+}
+
+// Get the file ids of the files that have changed in the patch
+function getChangedFileIds(patch: Patch[]): string[] {
+    let changedFileIds = new Set<string>();
+    for (let p of patch) {
+        changedFileIds.add(p.path[0]);
+    }
+    return Array.from(changedFileIds);
+}
+
+// Generate unique file ids, different from the ones in the database
+export function getFileIds(n: number) {
+    let ids = [];
+    for (let index = 0; ids.length < n; index++) {
+        let id = `gpx-${index}`;
+        if (!get(fileObservers).has(id)) {
+            ids.push(id);
+        }
+    }
+    return ids;
+}
+
+// Helper functions for file operations
+export const dbUtils = {
+    add: (file: GPXFile) => {
+        if (file._data.id === undefined) {
+            file._data.id = getFileIds(1)[0];
+        }
+        return applyGlobal((draft) => {
+            draft.set(file._data.id, freeze(file));
+        });
+    },
+    addMultiple: (files: GPXFile[]) => {
+        let ids = getFileIds(files.length);
+        applyGlobal((draft) => {
+            files.forEach((file, index) => {
+                file._data.id = ids[index];
+                draft.set(file._data.id, freeze(file));
+            });
+        });
+        return ids;
+    },
+    applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => void) => {
+        applyToFiles([id], callback);
+    },
+    applyToFiles: (ids: string[], callback: (file: WritableDraft<GPXFile>) => void) => {
+        applyToFiles(ids, callback);
+    },
+    applyEachToFilesAndGlobal: (ids: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => void)[], globalCallback: (files: Map<string, GPXFile>, context?: any) => void, context?: any) => {
+        applyEachToFilesAndGlobal(ids, callbacks, globalCallback, context);
+    },
+    duplicateSelection: () => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            let ids = getFileIds(get(settings.fileOrder).length);
+            let index = 0;
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                if (level === ListLevel.FILE) {
+                    let file = getFile(fileId);
+                    if (file) {
+                        let newFile = file.clone();
+                        newFile._data.id = ids[index++];
+                        draft.set(newFile._data.id, freeze(newFile));
+                    }
+                } else {
+                    let file = draft.get(fileId);
+                    if (file) {
+                        if (level === ListLevel.TRACK) {
+                            for (let item of items) {
+                                let trackIndex = (item as ListTrackItem).getTrackIndex();
+                                file.replaceTracks(trackIndex + 1, trackIndex, [file.trk[trackIndex].clone()]);
+                            }
+                        } else if (level === ListLevel.SEGMENT) {
+                            for (let item of items) {
+                                let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
+                                let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
+                                file.replaceTrackSegments(trackIndex, segmentIndex + 1, segmentIndex, [file.trk[trackIndex].trkseg[segmentIndex].clone()]);
+                            }
+                        } else if (level === ListLevel.WAYPOINTS) {
+                            file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, file.wpt.map((wpt) => wpt.clone()));
+                        } else if (level === ListLevel.WAYPOINT) {
+                            for (let item of items) {
+                                let waypointIndex = (item as ListWaypointItem).getWaypointIndex();
+                                file.replaceWaypoints(waypointIndex + 1, waypointIndex, [file.wpt[waypointIndex].clone()]);
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    },
+    addNewTrack: (fileId: string) => {
+        dbUtils.applyToFile(fileId, (file) => file.replaceTracks(file.trk.length, file.trk.length, [new Track()]));
+    },
+    addNewSegment: (fileId: string, trackIndex: number) => {
+        dbUtils.applyToFile(fileId, (file) => {
+            let track = file.trk[trackIndex];
+            track.replaceTrackSegments(track.trkseg.length, track.trkseg.length, [new TrackSegment()]);
+        });
+    },
+    reverseSelection: () => {
+        if (!get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints']) || get(gpxStatistics).local.points?.length <= 1) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    if (level === ListLevel.FILE) {
+                        file.reverse();
+                    } else if (level === ListLevel.TRACK) {
+                        for (let item of items) {
+                            let trackIndex = (item as ListTrackItem).getTrackIndex();
+                            file.reverseTrack(trackIndex);
+                        }
+                    } else if (level === ListLevel.SEGMENT) {
+                        for (let item of items) {
+                            let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
+                            let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
+                            file.reverseTrackSegment(trackIndex, segmentIndex);
+                        }
+                    }
+                }
+            });
+        });
+    },
+    createRoundTripForSelection() {
+        if (!get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    if (level === ListLevel.FILE) {
+                        file.roundTrip();
+                    } else if (level === ListLevel.TRACK) {
+                        for (let item of items) {
+                            let trackIndex = (item as ListTrackItem).getTrackIndex();
+                            file.roundTripTrack(trackIndex);
+                        }
+                    } else if (level === ListLevel.SEGMENT) {
+                        for (let item of items) {
+                            let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
+                            let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
+                            file.roundTripTrackSegment(trackIndex, segmentIndex);
+                        }
+                    }
+                }
+            });
+        });
+    },
+    mergeSelection: (mergeTraces: boolean) => {
+        applyGlobal((draft) => {
+            let first = true;
+            let target: ListItem = new ListRootItem();
+            let targetFile: GPXFile | undefined = undefined;
+            let toMerge: {
+                trk: Track[],
+                trkseg: TrackSegment[],
+                wpt: Waypoint[]
+            } = {
+                trk: [],
+                trkseg: [],
+                wpt: []
+            };
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                let originalFile = getFile(fileId);
+                if (file && originalFile) {
+                    if (level === ListLevel.FILE) {
+                        toMerge.trk.push(...originalFile.trk.map((track) => track.clone()));
+                        toMerge.wpt.push(...originalFile.wpt.map((wpt) => wpt.clone()));
+                        if (first) {
+                            target = items[0];
+                            targetFile = file;
+                        } else {
+                            draft.delete(fileId);
+                        }
+                    } else {
+                        if (level === ListLevel.TRACK) {
+                            items.forEach((item, index) => {
+                                let trackIndex = (item as ListTrackItem).getTrackIndex();
+                                toMerge.trkseg.splice(0, 0, ...originalFile.trk[trackIndex].trkseg.map((segment) => segment.clone()));
+                                if (index === items.length - 1) { // Order is reversed, so the last track is the first one and the one to keep
+                                    target = item;
+                                    file.trk[trackIndex].trkseg = [];
+                                } else {
+                                    file.trk.splice(trackIndex, 1);
+                                }
+                            });
+                        } else if (level === ListLevel.SEGMENT) {
+                            items.forEach((item, index) => {
+                                let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
+                                let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
+                                if (index === items.length - 1) { // Order is reversed, so the last segment is the first one and the one to keep
+                                    target = item;
+                                }
+                                toMerge.trkseg.splice(0, 0, originalFile.trk[trackIndex].trkseg[segmentIndex].clone());
+                                file.trk[trackIndex].trkseg.splice(segmentIndex, 1);
+                            });
+                        }
+                        targetFile = file;
+                    }
+                    first = false;
+                }
+            });
+
+            if (mergeTraces) {
+                let statistics = get(gpxStatistics);
+                let speed = statistics.global.speed.moving > 0 ? statistics.global.speed.moving : undefined;
+                let startTime: Date | undefined = undefined;
+                if (speed !== undefined) {
+                    if (statistics.local.points.length > 0 && statistics.local.points[0].time !== undefined) {
+                        startTime = statistics.local.points[0].time;
+                    } else {
+                        let index = statistics.local.points.findIndex((point) => point.time !== undefined);
+                        if (index !== -1) {
+                            startTime = new Date(statistics.local.points[index].time.getTime() - 1000 * 3600 * statistics.local.distance.total[index] / speed);
+                        }
+                    }
+                }
+
+                if (toMerge.trk.length > 0 && toMerge.trk[0].trkseg.length > 0) {
+                    let s = new TrackSegment();
+                    toMerge.trk.map((track) => {
+                        track.trkseg.forEach((segment) => {
+                            s.replaceTrackPoints(s.trkpt.length, s.trkpt.length, segment.trkpt.slice(), speed, startTime);
+                        });
+                    });
+                    toMerge.trk = [toMerge.trk[0]];
+                    toMerge.trk[0].trkseg = [s];
+                }
+                if (toMerge.trkseg.length > 0) {
+                    let s = new TrackSegment();
+                    toMerge.trkseg.forEach((segment) => {
+                        s.replaceTrackPoints(s.trkpt.length, s.trkpt.length, segment.trkpt.slice(), speed, startTime);
+                    });
+                    toMerge.trkseg = [s];
+                }
+            }
+
+            if (targetFile) {
+                if (target instanceof ListFileItem) {
+                    targetFile.replaceTracks(0, targetFile.trk.length - 1, toMerge.trk);
+                    targetFile.replaceWaypoints(0, targetFile.wpt.length - 1, toMerge.wpt);
+                } else if (target instanceof ListTrackItem) {
+                    let trackIndex = target.getTrackIndex();
+                    targetFile.replaceTrackSegments(trackIndex, 0, -1, toMerge.trkseg);
+                } else if (target instanceof ListTrackSegmentItem) {
+                    let trackIndex = target.getTrackIndex();
+                    let segmentIndex = target.getSegmentIndex();
+                    targetFile.replaceTrackSegments(trackIndex, segmentIndex, segmentIndex - 1, toMerge.trkseg);
+                }
+            }
+        });
+    },
+    cropSelection: (start: number, end: number) => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    if (level === ListLevel.FILE) {
+                        let length = file.getNumberOfTrackPoints();
+                        if (start >= length || end < 0) {
+                            draft.delete(fileId);
+                        } else if (start > 0 || end < length - 1) {
+                            file.crop(Math.max(0, start), Math.min(length - 1, end));
+                        }
+                        start -= length;
+                        end -= length;
+                    } else if (level === ListLevel.TRACK) {
+                        let trackIndices = items.map((item) => (item as ListTrackItem).getTrackIndex());
+                        file.crop(start, end, trackIndices);
+                    } else if (level === ListLevel.SEGMENT) {
+                        let trackIndices = [(items[0] as ListTrackSegmentItem).getTrackIndex()];
+                        let segmentIndices = items.map((item) => (item as ListTrackSegmentItem).getSegmentIndex());
+                        file.crop(start, end, trackIndices, segmentIndices);
+                    }
+                }
+            }, false);
+        });
+    },
+    extractSelection: () => {
+        return applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                if (level === ListLevel.FILE) {
+                    let file = getFile(fileId);
+                    if (file) {
+                        if (file.trk.length > 1) {
+                            let fileIds = getFileIds(file.trk.length);
+
+                            let closest = file.wpt.map((wpt, wptIndex) => {
+                                return {
+                                    wptIndex: wptIndex,
+                                    index: [0],
+                                    distance: Number.MAX_VALUE
+                                };
+                            })
+                            file.trk.forEach((track, index) => {
+                                track.getSegments().forEach((segment) => {
+                                    segment.trkpt.forEach((point) => {
+                                        file.wpt.forEach((wpt, wptIndex) => {
+                                            let dist = distance(point.getCoordinates(), wpt.getCoordinates());
+                                            if (dist < closest[wptIndex].distance) {
+                                                closest[wptIndex].distance = dist;
+                                                closest[wptIndex].index = [index];
+                                            } else if (dist === closest[wptIndex].distance) {
+                                                closest[wptIndex].index.push(index);
+                                            }
+                                        });
+                                    })
+                                });
+                            });
+
+                            file.trk.forEach((track, index) => {
+                                let newFile = file.clone();
+                                let tracks = track.trkseg.map((segment, segmentIndex) => {
+                                    let t = track.clone();
+                                    t.replaceTrackSegments(0, track.trkseg.length - 1, [segment]);
+                                    if (track.name) {
+                                        t.name = `${track.name} (${segmentIndex + 1})`;
+                                    }
+                                    return t;
+                                });
+                                newFile.replaceTracks(0, file.trk.length - 1, tracks);
+                                newFile.replaceWaypoints(0, file.wpt.length - 1, closest.filter((c) => c.index.includes(index)).map((c) => file.wpt[c.wptIndex]));
+                                newFile._data.id = fileIds[index];
+                                newFile.metadata.name = track.name ?? `${file.metadata.name} (${index + 1})`;
+                                draft.set(newFile._data.id, freeze(newFile));
+                            });
+                        } else if (file.trk.length === 1) {
+                            let fileIds = getFileIds(file.trk[0].trkseg.length);
+
+                            let closest = file.wpt.map((wpt, wptIndex) => {
+                                return {
+                                    wptIndex: wptIndex,
+                                    index: [0],
+                                    distance: Number.MAX_VALUE
+                                };
+                            })
+                            file.trk[0].trkseg.forEach((segment, index) => {
+                                segment.trkpt.forEach((point) => {
+                                    file.wpt.forEach((wpt, wptIndex) => {
+                                        let dist = distance(point.getCoordinates(), wpt.getCoordinates());
+                                        if (dist < closest[wptIndex].distance) {
+                                            closest[wptIndex].distance = dist;
+                                            closest[wptIndex].index = [index];
+                                        } else if (dist === closest[wptIndex].distance) {
+                                            closest[wptIndex].index.push(index);
+                                        }
+                                    });
+                                });
+                            });
+
+                            file.trk[0].trkseg.forEach((segment, index) => {
+                                let newFile = file.clone();
+                                newFile.replaceTrackSegments(0, 0, file.trk[0].trkseg.length - 1, [segment]);
+                                newFile.replaceWaypoints(0, file.wpt.length - 1, closest.filter((c) => c.index.includes(index)).map((c) => file.wpt[c.wptIndex]));
+                                newFile._data.id = fileIds[index];
+                                newFile.metadata.name = `${file.trk[0].name ?? file.metadata.name} (${index + 1})`;
+                                draft.set(newFile._data.id, freeze(newFile));
+                            });
+                        }
+                        draft.delete(fileId);
+                    }
+                } else if (level === ListLevel.TRACK) {
+                    let file = draft.get(fileId);
+                    if (file) {
+                        for (let item of items) {
+                            let trackIndex = (item as ListTrackItem).getTrackIndex();
+                            let track = file.trk[trackIndex];
+                            let tracks = track.trkseg.map((segment, segmentIndex) => {
+                                let t = track.clone();
+                                t.replaceTrackSegments(0, track.trkseg.length - 1, [segment]);
+                                if (track.name) {
+                                    t.name = `${track.name} (${segmentIndex + 1})`;
+                                }
+                                return t;
+                            });
+                            file.replaceTracks(trackIndex, trackIndex, tracks);
+                        }
+                    }
+                }
+            });
+        });
+    },
+    split(fileId: string, trackIndex: number, segmentIndex: number, coordinates: Coordinates, trkptIndex?: number) {
+        let splitType = get(splitAs);
+        return applyGlobal((draft) => {
+            let file = getFile(fileId);
+            if (file) {
+                let segment = file.trk[trackIndex].trkseg[segmentIndex];
+
+                let minIndex = 0;
+                if (trkptIndex === undefined) {
+                    // Find the point closest to split
+                    let closest = getClosestLinePoint(segment.trkpt, coordinates);
+                    minIndex = closest._data.index;
+                } else {
+                    minIndex = trkptIndex;
+                }
+
+                let absoluteIndex = minIndex;
+                file.forEachSegment((seg, trkIndex, segIndex) => {
+                    if ((trkIndex < trackIndex && splitType === SplitType.FILES) || (trkIndex === trackIndex && segIndex < segmentIndex)) {
+                        absoluteIndex += seg.trkpt.length;
+                    }
+                });
+
+                if (splitType === SplitType.FILES) {
+                    let newFile = draft.get(fileId);
+                    if (newFile) {
+                        newFile.crop(0, absoluteIndex);
+                        let newFile2 = file.clone();
+                        newFile2._data.id = getFileIds(1)[0];
+                        newFile2.crop(absoluteIndex, file.getNumberOfTrackPoints() - 1);
+                        draft.set(newFile2._data.id, freeze(newFile2));
+                    }
+                } else if (splitType === SplitType.TRACKS) {
+                    let newFile = draft.get(fileId);
+                    if (newFile) {
+                        let start = file.trk[trackIndex].clone();
+                        start.crop(0, absoluteIndex);
+                        let end = file.trk[trackIndex].clone();
+                        end.crop(absoluteIndex, file.trk[trackIndex].getNumberOfTrackPoints() - 1);
+                        newFile.replaceTracks(trackIndex, trackIndex, [start, end]);
+                    }
+                } else if (splitType === SplitType.SEGMENTS) {
+                    let newFile = draft.get(fileId);
+                    if (newFile) {
+                        let start = segment.clone();
+                        start.crop(0, minIndex);
+                        let end = segment.clone();
+                        end.crop(minIndex, segment.trkpt.length - 1);
+                        newFile.replaceTrackSegments(trackIndex, segmentIndex, segmentIndex, [start, end]);
+                    }
+                }
+            }
+        });
+    },
+    cleanSelection: (bounds: [Coordinates, Coordinates], inside: boolean, deleteTrackPoints: boolean, deleteWaypoints: boolean) => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    if (level === ListLevel.FILE) {
+                        file.clean(bounds, inside, deleteTrackPoints, deleteWaypoints);
+                    } else if (level === ListLevel.TRACK) {
+                        let trackIndices = items.map((item) => (item as ListTrackItem).getTrackIndex());
+                        file.clean(bounds, inside, deleteTrackPoints, deleteWaypoints, trackIndices);
+                    } else if (level === ListLevel.SEGMENT) {
+                        let trackIndices = [(items[0] as ListTrackSegmentItem).getTrackIndex()];
+                        let segmentIndices = items.map((item) => (item as ListTrackSegmentItem).getSegmentIndex());
+                        file.clean(bounds, inside, deleteTrackPoints, deleteWaypoints, trackIndices, segmentIndices);
+                    } else if (level === ListLevel.WAYPOINTS) {
+                        file.clean(bounds, inside, false, deleteWaypoints);
+                    } else if (level === ListLevel.WAYPOINT) {
+                        let waypointIndices = items.map((item) => (item as ListWaypointItem).getWaypointIndex());
+                        file.clean(bounds, inside, false, deleteWaypoints, [], [], waypointIndices);
+                    }
+                }
+            });
+        });
+    },
+    reduce: (itemsAndPoints: Map<ListItem, TrackPoint[]>) => {
+        if (itemsAndPoints.size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            let allItems = Array.from(itemsAndPoints.keys());
+            applyToOrderedItemsFromFile(allItems, (fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    for (let item of items) {
+                        if (item instanceof ListTrackSegmentItem) {
+                            let trackIndex = item.getTrackIndex();
+                            let segmentIndex = item.getSegmentIndex();
+                            let points = itemsAndPoints.get(item);
+                            if (points) {
+                                file.replaceTrackPoints(trackIndex, segmentIndex, 0, file.trk[trackIndex].trkseg[segmentIndex].getNumberOfTrackPoints() - 1, points);
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    },
+    addOrUpdateWaypoint: (waypoint: WaypointType, item?: ListWaypointItem) => {
+        let m = get(map);
+        if (m === null) {
+            return;
+        }
+        getElevation([waypoint.attributes]).then((elevation) => {
+            if (item) {
+                dbUtils.applyToFile(item.getFileId(), (file) => {
+                    let wpt = file.wpt[item.getWaypointIndex()];
+                    wpt.name = waypoint.name;
+                    wpt.desc = waypoint.desc;
+                    wpt.cmt = waypoint.cmt;
+                    wpt.sym = waypoint.sym;
+                    wpt.link = waypoint.link;
+                    wpt.setCoordinates(waypoint.attributes);
+                    wpt.ele = elevation[0];
+                });
+            } else {
+                let fileIds = new Set<string>();
+                get(selection).getSelected().forEach((item) => {
+                    fileIds.add(item.getFileId());
+                });
+                let wpt = new Waypoint(waypoint);
+                wpt.ele = elevation[0];
+                dbUtils.applyToFiles(Array.from(fileIds), (file) =>
+                    file.replaceWaypoints(file.wpt.length, file.wpt.length, [wpt])
+                );
+            }
+        });
+    },
+    setStyleToSelection: (style: LineStyleExtension) => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file && (level === ListLevel.FILE || level === ListLevel.TRACK)) {
+                    if (level === ListLevel.FILE) {
+                        file.setStyle(style);
+                    } else if (level === ListLevel.TRACK) {
+                        if (items.length === file.trk.length) {
+                            file.setStyle(style);
+                        } else {
+                            for (let item of items) {
+                                let trackIndex = (item as ListTrackItem).getTrackIndex();
+                                file.trk[trackIndex].setStyle(style);
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    },
+    setHiddenToSelection: (hidden: boolean) => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                let file = draft.get(fileId);
+                if (file) {
+                    if (level === ListLevel.FILE) {
+                        file.setHidden(hidden);
+                    } else if (level === ListLevel.TRACK) {
+                        let trackIndices = items.map((item) => (item as ListTrackItem).getTrackIndex());
+                        file.setHidden(hidden, trackIndices);
+                    } else if (level === ListLevel.SEGMENT) {
+                        let trackIndices = [(items[0] as ListTrackSegmentItem).getTrackIndex()];
+                        let segmentIndices = items.map((item) => (item as ListTrackSegmentItem).getSegmentIndex());
+                        file.setHidden(hidden, trackIndices, segmentIndices);
+                    } else if (level === ListLevel.WAYPOINTS) {
+                        file.setHiddenWaypoints(hidden);
+                    } else if (level === ListLevel.WAYPOINT) {
+                        let waypointIndices = items.map((item) => (item as ListWaypointItem).getWaypointIndex());
+                        file.setHiddenWaypoints(hidden, waypointIndices);
+                    }
+                }
+            });
+        });
+    },
+    deleteSelection: () => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                if (level === ListLevel.FILE) {
+                    draft.delete(fileId);
+                } else {
+                    let file = draft.get(fileId);
+                    if (file) {
+                        if (level === ListLevel.TRACK) {
+                            for (let item of items) {
+                                let trackIndex = (item as ListTrackItem).getTrackIndex();
+                                file.replaceTracks(trackIndex, trackIndex, []);
+                            }
+                        } else if (level === ListLevel.SEGMENT) {
+                            for (let item of items) {
+                                let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
+                                let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
+                                file.replaceTrackSegments(trackIndex, segmentIndex, segmentIndex, []);
+                            }
+                        } else if (level === ListLevel.WAYPOINTS) {
+                            file.replaceWaypoints(0, file.wpt.length - 1, []);
+                        } else if (level === ListLevel.WAYPOINT) {
+                            for (let item of items) {
+                                let waypointIndex = (item as ListWaypointItem).getWaypointIndex();
+                                file.replaceWaypoints(waypointIndex, waypointIndex, []);
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    },
+    addElevationToSelection: async (map: mapboxgl.Map) => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        let points: (TrackPoint | Waypoint)[] = [];
+        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+            let file = fileState.get(fileId);
+            if (file) {
+                if (level === ListLevel.FILE) {
+                    points.push(...file.getTrackPoints());
+                    points.push(...file.wpt);
+                } else if (level === ListLevel.TRACK) {
+                    let trackIndices = items.map((item) => (item as ListTrackItem).getTrackIndex());
+                    trackIndices.forEach((trackIndex) => {
+                        points.push(...file.trk[trackIndex].getTrackPoints());
+                    });
+                } else if (level === ListLevel.SEGMENT) {
+                    let trackIndex = (items[0] as ListTrackSegmentItem).getTrackIndex();
+                    let segmentIndices = items.map((item) => (item as ListTrackSegmentItem).getSegmentIndex());
+                    segmentIndices.forEach((segmentIndex) => {
+                        points.push(...file.trk[trackIndex].trkseg[segmentIndex].getTrackPoints());
+                    });
+                } else if (level === ListLevel.WAYPOINTS) {
+                    points.push(...file.wpt);
+                } else if (level === ListLevel.WAYPOINT) {
+                    let waypointIndices = items.map((item) => (item as ListWaypointItem).getWaypointIndex());
+                    points.push(...waypointIndices.map((waypointIndex) => file.wpt[waypointIndex]));
+                }
+            }
+        });
+
+        if (points.length === 0) {
+            return;
+        }
+
+        getElevation(points).then((elevations) => {
+            applyGlobal((draft) => {
+                applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                    let file = draft.get(fileId);
+                    if (file) {
+                        if (level === ListLevel.FILE) {
+                            file.addElevation(elevations);
+                        } else if (level === ListLevel.TRACK) {
+                            let trackIndices = items.map((item) => (item as ListTrackItem).getTrackIndex());
+                            file.addElevation(elevations, trackIndices, undefined, []);
+                        } else if (level === ListLevel.SEGMENT) {
+                            let trackIndices = [(items[0] as ListTrackSegmentItem).getTrackIndex()];
+                            let segmentIndices = items.map((item) => (item as ListTrackSegmentItem).getSegmentIndex());
+                            file.addElevation(elevations, trackIndices, segmentIndices, []);
+                        } else if (level === ListLevel.WAYPOINTS) {
+                            file.addElevation(elevations, [], [], undefined);
+                        } else if (level === ListLevel.WAYPOINT) {
+                            let waypointIndices = items.map((item) => (item as ListWaypointItem).getWaypointIndex());
+                            file.addElevation(elevations, [], [], waypointIndices);
+                        }
+                    }
+                });
+            });
+        });
+    },
+    deleteSelectedFiles: () => {
+        if (get(selection).size === 0) {
+            return;
+        }
+        applyGlobal((draft) => {
+            applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+                draft.delete(fileId);
+            });
+        });
+    },
+    deleteAllFiles: () => {
+        applyGlobal((draft) => {
+            draft.clear();
+        });
+    },
+    // undo-redo
+    undo: () => {
+        if (get(canUndo)) {
+            let index = get(patchIndex);
+            db.patches.get(index).then(patch => {
+                if (patch) {
+                    applyPatch(patch.inversePatch);
+                    db.settings.put(index - 1, 'patchIndex');
+                }
+            });
+        }
+    },
+    redo: () => {
+        if (get(canRedo)) {
+            let index = get(patchIndex) + 1;
+            db.patches.get(index).then(patch => {
+                if (patch) {
+                    applyPatch(patch.patch);
+                    db.settings.put(index, 'patchIndex');
+                }
+            });
+        }
+    }
+}
\ No newline at end of file
diff --git a/website/src/lib/docs/be/faq.mdx b/website/src/lib/docs/be/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/be/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/files-and-stats.mdx b/website/src/lib/docs/be/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/be/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/be/getting-started.mdx b/website/src/lib/docs/be/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/be/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/be/gpx.mdx b/website/src/lib/docs/be/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/be/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/be/home/funding.mdx b/website/src/lib/docs/be/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/be/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/be/home/mapbox.mdx b/website/src/lib/docs/be/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/be/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/be/home/translation.mdx b/website/src/lib/docs/be/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/be/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/be/integration.mdx b/website/src/lib/docs/be/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/be/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/be/map-controls.mdx b/website/src/lib/docs/be/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/be/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/be/menu.mdx b/website/src/lib/docs/be/menu.mdx
new file mode 100755
index 0000000..5df2159
--- /dev/null
+++ b/website/src/lib/docs/be/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Асноўнае меню, размешчанае ў верхняй частцы інтэрфэйсу, забяспечвае доступ да дзеянняў, опцый і налад, падзеленых на некалькі катэгорый, якія тлумачацца асобна ў наступных раздзелах.
+
+<DocsNote>
+
+Большасць з дзеянняў таксама можа быць выклікана з дапамогай спалучэння клавіш адлюстраваных у меню.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/menu/edit.mdx b/website/src/lib/docs/be/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/be/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/be/menu/file.mdx b/website/src/lib/docs/be/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/be/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/menu/settings.mdx b/website/src/lib/docs/be/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/be/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/be/menu/view.mdx b/website/src/lib/docs/be/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/be/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/toolbar.mdx b/website/src/lib/docs/be/toolbar.mdx
new file mode 100755
index 0000000..f227491
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+Панэль інструментаў знаходзіцца з левага боку мапы і з'яўляецца сэрцам прыкладання, яна забяспечвае доступ да асноўных функцый **gpx.rnmkcy.eu**.
+Кожны інструмент прадстаўлены цэтлікам і можа быць актываваны пстрыкам на яго.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+З дапамогай [edit actions](./menu/edit), большасць інструментаў можа быць прыменена да некалькіх файлаў адначасова, а таксама для [inner tracks and segments](./gpx).
+
+Наступныя секцыі апісваюць кожны інструмент больш дэтальна.
diff --git a/website/src/lib/docs/be/toolbar/clean.mdx b/website/src/lib/docs/be/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/be/toolbar/elevation.mdx b/website/src/lib/docs/be/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/toolbar/extract.mdx b/website/src/lib/docs/be/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/toolbar/merge.mdx b/website/src/lib/docs/be/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/be/toolbar/minify.mdx b/website/src/lib/docs/be/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/be/toolbar/poi.mdx b/website/src/lib/docs/be/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/be/toolbar/routing.mdx b/website/src/lib/docs/be/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/be/toolbar/scissors.mdx b/website/src/lib/docs/be/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/be/toolbar/time.mdx b/website/src/lib/docs/be/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/be/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/faq.mdx b/website/src/lib/docs/ca/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/ca/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/files-and-stats.mdx b/website/src/lib/docs/ca/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/ca/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/ca/getting-started.mdx b/website/src/lib/docs/ca/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/ca/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/ca/gpx.mdx b/website/src/lib/docs/ca/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/ca/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/ca/home/funding.mdx b/website/src/lib/docs/ca/home/funding.mdx
new file mode 100755
index 0000000..4c5611a
--- /dev/null
+++ b/website/src/lib/docs/ca/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ajuda a mantenir aquesta pàgina web gratuïta (i sense anuncis)
+
+Cada cop que afegeixes o mous un punt GPS, els nostres servidors calculen la millor ruta possible.
+També utilitzen la API de <a href="https://mapbox.com" target="_blank">Mapbox</a> per ensenyar mapes bonics, donar informació sobre l'altitud i permetre la cerca de llocs d'interès.
+
+Desafortunadament, això és car.
+Si gaudeixes aquesta eina i la trobes valuosa, si us plau, considera fer una petita donació per ajudar a mantenir la pàgina web gratuïta i sense anuncis.
+
+Moltíssimes gràcies pel teu suport! ❤️
diff --git a/website/src/lib/docs/ca/home/mapbox.mdx b/website/src/lib/docs/ca/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/ca/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/ca/home/translation.mdx b/website/src/lib/docs/ca/home/translation.mdx
new file mode 100755
index 0000000..15eeffb
--- /dev/null
+++ b/website/src/lib/docs/ca/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" />Traducció
+
+Aquesta pàgina web ha estat traduïda per voluntaris utilitzant una plataforma de traducció col·laborativa.
+Tu també pots contribuir-hi afegint o millorant les traduccions al nostre <a href="https://crowdin.com/project/gpxstudio" target="_blank">projecte de Crowdin</a>.
+
+Si vols començar a traduir ara mateix a una nova llengua, si us plau <a href="#contact">posa't en contacte amb nosaltres</a>.
+
+Qualsevol ajuda és molt apreciada!
diff --git a/website/src/lib/docs/ca/integration.mdx b/website/src/lib/docs/ca/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/ca/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/ca/map-controls.mdx b/website/src/lib/docs/ca/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/ca/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/ca/menu.mdx b/website/src/lib/docs/ca/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/ca/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/menu/edit.mdx b/website/src/lib/docs/ca/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/ca/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/ca/menu/file.mdx b/website/src/lib/docs/ca/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/ca/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/menu/settings.mdx b/website/src/lib/docs/ca/menu/settings.mdx
new file mode 100755
index 0000000..8a44167
--- /dev/null
+++ b/website/src/lib/docs/ca/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Unitats de mesura
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Tu també pots contribuir-hi afegint o millorant les traduccions al nostre <a href="https://crowdin.com/project/gpxstudio" target="_blank">projecte de Crowdin</a>.
+Si vols començar a traduir ara mateix a una nova llengua, si us plau <a href="#contact">posa't en contacte amb nosaltres</a>.
+Qualsevol ajuda és molt apreciada!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+Més informació sobre les capes dels mapes es pot trobar a [map controls section](../map-controls).
diff --git a/website/src/lib/docs/ca/menu/view.mdx b/website/src/lib/docs/ca/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/ca/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/toolbar.mdx b/website/src/lib/docs/ca/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/ca/toolbar/clean.mdx b/website/src/lib/docs/ca/toolbar/clean.mdx
new file mode 100755
index 0000000..5847fd5
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Neteja
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Es crearà una àrea de selecció rectangular quan seleccionis l'eina de neteja
+
+En funció de les opcions seleccionades més avall, si cliques el botó, s'esborraran els punts GPS i/o [punts d'interès](../gpx) tant a dins com a fora de la selecció.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ca/toolbar/elevation.mdx b/website/src/lib/docs/ca/toolbar/elevation.mdx
new file mode 100755
index 0000000..5018b30
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevació
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Dades d'elevació subministrades per <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/toolbar/extract.mdx b/website/src/lib/docs/ca/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/toolbar/merge.mdx b/website/src/lib/docs/ca/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ca/toolbar/minify.mdx b/website/src/lib/docs/ca/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ca/toolbar/poi.mdx b/website/src/lib/docs/ca/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/ca/toolbar/routing.mdx b/website/src/lib/docs/ca/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/ca/toolbar/scissors.mdx b/website/src/lib/docs/ca/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/ca/toolbar/time.mdx b/website/src/lib/docs/ca/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/ca/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/faq.mdx b/website/src/lib/docs/cs/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/cs/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/files-and-stats.mdx b/website/src/lib/docs/cs/files-and-stats.mdx
new file mode 100755
index 0000000..30febfb
--- /dev/null
+++ b/website/src/lib/docs/cs/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Soubory a statistiky
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Profil nadmořské výšky a statistiky
+
+V dolní části rozhraní naleznete profil nadmořské výšky a statistiky pro aktuální výběr.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Pomocí tlačítek vpravo od výškového profilu můžete volitelně obarvit výškový profil podle:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/cs/getting-started.mdx b/website/src/lib/docs/cs/getting-started.mdx
new file mode 100755
index 0000000..522c679
--- /dev/null
+++ b/website/src/lib/docs/cs/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Soubory a statistiky
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/cs/gpx.mdx b/website/src/lib/docs/cs/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/cs/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/cs/home/funding.mdx b/website/src/lib/docs/cs/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/cs/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/cs/home/mapbox.mdx b/website/src/lib/docs/cs/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/cs/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/cs/home/translation.mdx b/website/src/lib/docs/cs/home/translation.mdx
new file mode 100755
index 0000000..b073786
--- /dev/null
+++ b/website/src/lib/docs/cs/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Jakákoliv pomoc je velmi ceněna!
diff --git a/website/src/lib/docs/cs/integration.mdx b/website/src/lib/docs/cs/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/cs/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/cs/map-controls.mdx b/website/src/lib/docs/cs/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/cs/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/cs/menu.mdx b/website/src/lib/docs/cs/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/cs/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/menu/edit.mdx b/website/src/lib/docs/cs/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/cs/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/cs/menu/file.mdx b/website/src/lib/docs/cs/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/cs/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/menu/settings.mdx b/website/src/lib/docs/cs/menu/settings.mdx
new file mode 100755
index 0000000..7473c5b
--- /dev/null
+++ b/website/src/lib/docs/cs/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Jakákoliv pomoc je velmi ceněna!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/cs/menu/view.mdx b/website/src/lib/docs/cs/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/cs/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/toolbar.mdx b/website/src/lib/docs/cs/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/cs/toolbar/clean.mdx b/website/src/lib/docs/cs/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/cs/toolbar/elevation.mdx b/website/src/lib/docs/cs/toolbar/elevation.mdx
new file mode 100755
index 0000000..0c2f706
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Nadmořská výška
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/toolbar/extract.mdx b/website/src/lib/docs/cs/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/toolbar/merge.mdx b/website/src/lib/docs/cs/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/cs/toolbar/minify.mdx b/website/src/lib/docs/cs/toolbar/minify.mdx
new file mode 100755
index 0000000..a3967e4
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Zjednodušit
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Tento nástroj lze použít ke snížení počtu GPS bodů v trase, což může být užitečné pro zmenšení její velikosti.
+
+Pomocí posuvníku můžete upravit toleranci algoritmu zjednodušení, a poté zkontrolovat počet bodů, které byly zachovány, a zjednodušenou trasu na mapě.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Hodnota tolerance představuje maximální vzdálenost mezi původní a zjednodušenou trasou.
+Více o použitém algoritmu si můžete přečíst <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">zde</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/cs/toolbar/poi.mdx b/website/src/lib/docs/cs/toolbar/poi.mdx
new file mode 100755
index 0000000..825f257
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Body zájmu
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Body zájmu](../gpx) lze přidat do GPX souborů a označit tak zajímavá místa na mapě pro pozdější zobrazení na vašem GPS zařízení.
+
+### Vytváření bodu zájmu
+
+Pro vytvoření bodu zájmu vyplňte formulář níže.
+Umístění bodu zájmu si můžete vybrat kliknutím na mapu nebo ručním zadáním souřadnic.
+Po vyplnění formulář zkontrolujte.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Upravení bodu zájmu
+
+Výše uvedený formulář lze také použít k úpravě existujícího bodu zájmu po jeho výběru na mapě.
+Pokud bod zájmu potřebujete přesunout, můžete jej v mapě přetáhnout do požadované polohy.
diff --git a/website/src/lib/docs/cs/toolbar/routing.mdx b/website/src/lib/docs/cs/toolbar/routing.mdx
new file mode 100755
index 0000000..1d8f73c
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Plánování a úpravy tras
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Nástroj plánování a úpravy tras vám umožňuje vytvářet a upravovat trasy umístěním nebo přetažením kotevních bodů na mapě.
+
+## Settings
+
+Jak je zobrazeno níže, dialogové okno nástroje obsahuje několik nastavení pro kontrolu chování plánování tras.
+Dialog lze minimalizovat kliknutím na <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Plánování tras
+
+Když je plánování trasy aktivní, kotevní body umístěné nebo přesunuté po mapě budou projenou trasou vypočítanou v silniční síti <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Zakázat plánování trasy pro propojení kotevních bodů přímými čarami.
+Toto nastavení lze také přepnout stisknutím <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Aktivita
+
+Vyberte druh aktivity, pro kterou chcete přizpůsobit trasy.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" />Povolit soukromé komunikace
+
+Pokud je povoleno, plánování tras bude při výpočtu nabízet soukromé komunikace.
+
+<DocsNote type="warning">
+
+Tuto možnost použijte pouze v případě, že disponujete místní znalostí a máte povolení používat dané silnice.
+
+</DocsNote>
+
+## Vykreslování a úpravy tras
+
+Vytvoření trasy nebo rozšíření existující trasy vyžaduje jen kliknutí na mapu pro umístění nového kotevního bodu.
+
+Můžete také přetáhnout existující kotevní bod pro přeplánování úseku spojujícího jej s předchozím a dalším kotevním bodem.
+
+Mezi existující kotevní body lze navíc umístit nové najetím na trasu a přetažením nově vzniklého kotevního bodu.
+Na dotykových zařízeních můžete pro vložení nového kotevního bodu klepnout na požadovaný úsek.
+
+<DocsNote>
+
+Při úpravách importovaných GPX souborů se automaticky vytvoří počáteční sada kotevních bodů.
+Pro usnadnění úprav se při větším přiblížení zobrazí více kotevních bodů.
+To umožňuje různě detailní úpravu tras.
+
+</DocsNote>
+
+Kliknutím na kotevní bod a výběrem <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Odstranit</button> z kontextového menu můžete bod odstranit.
+
+<DocsImage src="tools/routing" alt="Kotevní body vám umožní snadno upravit trasu." />
+
+## Další nástroje
+
+Následující nástroje automatizují některé běžné operace úpravy trasy.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Obrátit
+
+Obrátit směr trasy.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Zpět na začátek
+
+Propojit poslední bod trasy s výchozím bodem pomocí zvoleného nastavení směrování.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Zpáteční cesta
+
+Vrátit se na výchozí bod stejnou trasou.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Změnit začátek smyčky
+
+Je-li konečný bod trasy dostatečně blízko k výchozímu bodu, můžete přesunout začátek okurhu kliknutím na libovolný kotevní bod a výběrem <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Začít okruh zde</button> z kontextového menu.
diff --git a/website/src/lib/docs/cs/toolbar/scissors.mdx b/website/src/lib/docs/cs/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/cs/toolbar/time.mdx b/website/src/lib/docs/cs/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/cs/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/faq.mdx b/website/src/lib/docs/da/faq.mdx
new file mode 100755
index 0000000..c8c3cf1
--- /dev/null
+++ b/website/src/lib/docs/da/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Hvorfor er denne rute valgt over denne? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/files-and-stats.mdx b/website/src/lib/docs/da/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/da/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/da/getting-started.mdx b/website/src/lib/docs/da/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/da/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/da/gpx.mdx b/website/src/lib/docs/da/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/da/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/da/home/funding.mdx b/website/src/lib/docs/da/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/da/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/da/home/mapbox.mdx b/website/src/lib/docs/da/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/da/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/da/home/translation.mdx b/website/src/lib/docs/da/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/da/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/da/integration.mdx b/website/src/lib/docs/da/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/da/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/da/map-controls.mdx b/website/src/lib/docs/da/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/da/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/da/menu.mdx b/website/src/lib/docs/da/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/da/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/menu/edit.mdx b/website/src/lib/docs/da/menu/edit.mdx
new file mode 100755
index 0000000..417b947
--- /dev/null
+++ b/website/src/lib/docs/da/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Kopier
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/da/menu/file.mdx b/website/src/lib/docs/da/menu/file.mdx
new file mode 100755
index 0000000..bd10ca3
--- /dev/null
+++ b/website/src/lib/docs/da/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" />Eksporter...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+Hvis dit download ikke starter efter at have klikket på download knappen, så tjek venligst dine browserindstillinger for at tillade downloads fra <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/menu/settings.mdx b/website/src/lib/docs/da/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/da/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/da/menu/view.mdx b/website/src/lib/docs/da/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/da/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/toolbar.mdx b/website/src/lib/docs/da/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/da/toolbar/clean.mdx b/website/src/lib/docs/da/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/da/toolbar/elevation.mdx b/website/src/lib/docs/da/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/toolbar/extract.mdx b/website/src/lib/docs/da/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/toolbar/merge.mdx b/website/src/lib/docs/da/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/da/toolbar/minify.mdx b/website/src/lib/docs/da/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/da/toolbar/poi.mdx b/website/src/lib/docs/da/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/da/toolbar/routing.mdx b/website/src/lib/docs/da/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/da/toolbar/scissors.mdx b/website/src/lib/docs/da/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/da/toolbar/time.mdx b/website/src/lib/docs/da/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/da/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/faq.mdx b/website/src/lib/docs/de/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/de/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/files-and-stats.mdx b/website/src/lib/docs/de/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/de/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/de/getting-started.mdx b/website/src/lib/docs/de/getting-started.mdx
new file mode 100755
index 0000000..687b94d
--- /dev/null
+++ b/website/src/lib/docs/de/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Erste Schritte
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Willkommen bei der offiziellen Anleitung für **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="Die gpx.rnmkcy.eu Oberfläche." />
+
+Wie im obigen Screenshot dargestellt, ist die Oberfläche in vier Bereiche um die Karte herum aufgeteilt. 
+Bevor wir in die Details der einzelnen Bereiche einsteigen, lassen Sie uns einen Überblick der Oberfläche verschaffen.
+
+## Menü
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Werkzeugleiste
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Kartensteuerungen
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/de/gpx.mdx b/website/src/lib/docs/de/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/de/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/de/home/funding.mdx b/website/src/lib/docs/de/home/funding.mdx
new file mode 100755
index 0000000..b3d4613
--- /dev/null
+++ b/website/src/lib/docs/de/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Helfen Sie, die Website kostenlos (und werbefrei) zu erhalten
+
+Jedes Mal, wenn Sie GPS-Punkte hinzufügen oder verschieben, berechnen unsere Server die beste Route im Straßennetz.
+Wir verwenden auch APIs von <a href="https://mapbox.com" target="_blank">Mapbox</a>, um schöne Karten anzuzeigen, Höhendaten abzurufen und Ihnen die Suche nach Orten zu ermöglichen.
+
+Leider ist dies mit hohen Kosten verbunden.
+Wenn Sie dieses Tool gerne verwenden und es wertvoll finden, erwägen Sie bitte eine kleine Spende, um die Website kostenlos und werbefrei zu halten.
+
+Herzlichen Dank für Ihre Unterstützung! ❤️
diff --git a/website/src/lib/docs/de/home/mapbox.mdx b/website/src/lib/docs/de/home/mapbox.mdx
new file mode 100755
index 0000000..e73d37f
--- /dev/null
+++ b/website/src/lib/docs/de/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox ist das Unternehmen, das einige der schönen Karten auf dieser Website zur Verfügung stellt.
+Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a> welche **gpx.rnmkcy.eu** unterstützt.
+
+Wir sind unglaublich glücklich und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und positive Wirkungsorganisationen unterstützt.
+Diese Partnerschaft ermöglicht es **gpx.rnmkcy.eu**, von den Mapbox-Tools zu ermäßigten Preisen zu profitieren, was erheblich zur finanziellen Tragfähigkeit des Projekts beiträgt und es uns ermöglicht, die bestmögliche Benutzererfahrung zu bieten.
diff --git a/website/src/lib/docs/de/home/translation.mdx b/website/src/lib/docs/de/home/translation.mdx
new file mode 100755
index 0000000..875b020
--- /dev/null
+++ b/website/src/lib/docs/de/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Übersetzung
+
+Die Webseite wird von Freiwilligen mit einer gemeinsamen Übersetzungsplattform übersetzt.
+Sie können dazu beitragen, indem Sie Übersetzungen in unserem <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin Projekt</a> hinzufügen oder verbessern.
+
+Wenn Sie mit der Übersetzung in einer neuen Sprache beginnen möchten, kontaktieren Sie uns bitte <a href="#contact">Kontaktaufnahme</a>.
+
+Jede Hilfe ist sehr willkommen!
diff --git a/website/src/lib/docs/de/integration.mdx b/website/src/lib/docs/de/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/de/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/de/map-controls.mdx b/website/src/lib/docs/de/map-controls.mdx
new file mode 100755
index 0000000..c051d0e
--- /dev/null
+++ b/website/src/lib/docs/de/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Kartensteuerungen
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Karten-Ebenen
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/de/menu.mdx b/website/src/lib/docs/de/menu.mdx
new file mode 100755
index 0000000..2579d2a
--- /dev/null
+++ b/website/src/lib/docs/de/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menü
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/menu/edit.mdx b/website/src/lib/docs/de/menu/edit.mdx
new file mode 100755
index 0000000..ab6145f
--- /dev/null
+++ b/website/src/lib/docs/de/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Im Gegensatz zu den Datei-Aktionen können die Bearbeitungs-Aktionen möglicherweise den Inhalt der aktuell ausgewählten Dateien verändern.
+Wenn das vertikale Layout der Dateiliste aktiviert ist (siehe [Dateien und Statistik](.. files-and-stats)), können dieses auch auf [Tracks, Segmente und Points-of-Interest](../gpx) angewendet werden.
+Daher bezeichnen wir die Elemente, die durch diese Aktionen geändert werden können, als _file items_.
+Beachten Sie, dass außer den Rückgängig- und Wiederholen-Aktionen die Bearbeitungsaktionen auch über das Kontextmenü (Rechtsklick) der Dateielemente zugänglich sind.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Rückgängig und Wiederholen
+
+Mit diesen Schaltflächen können Sie die letzten Aktionen rückgängig machen oder wiederholen.
+Dies gilt für alle Aktionen der Bedienoberfläche, aber nicht für Optionen, Anwendungseinstellungen oder Kartennavigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Information...
+
+Öffnen Sie das Dialogfeld Information des aktuell ausgewählten Dateielements, wo Sie dessen Namen und Beschreibung sehen und bearbeiten können.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Darstellung...
+
+Öffnen Sie das Dialogfeld Darstellung, in der Sie die Farbe, Deckkraft und Breite der ausgewählten Dateielemente auf der Karte ändern können.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Einblenden/Ausblenden
+
+Konfigurieren Sie die Sichtbarkeit der ausgewählten Dateielemente auf der Karte.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+Diese Aktion ist nur verfügbar, wenn das vertikale Layout der Dateiliste aktiviert ist.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+Diese Aktion ist nur verfügbar, wenn das vertikale Layout der Dateiliste aktiviert ist.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Alle auswählen
+
+Alle Dateielemente in der aktuellen Hierarchieebene zur Auswahl hinzufügen.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Kopieren
+
+Kopieren Sie die ausgewählten Dateielemente in die Zwischenablage.
+
+<DocsNote>
+
+Diese Aktion ist nur verfügbar, wenn das vertikale Layout der Dateiliste aktiviert ist.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Ausschneiden
+
+Kopieren Sie die ausgewählten Dateielemente in die Zwischenablage.
+
+<DocsNote>
+
+Diese Aktion ist nur verfügbar, wenn das vertikale Layout der Dateiliste aktiviert ist.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Einfügen
+
+Fügen Sie die Dateielemente aus der Zwischenablage in die aktuelle Hierarchieebene ein, wenn sie damit kompatibel sind.
+
+<DocsNote>
+
+Diese Aktion ist nur verfügbar, wenn das vertikale Layout der Dateiliste aktiviert ist.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Löschen
+
+Lösche ausgewählte Dateielemente.
diff --git a/website/src/lib/docs/de/menu/file.mdx b/website/src/lib/docs/de/menu/file.mdx
new file mode 100755
index 0000000..aed671f
--- /dev/null
+++ b/website/src/lib/docs/de/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Dateiaktionen
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Das Aktionsmenü Datei enthält eine Reihe von selbsterklärenden Dateioperationen.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Neu
+
+Neue leere Datei erstellen.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Öffnen...
+
+Öffne Dateien von Ihrem Computer. 
+
+<DocsNote>
+
+Sie können auch Dateien per Drag-and-Drop aus Ihrem Dateisystem in das Fenster ziehen.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplizieren
+
+Erstelle eine Kopie der aktuell ausgewählten Dateien.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Schließen
+
+Die aktuell ausgewählten Dateien schließen.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Alle schließen
+
+Schließe alle Dateien.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportieren...
+
+Öffnen Sie das Dialogfeld Exportieren, um die aktuell ausgewählten Dateien auf Ihrem Computer zu speichern.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Alle exportieren...
+
+Öffnen Sie den Dialogfeld Exportieren, um alle Dateien auf Ihrem Computer zu speichern.
+
+<DocsNote type="warning">
+
+Wenn Ihr Download nach dem Klicken auf die Download-Schaltfläche nicht gestartet wird, überprüfen Sie bitte die Einstellungen Ihres Browsers, um Downloads von <b>gpx.rnmkcy.eu</b> zu erlauben.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/menu/settings.mdx b/website/src/lib/docs/de/menu/settings.mdx
new file mode 100755
index 0000000..a1f632d
--- /dev/null
+++ b/website/src/lib/docs/de/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Einstellungen
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Entfernungseinheiten
+
+Ändern Sie die Einheiten die verwendet werden, um Entfernungen in der Bedienoberfläche anzuzeigen.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Geschwindigkeitseinheiten
+
+Ändern Sie die Einheiten die verwendet werden, um Geschwindigkeiten in der Bedienoberfläche anzuzeigen.
+Sie können wählen zwischen Entfernung pro Stunden oder Minuten pro Entfernung, die für Laufaktivitäten besser geeignet ist.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperatureinheiten
+
+Ändern Sie die Einheiten die verwendet werden, um Temperaturen in der Bedienoberfläche anzuzeigen.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Sprache
+
+Ändern Sie die Sprache der Bedienoberfläche.
+
+<DocsNote>
+
+Sie können dazu beitragen, indem Sie Übersetzungen in unserem <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin Projekt</a> hinzufügen oder verbessern.
+Wenn Sie mit der Übersetzung in einer neuen Sprache beginnen möchten, kontaktieren Sie uns bitte <a href="#contact">Kontaktaufnahme</a>.
+Jede Hilfe ist sehr willkommen!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Design
+
+Ändern Sie das Design der Bedienoberfläche.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street-View Quelle
+
+Ändern der verwendeten Quelle für [street view control](../map-controls).
+Die Standardeinstellung ist <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, aber Sie können auch <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a> verwenden.
+Erfahren Sie mehr zur Bedienung von Street-View in [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Karten-Ebenen...
+
+Öffnen Sie ein Dialogfeld, in dem Sie Karten-Ebenen aktivieren oder deaktivieren, benutzerdefinierte Ebenen hinzufügen, die Deckkraft von Overlays ändern können und mehr.
+Weitere Informationen zum Thema Kartenebenen können Sie finden in [map controls section](../map-controls).
diff --git a/website/src/lib/docs/de/menu/view.mdx b/website/src/lib/docs/de/menu/view.mdx
new file mode 100755
index 0000000..005e20e
--- /dev/null
+++ b/website/src/lib/docs/de/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Anzeigeoptionen
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Dieses Menü bietet Optionen zum Neuanordnen der Benutzeroberfläche und der Kartenansicht.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Höhenprofil
+
+Das Höhenprofil ausblenden, um Platz für die Karte zu schaffen, oder um die aktuelle Auswahl zu prüfen.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertikale Dateiliste
+
+Wechseln Sie zwischen einem vertikalen und einem horizontalen Layout für die Dateiliste.
+Die [vertical file list](../files-and-stats) ist sinnvoll, wenn viele Dateien geöffnet sind mit mehreren [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Wechseln zur vorherigen Basiskarte
+
+Ändere die Basiskarte auf jene, die zuvor über die [map layer control](../map-controls) ausgewählt wurde.
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Overlays Umschalten
+
+Schaltet die Sichtbarkeit der Karten-Overlays um, die zuvor ausgewählt wurden mittels [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Entfernungsmarkierungen
+
+Schaltet die Sichtbarkeit der Entfernungsmarker auf der Karte um.
+Sie werden für die aktuelle Auswahl angezeigt, wie in [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Richtungspfeile
+
+Schaltet die Sichtbarkeit der Richtungspfeile auf der Karte um.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> 3D Ein/Aus
+
+Aufrufen oder Beenden der 3D-Kartenansicht.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/toolbar.mdx b/website/src/lib/docs/de/toolbar.mdx
new file mode 100755
index 0000000..e27e66d
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Werkzeugleiste
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Jedes Werkzeug wird durch ein Symbol dargestellt und kann durch einen Klick aktiviert werden.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+In den folgenden Abschnitten werden die einzelnen Tools detailliert beschrieben.
diff --git a/website/src/lib/docs/de/toolbar/clean.mdx b/website/src/lib/docs/de/toolbar/clean.mdx
new file mode 100755
index 0000000..e918e35
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Bereinigen
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Wenn das Bereinigungswerkzeug ausgewählt wurde, erzeugt das Ziehen der Karte eine rechteckige Auswahl.
+
+Abhängig von den Optionen, die im unten gezeigten Dialogfeld ausgewählt wurden, werden durch Klicken auf die Schaltfläche "Entfernen" GPS-Punkte und/oder [points of interest](../gpx) entfernt, die sich entweder innerhalb oder außerhalb der Auswahl befinden.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/de/toolbar/elevation.mdx b/website/src/lib/docs/de/toolbar/elevation.mdx
new file mode 100755
index 0000000..6d13125
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Anstieg
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/toolbar/extract.mdx b/website/src/lib/docs/de/toolbar/extract.mdx
new file mode 100755
index 0000000..eef356c
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extrahieren
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Dieses Tool ermöglicht Ihnen, [tracks (or segments)](../gpx) von Dateien (oder Tracks) zu extrahieren, die mehreren von denen enthalten.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Wenn Sie das Tool auf eine Datei mit mehreren enthaltenen Tracks anwenden, wird für jeden der darin enthaltenen Tracks eine neue Datei erstellt.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+Beim Extrahieren der Tracks aus einer Datei mit <a href="../gpx">points-of-interest</a>, wird das Tool automatisch jeden Punkt zuordnen, an dem es am nächsten ist.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/toolbar/merge.mdx b/website/src/lib/docs/de/toolbar/merge.mdx
new file mode 100755
index 0000000..2ecf47c
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- Die zweite Option kann verwendet werden, um Dateien mit mehreren [Tracks oder Segments](../gpx) zu erstellen oder zu verwalten.
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/de/toolbar/minify.mdx b/website/src/lib/docs/de/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/de/toolbar/poi.mdx b/website/src/lib/docs/de/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/de/toolbar/routing.mdx b/website/src/lib/docs/de/toolbar/routing.mdx
new file mode 100755
index 0000000..ff2316d
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Einstellungen
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/de/toolbar/scissors.mdx b/website/src/lib/docs/de/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/de/toolbar/time.mdx b/website/src/lib/docs/de/toolbar/time.mdx
new file mode 100755
index 0000000..dbb7870
--- /dev/null
+++ b/website/src/lib/docs/de/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Zeit
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Mit diesem Tool können Sie Zeitstempel zu einer Spur hinzufügen oder ändern.
+Sie können einfach das unten angezeigte Formular verwenden und es dann validieren, wenn Sie fertig sind.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Wenn Sie die Geschwindigkeit bearbeiten, wird die Bewegungszeit entsprechend in dem Formular angepasst und umgekehrt.
+Ebenso wird beim Bearbeiten der Startzeit die Endzeit aktualisiert, um die gleiche Gesamtdauer zu behalten und umgekehrt.
+
+<DocsNote>
+
+Wenn Sie dieses Tool mit vorhandenen Zeitstempeln verwenden, werden diese durch Ändern der Zeit oder Geschwindigkeit einfach entsprechend verschoben, gestreckt oder komprimiert.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/faq.mdx b/website/src/lib/docs/el/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/el/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/files-and-stats.mdx b/website/src/lib/docs/el/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/el/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/el/getting-started.mdx b/website/src/lib/docs/el/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/el/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/el/gpx.mdx b/website/src/lib/docs/el/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/el/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/el/home/funding.mdx b/website/src/lib/docs/el/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/el/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/el/home/mapbox.mdx b/website/src/lib/docs/el/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/el/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/el/home/translation.mdx b/website/src/lib/docs/el/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/el/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/el/integration.mdx b/website/src/lib/docs/el/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/el/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/el/map-controls.mdx b/website/src/lib/docs/el/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/el/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/el/menu.mdx b/website/src/lib/docs/el/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/el/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/menu/edit.mdx b/website/src/lib/docs/el/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/el/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/el/menu/file.mdx b/website/src/lib/docs/el/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/el/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/menu/settings.mdx b/website/src/lib/docs/el/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/el/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/el/menu/view.mdx b/website/src/lib/docs/el/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/el/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/toolbar.mdx b/website/src/lib/docs/el/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/el/toolbar/clean.mdx b/website/src/lib/docs/el/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/el/toolbar/elevation.mdx b/website/src/lib/docs/el/toolbar/elevation.mdx
new file mode 100755
index 0000000..1f034ff
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Υψόμετρο
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/toolbar/extract.mdx b/website/src/lib/docs/el/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/toolbar/merge.mdx b/website/src/lib/docs/el/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/el/toolbar/minify.mdx b/website/src/lib/docs/el/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/el/toolbar/poi.mdx b/website/src/lib/docs/el/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/el/toolbar/routing.mdx b/website/src/lib/docs/el/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/el/toolbar/scissors.mdx b/website/src/lib/docs/el/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/el/toolbar/time.mdx b/website/src/lib/docs/el/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/el/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/en/faq.mdx b/website/src/lib/docs/en/faq.mdx
new file mode 100755
index 0000000..2eeb70c
--- /dev/null
+++ b/website/src/lib/docs/en/faq.mdx
@@ -0,0 +1,34 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? *Or* how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/files-and-stats.mdx b/website/src/lib/docs/en/files-and-stats.mdx
new file mode 100755
index 0000000..8ec8042
--- /dev/null
+++ b/website/src/lib/docs/en/files-and-stats.mdx
@@ -0,0 +1,81 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+    
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/en/getting-started.mdx b/website/src/lib/docs/en/getting-started.mdx
new file mode 100755
index 0000000..a2687cc
--- /dev/null
+++ b/website/src/lib/docs/en/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/gpx.mdx b/website/src/lib/docs/en/gpx.mdx
new file mode 100755
index 0000000..1b2463d
--- /dev/null
+++ b/website/src/lib/docs/en/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called *waypoints*) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/en/home/funding.mdx b/website/src/lib/docs/en/home/funding.mdx
new file mode 100755
index 0000000..03b7103
--- /dev/null
+++ b/website/src/lib/docs/en/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
\ No newline at end of file
diff --git a/website/src/lib/docs/en/home/mapbox.mdx b/website/src/lib/docs/en/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/en/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/en/home/translation.mdx b/website/src/lib/docs/en/home/translation.mdx
new file mode 100755
index 0000000..e5f4800
--- /dev/null
+++ b/website/src/lib/docs/en/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
\ No newline at end of file
diff --git a/website/src/lib/docs/en/integration.mdx b/website/src/lib/docs/en/integration.mdx
new file mode 100755
index 0000000..38f79d9
--- /dev/null
+++ b/website/src/lib/docs/en/integration.mdx
@@ -0,0 +1,26 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+1. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+    
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/en/map-controls.mdx b/website/src/lib/docs/en/map-controls.mdx
new file mode 100755
index 0000000..f286dbc
--- /dev/null
+++ b/website/src/lib/docs/en/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+    
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+Depending on their purpose, basemaps have different styles and levels of detail.
+Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/en/menu.mdx b/website/src/lib/docs/en/menu.mdx
new file mode 100755
index 0000000..46b3737
--- /dev/null
+++ b/website/src/lib/docs/en/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/menu/edit.mdx b/website/src/lib/docs/en/menu/edit.mdx
new file mode 100755
index 0000000..42cf1f4
--- /dev/null
+++ b/website/src/lib/docs/en/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as *file items*.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+    
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/menu/file.mdx b/website/src/lib/docs/en/menu/file.mdx
new file mode 100755
index 0000000..62c0f0c
--- /dev/null
+++ b/website/src/lib/docs/en/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/menu/settings.mdx b/website/src/lib/docs/en/menu/settings.mdx
new file mode 100755
index 0000000..2a95081
--- /dev/null
+++ b/website/src/lib/docs/en/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+    
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
\ No newline at end of file
diff --git a/website/src/lib/docs/en/menu/view.mdx b/website/src/lib/docs/en/menu/view.mdx
new file mode 100755
index 0000000..60b75e1
--- /dev/null
+++ b/website/src/lib/docs/en/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar.mdx b/website/src/lib/docs/en/toolbar.mdx
new file mode 100755
index 0000000..f9014ef
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/clean.mdx b/website/src/lib/docs/en/toolbar/clean.mdx
new file mode 100755
index 0000000..0d13ab5
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/elevation.mdx b/website/src/lib/docs/en/toolbar/elevation.mdx
new file mode 100755
index 0000000..09d784e
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/extract.mdx b/website/src/lib/docs/en/toolbar/extract.mdx
new file mode 100755
index 0000000..8bd1dbb
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/merge.mdx b/website/src/lib/docs/en/toolbar/merge.mdx
new file mode 100755
index 0000000..6101e59
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/en/toolbar/minify.mdx b/website/src/lib/docs/en/toolbar/minify.mdx
new file mode 100755
index 0000000..d8d9e03
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/poi.mdx b/website/src/lib/docs/en/toolbar/poi.mdx
new file mode 100755
index 0000000..b1ad70a
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/routing.mdx b/website/src/lib/docs/en/toolbar/routing.mdx
new file mode 100755
index 0000000..5aadd6d
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/toolbar/scissors.mdx b/website/src/lib/docs/en/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/en/toolbar/time.mdx b/website/src/lib/docs/en/toolbar/time.mdx
new file mode 100755
index 0000000..deb5745
--- /dev/null
+++ b/website/src/lib/docs/en/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+    
+</DocsNote>
\ No newline at end of file
diff --git a/website/src/lib/docs/es/faq.mdx b/website/src/lib/docs/es/faq.mdx
new file mode 100755
index 0000000..707e2e6
--- /dev/null
+++ b/website/src/lib/docs/es/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: Preguntas frecuentes (FAQ)
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### ¿Necesito donar para usar el sitio web?
+
+No.
+El sitio web es de uso gratuito y siempre lo será (siempre y cuando sea financieramente sostenible).
+Sin embargo, las donaciones son apreciadas y ayudan a mantener el sitio web en funcionamiento.
+
+### ¿Por qué se elige esta ruta en lugar de la otra? _O_ ¿cómo puedo añadir algo al mapa?
+
+**gpx.rnmkcy.eu** utiliza datos de <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, que es un mapa del mundo abierto y colaborativo.
+Esto significa que puede contribuir al mapa añadiendo o editando datos en OpenStreetMap.
+
+Si nunca antes ha contribuido a OpenStreetMap, aquí le mostramos cómo puede sugerir cambios:
+
+1. Vaya a la ubicación donde quiera añadir o editar datos en el <a href="https://www.openstreetmap.org/" target="_blank">mapa</a>.
+2. Utilice la herramienta <button>Consulta</button> a la derecha para inspeccionar los datos existentes.
+3. Haga clic con el botón derecho en la ubicación y seleccione <button>Añadir una nota aquí</button>.
+4. Explique qué es incorrecto o falta en la nota y haga clic en <button>Añadir nota</button> para enviarla.
+
+Alguien más con experiencia con OpenStreetMap revisará su nota y realizará los cambios necesarios.
+
+<DocsNote>
+
+Puede encontrar más información sobre cómo contribuir a OpenStreetMap <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">aquí</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/files-and-stats.mdx b/website/src/lib/docs/es/files-and-stats.mdx
new file mode 100755
index 0000000..4b0fe1b
--- /dev/null
+++ b/website/src/lib/docs/es/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Archivos y estadísticas
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Lista de archivos
+
+Una vez que tenga archivos [abiertos](./menu/file), se mostrarán como pestañas en la lista de archivos ubicada en la parte inferior del mapa.
+Puede reordenarlos arrastrando y soltando las pestañas.
+Y cuando se abran muchos archivos, puede desplazarse por la lista de pestañas para navegar entre ellos.
+
+<DocsNote>
+
+Al usar un ratón, debe mantener pulsado <kbd>Shift</kbd> para hacer scroll horizontal.
+
+</DocsNote>
+
+### Selección de archivo
+
+Al hacer clic en una pestaña, puede alternar entre archivos para inspeccionar sus estadísticas y aplicarles [acciones de edición](./menu/edit) y [herramientas](./toolbar).
+Manteniendo presionada la tecla <kbd>Ctrl/Cmd</kbd>, puede añadir o eliminar archivos a la selección y manteniendo presionada la tecla <kbd>Shift</kbd>, puede seleccionar un conjunto de archivos.
+La mayoría de las [acciones de edición](./menu/edit) y [herramientas](./toolbar) se pueden aplicar a varios archivos a la vez.
+
+<DocsNote>
+
+También puede navegar a través de los archivos usando las teclas de flecha de su teclado, y usar <kbd>Shift</kbd> para añadir archivos a la selección.
+
+</DocsNote>
+
+### Acciones de edición
+
+Al hacer clic con el botón derecho en una pestaña de archivo, puede acceder a las acciones del [menú edición](./menu/edit).
+
+### Disposición vertical
+
+Tal como se menciona en la [sección de opciones de vista](./menu/view), puede alternar entre una disposición horizontal o vertical para la lista de archivos.
+La lista vertical de archivos es útil cuando tiene muchos archivos abiertos, o archivos con varios [pistas, segmentos o puntos de interés](./gpx).
+En efecto, esta disposición le permite inspeccionar el contenido de los archivos a través de secciones plegables.
+
+También puede aplicar [acciones de edición](./menu/edit) y [herramientas](./toolbar) a los elementos internos del archivo.
+Además, puede arrastrar y soltar los elementos internos para reordenarlos, o moverlos dentro de la jerarquía o incluso a otro archivo.
+
+<DocsNote>
+
+El tamaño de la lista de archivos se puede ajustar arrastrando el separador entre el mapa y la lista de archivos.
+
+</DocsNote>
+
+## Perfil de elevación y estadísticas
+
+En la parte inferior de la interfaz, puede ver el perfil de elevación y estadísticas para la selección actual.
+
+<DocsNote>
+
+El tamaño del perfil de elevación se puede ajustar arrastrando el separador entre el mapa y el perfil de elevación.
+
+</DocsNote>
+
+### Estadísticas interactivas
+
+Al pasar el cursor sobre el perfil de elevación, un globo emergente mostrará estadísticas en la posición del cursor.
+
+Para obtener las estadísticas de una sección específica del perfil de elevación, puede arrastrar para crear una selección rectangular en el perfil.
+Haga clic en el perfil para reiniciar la selección.
+
+Puede usar el ratón para acercar o alejar el perfil de elevación y moverse hacia la izquierda y derecha arrastrando el perfil manteniendo pulsada la tecla <kbd>Shift</kbd>.
+
+### Datos adicionales
+
+Usando los botones situados a la derecha del perfil de elevación, puede colorearlo por:
+
+- **pendiente** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> información calculada a partir de los datos de elevación, o
+- **superficie** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> datos obtenidos de etiquetas de <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">superficie</a> de <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>.
+  Solo disponible para archivos creados con **gpx.rnmkcy.eu**.
+
+Si su selección lo incluye, puede visualizar datos de **velocidad** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **ritmo cardíaco** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadencia** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperatura** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> y **potencia** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> en el perfil de elevación.
diff --git a/website/src/lib/docs/es/getting-started.mdx b/website/src/lib/docs/es/getting-started.mdx
new file mode 100755
index 0000000..85881af
--- /dev/null
+++ b/website/src/lib/docs/es/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Primeros pasos
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+¡Bienvenido a la guía oficial de **gpx.rnmkcy.eu**!
+Esta guía le llevará a través de todos los componentes y herramientas de la interfaz, ayudándole a convertirse en un usuario competente de la aplicación.
+
+<DocsImage src="getting-started/interface" alt="La interfaz de gpx.rnmkcy.eu." />
+
+Como se muestra en la captura de pantalla anterior, la interfaz se divide en cuatro secciones principales organizadas alrededor del mapa. 
+Antes de entrar en los detalles de cada sección, echemos un vistazo rápido a la interfaz.
+
+## Menú
+
+En la parte superior de la interfaz, encontrará el [menú principal](./menu).
+Desde ahí puede acceder a acciones comunes tales como abrir, cerrar y exportar archivos, deshacer y rehacer y ajustar la configuración de la aplicación.
+
+## Archivos y estadísticas
+
+En la parte inferior de la interfaz, encontrará la lista de archivos actualmente abiertos en la aplicación.
+Puede hacer clic en un archivo para seleccionarlo y mostrar sus estadísticas debajo de la lista.
+En la [sección dedicada](./files-and-stats), explicaremos cómo seleccionar varios archivos y cambiar a una distribución vertical para la gestión avanzada de archivos.
+
+## Barra de herramientas
+
+A la izquierda de la interfaz encontrará la [barra de herramientas](./toolbar), que contiene todas las herramientas que puede utilizar para editar sus archivos.
+
+## Controles del mapa
+
+Finalmente, a la derecha de la interfaz encontrará los [controles de mapa](./map-controls).
+Estos controles le permiten navegar por el mapa, acercarse, alejarse y cambiar entre diferentes estilos de mapa.
diff --git a/website/src/lib/docs/es/gpx.mdx b/website/src/lib/docs/es/gpx.mdx
new file mode 100755
index 0000000..7f03e59
--- /dev/null
+++ b/website/src/lib/docs/es/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: Formato de archivo GPX
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+El <a href="https://www.topografix.com/gpx.asp" target="_blank">formato de archivo GPX</a> es un estándar abierto para el intercambio de datos GPS entre aplicaciones y dispositivos GPS.
+Consiste esencialmente en una serie de puntos GPS que codifican uno o varios trazados GPS y, opcionalmente, algunos puntos de interés.
+
+Los archivos GPX también pueden contener metadatos, de los cuales los campos **nombre** y **descripción** son los más útiles para los usuarios.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Pistas, segmentos y puntos GPS
+
+Como se mencionó anteriormente, un archivo GPX puede contener múltiples trazados GPS.
+Éstos están organizados en una estructura jerárquica, con las pistas en el nivel superior.
+
+- Una **pista** está compuesta por una secuencia de segmentos desconectados.
+  Además, puede contener metadatos como un **nombre**, una **descripción**, y **propiedades de apariencia**.
+- Un **segmento** es una secuencia de puntos GPS que forman una ruta continua.
+- Un **punto GPS** es una ubicación con latitud, longitud y opcionalmente una marca de tiempo y altitud.
+  Algunos dispositivos también almacenan información adicional como ritmo cardíaco, cadencia, temperatura y potencia.
+
+En la mayoría de los casos, los archivos GPX contienen una sola pista con un solo segmento.
+Sin embargo, la jerarquía descrita anteriormente permite casos de uso más avanzados, como la planificación de viajes de varios días con varias variantes para cada día.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Puntos de interés
+
+**Puntos de interés** (técnicamente llamados _waypoints_) representan ubicaciones de interés para mostrar en un dispositivo GPS o en un mapa digital.
+
+Además de sus coordenadas, un punto de interés puede tener un **nombre** y una **descripción**.
diff --git a/website/src/lib/docs/es/home/funding.mdx b/website/src/lib/docs/es/home/funding.mdx
new file mode 100755
index 0000000..e96ae5b
--- /dev/null
+++ b/website/src/lib/docs/es/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ayude a mantener este sitio gratis (y libre de anuncios)
+
+Cada vez que añade o mueve puntos GPS, nuestros servidores calculan la mejor ruta en la red de carreteras.
+También usamos APIs de <a href="https://mapbox.com" target="_blank">Mapbox</a> para mostrar hermosos mapas, obtener datos de elevación y permitirle buscar lugares.
+
+Por desgracia, esto tiene un coste económico.
+Si disfruta usando esta herramienta y la encuentra valiosa, por favor considere hacer una pequeña donación para ayudar a mantener este sitio gratis y libre de anuncios.
+
+¡Muchas gracias por su apoyo! ❤️
diff --git a/website/src/lib/docs/es/home/mapbox.mdx b/website/src/lib/docs/es/home/mapbox.mdx
new file mode 100755
index 0000000..e6a826d
--- /dev/null
+++ b/website/src/lib/docs/es/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox es la empresa que proporciona algunos de los hermosos mapas de este sitio.
+Ellos también desarrollan el <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">motor de mapas</a> que impulsa **gpx.rnmkcy.eu**.
+
+Somos increíblemente afortunados y agradecemos se parte de su programa <a href="https://mapbox.com/community" target="_blank">Comunidad</a>, que apoya a organizaciones sin ánimo de lucro, instituciones educativas y de impacto positivo.
+Esta asociación permite a **gpx.rnmkcy.eu** beneficiarse de las herramientas de Mapbox a precios con descuento, contribuyendo en gran medida a la viabilidad financiera del proyecto y permitiéndonos ofrecer la mejor experiencia de usuario posible.
diff --git a/website/src/lib/docs/es/home/translation.mdx b/website/src/lib/docs/es/home/translation.mdx
new file mode 100755
index 0000000..3cbfcf1
--- /dev/null
+++ b/website/src/lib/docs/es/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Traducción
+
+Este sitio está traducido por voluntarios usando una plataforma de traducción colaborativa.
+Puede contribuir añadiendo o mejorando las traducciones en nuestro <a href="https://crowdin.com/project/gpxstudio" target="_blank">proyecto Crowdin</a>.
+
+Si quiere comenzar la traducción en un nuevo idioma, por favor <a href="#contact">contáctenos</a>.
+
+¡Tu ayuda es bienvenida!
diff --git a/website/src/lib/docs/es/integration.mdx b/website/src/lib/docs/es/integration.mdx
new file mode 100755
index 0000000..539beb5
--- /dev/null
+++ b/website/src/lib/docs/es/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integración
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+Puede usar **gpx.rnmkcy.eu** para crear mapas que muestren sus archivos GPX e integrarlos en su sitio web.
+
+Todo lo que necesita es:
+
+1. Un <a href="https://account.mapbox.com/auth/signup" target="_blank">token de acceso a Mapbox</a> para cargar el mapa, y
+2. Archivos GPX alojados en su servidor, en Google Drive o accesibles a través de una URL pública.
+
+Luego puede jugar con el configurador de abajo para personalizar su mapa y generar el código HTML correspondiente.
+
+<DocsNote type="warning">
+
+Necesitará configurar las cabeceras <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> en su servidor para permitir a <b>gpx.rnmkcy.eu</b> que cargue sus archivos GPX.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/es/map-controls.mdx b/website/src/lib/docs/es/map-controls.mdx
new file mode 100755
index 0000000..d9629e0
--- /dev/null
+++ b/website/src/lib/docs/es/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Controles del mapa
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+Los controles del mapa se encuentran en la parte derecha de la interfaz.
+Estos controles le permiten navegar por el mapa, acercarse, alejarse y cambiar entre diferentes estilos de mapa.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Navegación del mapa
+
+Los controles de la parte superior le permiten acercarse <Plus size="16" class="inline-block" style="margin-bottom: 2px" />, alejarse <Minus size="16" class="inline-block" style="margin-bottom: 2px" /> y cambiar la orientación e inclinación del mapa <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+Para controlar la orientación e inclinación del mapa, puede arrastrarlo mientras mantiene pulsada la tecla <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Barra de búsqueda
+
+Puede usar la barra de búsqueda para buscar una dirección y navegar hacia ella en el mapa.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Botón de ubicación
+
+El botón de ubicación centra el mapa en su ubicación actual.
+
+<DocsNote>
+
+Solo funciona si ha permitido que su navegador y <b>gpx.rnmkcy.eu</b> accedan a su ubicación.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Vista de calle
+
+Este botón se usa para activar el modo de vista en calle en el mapa.
+Dependiendo de la fuente de la vista de calle seleccionada en la [configuración](./menu/settings), se puede acceder a las imágenes de las calles de forma diferente.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: la cobertura de la vista de calle aparecerá como líneas verdes en el mapa. Al acercarse lo suficiente, se mostrarán las ubicaciones exactas como puntos verdes donde estén disponibles las imágenes de vista de calle. Al pasar el cursor por encima de un punto verde se mostrará la imagen de la calle en esa ubicación.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: haga clic en el mapa para abrir una nueva pestaña con las imágenes de vista de calle de esa ubicación.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Capas de mapa
+
+El botón de capas de mapa le permite cambiar entre diferentes mapas bases y alternar capas superpuestas del mapa y categorías de puntos de interés.
+
+- Los **mapas base** son mapas de fondo que presentan las principales características geográficas del mundo.
+  Dependiendo de su propósito, los mapas base tienen distintos estilos y niveles de detalle.
+  Solo se puede mostrar un mapa base a la vez.
+- Las **capas superpuestas** son capas adicionales que se pueden mostrar sobre el mapa de base para proporcionar información complementaria.
+- Los **puntos de interés** se pueden añadir al mapa para mostrar diferentes categorías de lugares, como tiendas, restaurantes o alojamientos.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Sitúe el cursor sobre el mapa para mostrar la capa <a href="https://hiking.waymarkedtrails.org" target="_blank">Rutas Señalizadas de senderismo</a> sobre el mapa base <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Exteriores</a>.
+    </span>
+</div>
+
+Una gran colección de mapas y capas superpuestas globales y locales está disponible en **gpx.rnmkcy.eu**, así como una selección de categorías de puntos de interés.
+Pueden activarse en la [configuración de capas del mapa](./menu/settings).
+
+En estos ajustes, también puede administrar la opacidad de las capas superpuestas.
+
+Para los usuarios avanzados, es posible añadir mapas base y superposiciones personalizadas proporcionando <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> o URLs <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">JSON estilo Mapbox</a>.
diff --git a/website/src/lib/docs/es/menu.mdx b/website/src/lib/docs/es/menu.mdx
new file mode 100755
index 0000000..069c051
--- /dev/null
+++ b/website/src/lib/docs/es/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menú
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+El menú principal, situado en la parte superior de la interfaz, proporciona acceso a acciones, opciones y configuraciones divididas en varias categorías, explicadas por separado en las siguientes secciones.
+
+<DocsNote>
+
+La mayoría de las acciones pueden ser ejecutadas usando los atajos de teclado que se muestran en el menú.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/menu/edit.mdx b/website/src/lib/docs/es/menu/edit.mdx
new file mode 100755
index 0000000..fd44b6d
--- /dev/null
+++ b/website/src/lib/docs/es/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Acciones de edición
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+A diferencia de las acciones de archivo, las acciones de edición pueden potencialmente modificar el contenido de los archivos seleccionados actualmente.
+Además, cuando está habilitada la distribución vertical de la lista de archivos (ver [Archivos y estadísticas](../files-and-stats)), también se pueden aplicar a [pistas, segmentos y puntos de interés](../gpx).
+Por lo tanto, nos referiremos a los elementos que pueden ser modificados por estas acciones como _elementos de archivo_.
+Tenga en cuenta que, excepto para las acciones de deshacer y rehacer, las acciones de edición también son accesibles a través del menú contextual (clic derecho) de los elementos del archivo.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Deshacer y rehacer
+
+Usando estos botones, puede deshacer o rehacer las últimas acciones que realizó.
+Esto aplica a todas las acciones de la interfaz pero no a las opciones de vista, ajustes de la aplicación o la navegación del mapa.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> información...
+
+Abre el cuadro de diálogo de información del elemento del archivo seleccionado, donde puede ver y editar su nombre y descripción.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Apariencia...
+
+Abre el diálogo de apariencia, donde puede cambiar el color, la opacidad y el ancho en el mapa de los elementos de archivo seleccionados.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Ocultar/mostrar
+
+Alterna la visibilidad de los elementos del archivo seleccionado en el mapa.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nueva pista
+
+Crear una nueva pista en el archivo seleccionado.
+
+<DocsNote>
+
+Esta acción solo está disponible cuando está activada la disposición vertical de la lista de archivos.
+Además, la selección debe ser un solo archivo.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nuevo segmento
+
+Crear un nuevo segmento en la pista seleccionada.
+
+<DocsNote>
+
+Esta acción solo está disponible cuando está activada la disposición vertical de la lista de archivos.
+Además, la selección debe ser una sola pista.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Seleccionar todo
+
+Añade todos los elementos del archivo en el nivel de jerarquía actual a la selección.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Centrar
+
+Centrar el mapa en los elementos de archivo seleccionados.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copiar
+
+Copia los elementos del archivo seleccionado al portapapeles.
+
+<DocsNote>
+
+Esta acción solo está disponible cuando está activada la disposición vertical de la lista de archivos.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cortar
+
+Corta los elementos del archivo seleccionado al portapapeles.
+
+<DocsNote>
+
+Esta acción solo está disponible cuando está activada la disposición vertical de la lista de archivos.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Pegar
+
+Pega los elementos de archivo del portapapeles al nivel de jerarquía actual si son compatibles con él.
+
+<DocsNote>
+
+Esta acción solo está disponible cuando está activada la disposición vertical de la lista de archivos.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Eliminar
+
+Elimina los elementos del archivo seleccionados.
diff --git a/website/src/lib/docs/es/menu/file.mdx b/website/src/lib/docs/es/menu/file.mdx
new file mode 100755
index 0000000..0005906
--- /dev/null
+++ b/website/src/lib/docs/es/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Acciones de archivo
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+El menú de acciones de archivo contiene un conjunto de operaciones bastante autoexplicativas.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nuevo
+
+Crea un nuevo archivo vacío.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Abrir...
+
+Abre archivos desde su equipo. 
+
+<DocsNote>
+
+Puede arrastrar y soltar archivos directamente desde su sistema de archivos a la ventana.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicar
+
+Crear una copia de los archivos seleccionados actualmente.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Cerrar
+
+Cerrar los archivos seleccionados actualmente.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Cerrar todo
+
+Cerrar todos los archivos.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
+
+Abrir el cuadro de diálogo de exportación para guardar en su equipo los archivos seleccionados actualmente.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar todo...
+
+Abre el diálogo de exportación para guardar todos los archivos en su equipo.
+
+<DocsNote type="warning">
+
+Si su descarga no comienza tras hacer clic en el botón de descarga, por favor revise la configuración de su navegador para permitir descargas desde <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/menu/settings.mdx b/website/src/lib/docs/es/menu/settings.mdx
new file mode 100755
index 0000000..1b3caf3
--- /dev/null
+++ b/website/src/lib/docs/es/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Configuración
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Unidades de distancia
+
+Cambia las unidades usadas para mostrar distancias en la interfaz.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Unidades de velocidad
+
+Cambia las unidades usadas para mostrar velocidades en la interfaz.
+Puede elegir entre distancia por hora o minutos por distancia, lo cual puede ser más adecuado para actividades de carrera.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Unidades de temperatura
+
+Cambia las unidades usadas para mostrar temperaturas en la interfaz.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Idioma
+
+Cambia el idioma usado en la interfaz.
+
+<DocsNote>
+
+Puede contribuir añadiendo o mejorando las traducciones en nuestro <a href="https://crowdin.com/project/gpxstudio" target="_blank">proyecto Crowdin</a>.
+Si quiere comenzar la traducción en un nuevo idioma, por favor <a href="#contact">contáctenos</a>.
+¡Tu ayuda es bienvenida!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Tema
+
+Cambia el tema usado en la interfaz.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Fuente de vista de calle
+
+Cambia la fuente usada para el [control de vista de calle](../map-controls).
+El predeterminado es <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, pero también puede usar <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Aprenda más sobre cómo usar el control de la vista de calle en la [sección de controles de mapa](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Capas de mapa...
+
+Abre un cuadro de diálogo donde puede activar o desactivar capas de mapa, añadir capas personalizadas, cambiar la opacidad de las capas superpuestas, y más.
+Puede encontrar más información sobre las capas de mapa en la [sección de controles de mapa](../map-controls).
diff --git a/website/src/lib/docs/es/menu/view.mdx b/website/src/lib/docs/es/menu/view.mdx
new file mode 100755
index 0000000..480dc75
--- /dev/null
+++ b/website/src/lib/docs/es/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Opciones de vista
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Este menú proporciona opciones para reorganizar la interfaz y la vista del mapa.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Perfil de elevación
+
+Oculta el perfil de elevación para dejar espacio para el mapa, o lo muestra para inspeccionar la selección actual.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Lista vertical de archivos
+
+Cambia entre una distribución vertical u horizontal para la lista de archivos.
+La [lista vertical de archivos](../files-and-stats) es útil cuando tiene muchos archivos abiertos o archivos con varios [pistas, segmentos o puntos de interés](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Cambiar al mapa base anterior
+
+Cambia el mapa base al seleccionado previamente mediante el [control de capa de mapa](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Alternar capas superpuestas
+
+Cambia la visibilidad de las capas seleccionadas del mapa a través del [control de capa de mapa](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Marcadores de distancia
+
+Alterna la visibilidad de los marcadores de distancia en el mapa.
+Se muestran para la selección actual, como el [perfil de elevación](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Flechas de dirección
+
+Alterna la visibilidad de las flechas de dirección en el mapa.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Alternar 3D
+
+Entra o sale de la vista 3D del mapa.
+
+<DocsNote>
+
+Para controlar la orientación e inclinación del mapa, puede arrastrarlo mientras mantiene pulsada la tecla <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/toolbar.mdx b/website/src/lib/docs/es/toolbar.mdx
new file mode 100755
index 0000000..c6e6979
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Barra de herramientas
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+La barra de herramientas se encuentra a la izquierda del mapa y es el corazón de la aplicación ya que proporciona acceso a las principales características de **gpx.rnmkcy.eu**.
+Cada herramienta está representada por un icono y se puede activar haciendo clic en él.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Al igual que con las [acciones de edición](./menu/edit), la mayoría de las herramientas se pueden aplicar a varios archivos a la vez y a [segmentos y pistas internos](./gpx).
+
+Las siguientes secciones describen cada herramienta en detalle.
diff --git a/website/src/lib/docs/es/toolbar/clean.mdx b/website/src/lib/docs/es/toolbar/clean.mdx
new file mode 100755
index 0000000..aea4a0b
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Limpiar
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Al seleccionar la herramienta limpiar, si arrastra sobre el mapa creará una selección rectangular.
+
+Dependiendo de las opciones seleccionadas en el diálogo que se muestra a continuación, hacer clic en el botón de borrar eliminará los puntos GPS y/o [puntos de interés](../gpx) ubicados dentro o fuera de la selección.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/es/toolbar/elevation.mdx b/website/src/lib/docs/es/toolbar/elevation.mdx
new file mode 100755
index 0000000..192fcbd
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Desnivel
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Le permite añadir datos de desnivel a trazas y [puntos de interés](../gpx), o reemplazar los datos existentes.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Los datos de desnivel son proporcionados por <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Puede aprender más sobre su origen y precisión en la <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentación</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/toolbar/extract.mdx b/website/src/lib/docs/es/toolbar/extract.mdx
new file mode 100755
index 0000000..c416f06
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extracción
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta herramienta le permite extraer [pistas (o segmentos)](../gpx) de archivos (o pistas) que contengan varios.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Aplicar la herramienta a un archivo que contenga múltiples pistas creará un nuevo archivo para cada una de las pistas.
+Del mismo modo, la aplicación de la herramienta a una pista que contenga varios segmentos creará (en el mismo archivo) una nueva pista para cada uno de los segmentos.
+
+<DocsNote>
+
+Al extraer las pistas de un archivo que contenga <a href="../gpx">puntos de interés</a>, la herramienta asignará automáticamente cada punto de interés a la pista más cercana a él.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/toolbar/merge.mdx b/website/src/lib/docs/es/toolbar/merge.mdx
new file mode 100755
index 0000000..246ae63
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Combinar
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Para usar esta herramienta, necesita [seleccionar](../files-and-stats) múltiples archivos, [pistas o segmentos](../gpx).
+
+- Si su objetivo es crear un único trazado continuo a partir de su selección, use la opción **Conectar los trazados** y valide.
+- La segunda opción se puede usar para crear o gestionar archivos con múltiples [pistas o segmentos](../gpx).
+  Combinar archivos (o pistas) dará como resultado un único archivo (o pista) que contendrá todas las pistas (o segmentos) de la selección.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/es/toolbar/minify.mdx b/website/src/lib/docs/es/toolbar/minify.mdx
new file mode 100755
index 0000000..8fa8da4
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minimizar
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta herramienta se puede usar para reducir el número de puntos GPS en un trazado, lo que puede ser útil para reducir su tamaño.
+
+Puede ajustar la tolerancia del algoritmo de simplificación usando el deslizador, y ver el número de puntos que se conservarán, así como el trazado simplificado en el mapa.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+El valor de tolerancia representa la distancia máxima permitida entre el trazado original y el trazado simplificado.
+Puede leer más sobre el algoritmo usado <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">aquí</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/es/toolbar/poi.mdx b/website/src/lib/docs/es/toolbar/poi.mdx
new file mode 100755
index 0000000..c7f8892
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Puntos de interés
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Se pueden añadir [puntos de interés](../gpx) a archivos GPX para marcar ubicaciones de interés en el mapa y mostrarlos en tu dispositivo GPS.
+
+### Creación de un punto de interés
+
+Para crear un punto de interés, rellene el formulario que se muestra a continuación.
+Puede elegir la ubicación del punto de interés haciendo clic en el mapa o introduciendo las coordenadas manualmente.
+Valide el formulario cuando termine.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Edición de un punto de interés
+
+El formulario anterior también se puede usar para editar un punto de interés existente después de seleccionarlo en el mapa.
+Si solo necesita mover el punto de interés, puede arrastrarlo a la ubicación deseada.
diff --git a/website/src/lib/docs/es/toolbar/routing.mdx b/website/src/lib/docs/es/toolbar/routing.mdx
new file mode 100755
index 0000000..39f364f
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Planificación y edición de rutas
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+La herramienta de planificación y edición de rutas le permite crear y editar rutas colocando o moviendo puntos de ancla en el mapa.
+
+## Configuración
+
+Como se muestra a continuación, el cuadro de diálogo de la herramienta contiene algunas opciones para controlar el comportamiento de enrutamiento.
+Puede minimizar el cuadro de diálogo para ahorrar espacio haciendo clic en <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Enrutamiento
+
+Cuando el enrutamiento está habilitado, los puntos de ancla colocados o movidos en el mapa se conectarán mediante una ruta calculada sobre la red viaria de <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Deshabilita el enrutamiento para conectar puntos de ancla con líneas rectas.
+Esta opción también se puede cambiar pulsando <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Actividad
+
+Seleccione el tipo de actividad al que se ajustarán las rutas.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Permitir caminos privados
+
+Cuando está activado, el motor de enrutamiento tendrá en cuenta los caminos privados cuando se calculen rutas.
+
+<DocsNote type="warning">
+
+Use esta opción solo si tiene conocimiento local de la zona y tiene permiso para utilizar los caminos en cuestión.
+
+</DocsNote>
+
+## Trazado y edición de rutas
+
+Crear una ruta o extender una ya existente es tan sencillo como hacer clic en el mapa para colocar un nuevo punto de ancla.
+
+También puede arrastrar un punto de ancla existente para redirigir el segmento conectándolo con los puntos de ancla anterior y posterior.
+
+Además, los nuevos puntos de ancla pueden ser insertados entre los existentes situando el cursor sobre el segmento que los conecta y arrastrando a la ubicación deseada el punto de ancla que aparece.
+En dispositivos táctiles, puede tocar sobre el segmento para insertar un nuevo punto de ancla.
+
+<DocsNote>
+
+Al editar archivos GPX importados, se crea automáticamente un conjunto inicial de puntos de anclaje.
+Para facilitar el proceso de edición, cuanto más se acerque el mapa, más puntos de anclaje se mostrarán.
+Esto permite que la ruta sea editada con diferentes niveles de detalle.
+
+</DocsNote>
+
+Finalmente, puede eliminar puntos de ancla haciendo clic en ellos y seleccionando <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Eliminar</button> del menú contextual.
+
+<DocsImage src="tools/routing" alt="Los puntos de anclaje le permiten editar una ruta fácilmente." />
+
+## Herramientas adicionales
+
+Las siguientes herramientas automatizan algunas operaciones comunes de modificación de rutas.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Inverso
+
+Invierte el sentido de la ruta.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Volver al inicio
+
+Conecta el último punto de la ruta con el punto de inicio, usando los ajustes de ruta elegidos.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Ida y vuelta
+
+Vuelve al punto de inicio por la misma ruta.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Cambiar el inicio de la vuelta
+
+Cuando el punto final de la ruta está lo suficientemente cerca del inicio, puede cambiar el inicio de la vuelta haciendo clic en cualquier punto de ancla y seleccionando <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Iniciar vuelta aquí</button> desde el menú contextual.
diff --git a/website/src/lib/docs/es/toolbar/scissors.mdx b/website/src/lib/docs/es/toolbar/scissors.mdx
new file mode 100755
index 0000000..47d7f2a
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Recortar y dividir
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Recortar
+
+Usando el control deslizante, puede definir la parte del trazado seleccionado que desea conservar.
+Los marcadores de inicio y final en el mapa y el [perfil de estadísticas y elevación](../files-and-stats) se actualizan en tiempo real para reflejar la selección.
+Alternativamente, puede arrastrar un rectángulo de selección directamente en el perfil de elevación.
+Valide la selección cuando esté satisfecho con el resultado.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Dividir
+
+Para dividir el trazado seleccionado en dos partes, haga clic en uno de los marcadores que se muestran a lo largo del mismo.
+Para dividir en un punto específico de su elección, sitúe el cursor sobre el trazado en el mapa.
+Las tijeras aparecerán en la posición del cursor, mostrando que puede dividir el trazado en ese punto.
+
+Puede elegir dividir el trazado en dos archivos GPX o mantener las partes divididas en el mismo archivo como [pistas o segmentos](../gpx).
+
+<DocsImage src="tools/split" alt="Situar el cursor sobre el trazado seleccionado lo convierte en tijeras." />
diff --git a/website/src/lib/docs/es/toolbar/time.mdx b/website/src/lib/docs/es/toolbar/time.mdx
new file mode 100755
index 0000000..147013e
--- /dev/null
+++ b/website/src/lib/docs/es/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Tiempo
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta herramienta le permite cambiar o añadir marcas de tiempo a un trazado.
+Simplemente tiene que usar el formulario que se muestra a continuación y validarlo cuando haya terminado.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Al editar la velocidad, el tiempo de movimiento se actualiza en el formulario y viceversa.
+De la misma manera, al editar la hora de inicio, la hora de finalización se actualiza para mantener la misma duración total, y viceversa.
+
+<DocsNote>
+
+Al usar esta herramienta con marcas de tiempo existentes, los cambios en el tiempo o velocidad simplemente las desplazará, extenderá o comprimirá en consonancia.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/faq.mdx b/website/src/lib/docs/fi/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/fi/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/files-and-stats.mdx b/website/src/lib/docs/fi/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/fi/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/fi/getting-started.mdx b/website/src/lib/docs/fi/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/fi/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/fi/gpx.mdx b/website/src/lib/docs/fi/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/fi/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/fi/home/funding.mdx b/website/src/lib/docs/fi/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/fi/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/fi/home/mapbox.mdx b/website/src/lib/docs/fi/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/fi/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/fi/home/translation.mdx b/website/src/lib/docs/fi/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/fi/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/fi/integration.mdx b/website/src/lib/docs/fi/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/fi/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/fi/map-controls.mdx b/website/src/lib/docs/fi/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/fi/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/fi/menu.mdx b/website/src/lib/docs/fi/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/fi/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/menu/edit.mdx b/website/src/lib/docs/fi/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/fi/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/fi/menu/file.mdx b/website/src/lib/docs/fi/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/fi/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/menu/settings.mdx b/website/src/lib/docs/fi/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/fi/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/fi/menu/view.mdx b/website/src/lib/docs/fi/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/fi/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/toolbar.mdx b/website/src/lib/docs/fi/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/fi/toolbar/clean.mdx b/website/src/lib/docs/fi/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/fi/toolbar/elevation.mdx b/website/src/lib/docs/fi/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/toolbar/extract.mdx b/website/src/lib/docs/fi/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/toolbar/merge.mdx b/website/src/lib/docs/fi/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/fi/toolbar/minify.mdx b/website/src/lib/docs/fi/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fi/toolbar/poi.mdx b/website/src/lib/docs/fi/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/fi/toolbar/routing.mdx b/website/src/lib/docs/fi/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/fi/toolbar/scissors.mdx b/website/src/lib/docs/fi/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/fi/toolbar/time.mdx b/website/src/lib/docs/fi/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/fi/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/faq.mdx b/website/src/lib/docs/fr/faq.mdx
new file mode 100755
index 0000000..58fcbe1
--- /dev/null
+++ b/website/src/lib/docs/fr/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Faut-il faire un don pour utiliser le site web ?
+
+Non.
+Le site est gratuit à utiliser et le sera toujours (tant que le projet est financièrement viable).
+Cependant, les dons sont appréciés et aident à couvrir les coûts du site web.
+
+### Pourquoi cette route est-elle choisie plutôt que celle-là ? _Ou_ comment puis-je ajouter quelque chose à la carte ?
+
+**gpx.rnmkcy.eu** utilise les données d'<a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, qui est une carte mondiale ouverte et collaborative.
+Cela signifie que vous pouvez contribuer à la carte en ajoutant ou en éditant des données sur OpenStreetMap.
+
+Si vous n'avez jamais contribué à OpenStreetMap auparavant, voici comment vous pouvez suggérer des changements :
+
+1. Aller à l'emplacement où vous souhaitez ajouter ou modifier des données sur la <a href="https://www.openstreetmap.org/" target="_blank">carte</a>.
+2. Utiliser l'outil <button>Interroger les objets</button> sur la droite pour inspecter les données existantes.
+3. Faire un clic droit sur l'emplacement et sélectionner <button>Ajouter une note ici</button>.
+4. Expliquer ce qui est incorrect ou manquant dans la note et cliquer sur <button>Ajouter une note</button> pour la soumettre.
+
+Quelqu'un de plus expérimenté avec OpenStreetMap examinera ensuite votre note et fera les changements nécessaires.
+
+<DocsNote>
+
+Plus d'informations sur comment contribuer à OpenStreetMap peuvent être trouvées <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">ici</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/files-and-stats.mdx b/website/src/lib/docs/fr/files-and-stats.mdx
new file mode 100755
index 0000000..c12fe41
--- /dev/null
+++ b/website/src/lib/docs/fr/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Fichiers et statistiques
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Liste de fichiers
+
+Une fois que vous avez des fichiers [ouverts](./menu/file), ils seront affichés sous forme d'onglets dans la liste de fichiers située au bas de la carte.
+Vous pouvez les réordonner en glissant-déposant les onglets.
+Et lorsque beaucoup de fichiers sont ouverts, vous pouvez faire défiler la liste des onglets pour naviguer entre eux.
+
+<DocsNote>
+
+Si vous utilisez une souris, vous devez maintenir <kbd>Shift</kbd> pour faire défiler la liste horizontalement.
+
+</DocsNote>
+
+### Sélection de fichiers
+
+En cliquant sur un onglet, vous pouvez basculer entre les fichiers pour inspecter leurs statistiques, et leur appliquer des [actions d'édition](./menu/edit) et des [outils](./toolbar).
+En maintenant la touche <kbd>Ctrl/Cmd</kbd>, vous pouvez ajouter ou supprimer des fichiers à la sélection, et en maintenant <kbd>Shift</kbd>, vous pouvez sélectionner une plage de fichiers.
+La plupart des [actions d'édition](./menu/edit) et des [outils](./toolbar) peuvent être appliqués à plusieurs fichiers à la fois.
+
+<DocsNote>
+
+Vous pouvez également naviguer à travers les fichiers en utilisant les flèches de votre clavier, et utiliser <kbd>Shift</kbd> pour ajouter des fichiers à la sélection.
+
+</DocsNote>
+
+### Actions d'édition
+
+En faisant un clic droit sur un onglet de fichier, vous pouvez accéder aux mêmes actions que dans le [menu d'édition](./menu/edit).
+
+### Vue verticale
+
+Comme mentionné dans la [section des options d'affichage](./menu/view), vous pouvez basculer entre une vue horizontale et verticale pour la liste de fichiers.
+La vue verticale est utile lorsque vous avez beaucoup de fichiers ouverts, ou des fichiers avec plusieurs [pistes, segments ou points d'intérêt](./gpx).
+En effet, cette vue vous permet d'inspecter le contenu des fichiers grâce à des sections pliables.
+
+Vous pouvez également appliquer les [actions d'édition](./menu/edit) et les [outils](./toolbar) aux éléments intérieurs aux fichiers.
+De plus, vous pouvez glisser-déposer les éléments intérieurs pour les réorganiser, ou les déplacer dans la hiérarchie ou même dans un autre fichier.
+
+<DocsNote>
+
+La taille de la liste de fichiers peut être ajustée en faisant glisser le séparateur entre la carte et la liste de fichiers.
+
+</DocsNote>
+
+## Profil altimétrique et statistiques
+
+En bas de l'interface, vous pouvez trouver le profil altimétrique et les statistiques de la sélection actuelle.
+
+<DocsNote>
+
+La taille du profil altimétrique peut être ajustée en faisant glisser le séparateur entre la carte et le profil altimétrique.
+
+</DocsNote>
+
+### Statistiques interactives
+
+En survolant le profil d'altitude, une infobulle affiche les statistiques à la position du curseur.
+
+Pour obtenir les statistiques d'une section donnée du profil altimétrique, vous pouvez créer un rectangle de sélection en faisant glisser votre curseur sur le profil.
+Cliquez sur le profil pour réinitialiser la sélection.
+
+Vous pouvez également utiliser la molette de la souris pour zoomer ou dézoomer sur le profil d'altitude, et bouger à gauche et à droite en faisant glisser le profil tout en maintenant la touche <kbd>Shift</kbd>.
+
+### Données supplémentaires
+
+En utilisant les boutons à droite du profil d'altitude, vous pouvez optionnellement colorier le profil d'altitude en fonction de :
+
+- des données de **pente** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> calculées à partir des données d'altitude, ou
+- des données de **revêtement** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> venant des tags de <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> d'<a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>.
+  Ceci est uniquement disponible pour les fichiers créés avec **gpx.rnmkcy.eu**.
+
+Si votre sélection possède ces données, vous pouvez également visualiser les données de : **vitesse** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **fréquence cardiaque** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **température** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> et **puissance** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> sur le profil altimétrique.
diff --git a/website/src/lib/docs/fr/getting-started.mdx b/website/src/lib/docs/fr/getting-started.mdx
new file mode 100755
index 0000000..a956255
--- /dev/null
+++ b/website/src/lib/docs/fr/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Premiers pas
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Bienvenue dans le guide officiel de **gpx.rnmkcy.eu**!
+Ce guide présente pas-à-pas tous les composants et outils de l’interface, et vous aidera à devenir un utilisateur chevronné de l’application.
+
+<DocsImage src="getting-started/interface" alt="L'interface de gpx.rnmkcy.eu." />
+
+Comme le montre la capture d'écran ci-dessus, l'interface est divisée en quatre sections principales organisées autour de la carte. 
+Avant de plonger dans les détails de chaque section, voici ci-dessous un aperçu rapide de l'interface.
+
+## Menu
+
+En haut de l'interface, vous trouverez le [menu principal](./menu).
+Vous pouvez accéder à partir de celui-ci à des actions courantes telles qu'ouvrir, fermer et exporter des fichiers, annuler et rétablir vos modifications, et ajuster les paramètres de l'application.
+
+## Fichiers et statistiques
+
+En bas de l'interface, vous trouverez la liste des fichiers actuellement ouverts dans l'application.
+Vous pouvez cliquer sur un fichier pour le sélectionner et afficher ses statistiques en dessous de la liste.
+La [section dédiée](./files-and-stats) explique comment sélectionner plusieurs fichiers et basculer vers une liste verticale pour une gestion avancée des fichiers.
+
+## Barre d'outils
+
+Sur le côté gauche de l'interface, vous trouverez la [barre d'outils](./toolbar), qui contient tous les outils que vous pouvez utiliser pour éditer vos fichiers.
+
+## Commandes de la carte
+
+Enfin, sur le côté droit de l'interface, vous trouverez les [commandes de la carte](./map-controls).
+Ces commandes vous permettent de naviguer sur la carte, de zoomer et de dézoomer et de basculer entre différents styles de carte.
diff --git a/website/src/lib/docs/fr/gpx.mdx b/website/src/lib/docs/fr/gpx.mdx
new file mode 100755
index 0000000..3368154
--- /dev/null
+++ b/website/src/lib/docs/fr/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: Format de fichier GPX
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+Le format de fichier <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX</a> est un standard ouvert pour l'échange de données GPS entre applications et appareils GPS.
+Il consiste principalement en une série de points GPS encodant une ou plusieurs traces GPS, et, éventuellement, certains points d'intérêt.
+
+Les fichiers GPX peuvent aussi contenir des métadonnées, dont les champs **nom** et **description** sont les plus utiles pour les utilisateurs.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Pistes, segments et points GPS
+
+Comme mentionné ci-dessus, un fichier GPX peut contenir plusieurs traces GPS.
+Celles-ci sont organisées en une structure hiérarchique, dont les pistes constituent le niveau supérieur.
+
+- Une **piste** est faite d'une séquence de segments déconnectés.
+  De plus, une piste peut contenir des métadonnées comme un **nom**, une **description**, et des **propriétés d'apparence**.
+- Un **segment** est une séquence de points GPS qui forment un chemin continu.
+- Un **point GPS** est une localisation avec une latitude, une longitude, et éventuellement un horodatage et une altitude.
+  Certains appareils stockent également des informations supplémentaires telles que la fréquence cardiaque, la cadence, la température et la puissance.
+
+Dans la plupart des cas, les fichiers GPX contiennent une seule piste avec un seul segment.
+Cependant, la hiérarchie décrite ci-dessus permet des cas d'utilisation plus avancés, comme la planification de voyages de plusieurs jours avec plusieurs variantes pour chaque jour.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points d'intérêt
+
+Les **points d'intérêt** (techniquement appelés _waypoints_) représentent des lieux d'intérêt à afficher sur un appareil GPS ou sur une carte numérique.
+
+En plus de ses coordonnées, un point d'intérêt peut avoir un **nom** et une **description**.
diff --git a/website/src/lib/docs/fr/home/funding.mdx b/website/src/lib/docs/fr/home/funding.mdx
new file mode 100755
index 0000000..5ae057f
--- /dev/null
+++ b/website/src/lib/docs/fr/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Aidez à garder le site gratuit (et sans pub)
+
+Chaque fois que vous ajoutez ou déplacez des points GPS, nos serveurs calculent le meilleur itinéraire sur le réseau routier.
+Nous utilisons également des services de <a href="https://mapbox.com" target="_blank">Mapbox</a> pour afficher de magnifiques cartes, récupérer des données d'altitude et vous permettre de rechercher des adresses.
+
+Malheureusement, cela est coûteux.
+Si vous aimez utiliser cet outil et le trouvez utile, veuillez envisager de faire même un petit don pour aider à garder le site gratuit et sans pub.
+
+Merci beaucoup pour votre soutien ! ❤️
diff --git a/website/src/lib/docs/fr/home/mapbox.mdx b/website/src/lib/docs/fr/home/mapbox.mdx
new file mode 100755
index 0000000..bf9c80d
--- /dev/null
+++ b/website/src/lib/docs/fr/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox est l'entreprise qui fournit certaines des magnifiques cartes du site.
+Ils développent également le <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">moteur de carte</a> sur lequel est basé **gpx.rnmkcy.eu**.
+
+Nous sommes incroyablement chanceux et reconnaissants de faire partie de leur programme <a href="https://mapbox.com/community" target="_blank">Community</a> qui soutient les organismes à but non lucratif, les établissements d'enseignement et les organisations à impact positif.
+Ce partenariat permet à **gpx.rnmkcy.eu** de bénéficier des outils Mapbox à prix réduits, contribuant grandement à la viabilité financière du projet et nous permettant d'offrir la meilleure expérience utilisateur possible.
diff --git a/website/src/lib/docs/fr/home/translation.mdx b/website/src/lib/docs/fr/home/translation.mdx
new file mode 100755
index 0000000..34b9266
--- /dev/null
+++ b/website/src/lib/docs/fr/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Traduction
+
+Le site est traduit par des bénévoles sur une plate-forme de traduction collaborative.
+Vous pouvez contribuer en ajoutant ou en améliorant des traductions sur notre projet <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin</a>.
+
+Si vous voulez commencer la traduction dans une nouvelle langue, vous pouvez nous <a href="#contact">contacter</a>.
+
+Toute aide est grandement appréciée !
diff --git a/website/src/lib/docs/fr/integration.mdx b/website/src/lib/docs/fr/integration.mdx
new file mode 100755
index 0000000..a9d79a7
--- /dev/null
+++ b/website/src/lib/docs/fr/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Intégration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+Vous pouvez utiliser **gpx.rnmkcy.eu** pour créer des cartes affichant vos fichiers GPX et les intégrer à votre site web.
+
+Tout ce dont vous avez besoin est :
+
+1. Un <a href="https://account.mapbox.com/auth/signup" target="_blank">jeton d'accès Mapbox</a> pour charger la carte, et
+2. Un ou plusieurs fichiers GPX hébergés sur votre serveur ou sur Google Drive, ou accessibles via une URL publique.
+
+Vous pouvez ensuite jouer avec le configurateur ci-dessous pour personnaliser votre carte et générer le code HTML correspondant.
+
+<DocsNote type="warning">
+
+Vous devrez configurer les headers <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> sur votre serveur de manière à autoriser <b>gpx.rnmkcy.eu</b> à charger vos fichiers GPX.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/fr/map-controls.mdx b/website/src/lib/docs/fr/map-controls.mdx
new file mode 100755
index 0000000..6f60bf3
--- /dev/null
+++ b/website/src/lib/docs/fr/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Commandes de la carte
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+Les commandes de la carte se situent sur le côté droit de l'interface.
+Ces commandes vous permettent de naviguer sur la carte, de zoomer et de dézoomer et de basculer entre différents styles de carte.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Navigation de la carte
+
+Les commandes en haut vous permettent de zoomer <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> et dézoomer <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, et de changer l'orientation et l'inclinaison de la carte <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+Pour contrôler l'orientation et l'inclinaison de la carte, vous pouvez également faire glisser la carte tout en maintenant <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Barre de recherche
+
+Vous pouvez utiliser la barre de recherche pour rechercher une adresse et naviguer vers celle-ci sur la carte.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Bouton de localisation
+
+Le bouton de localisation centre la carte sur votre localisation actuelle.
+
+<DocsNote>
+
+Cela ne fonctionne que si vous avez autorisé votre navigateur et <b>gpx.rnmkcy.eu</b> à accéder à votre localisation.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Imagerie de rue
+
+Ce bouton peut être utilisé pour activer le mode imagerie de rue sur la carte.
+Selon la source d'imagerie de rue choisie dans les [réglages](./menu/settings), les images de rue peuvent être accédées différemment.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: la couverture d'imagerie de rue sera représentée sur la carte par des lignes vertes. Lorsque le zoom est suffisant, des points verts montreront les endroits précis où des images de rue sont disponibles. En survolant un point vert, vous verrez l'image de rue correspondant à cet endroit.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: cliquez sur la carte pour ouvrir un nouvel onglet avec l’imagerie de rue correspondant à cet endroit.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Couches de la carte
+
+Le bouton des couches de la carte vous permet de basculer entre différents fonds de carte, et d'activer/désactiver les surcouches de cartes et les catégories de points d'intérêt.
+
+- Les **fonds de carte** sont des cartes apparaissant en fond et présentant les principales caractéristiques géographiques du monde.
+  Selon leur fonction, les fonds de carte ont des styles et des niveaux de détail différents.
+  Un seul fond de carte peut être affiché à la fois.
+- Les **surcouches** sont des couches supplémentaires qui peuvent être affichées par-dessus le fond de carte pour fournir des informations complémentaires.
+- Les **points d'intérêt** peuvent être ajoutés à la carte pour montrer différentes catégories d'endroits, comme les magasins, les restaurants ou les hébergements.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Survolez la carte pour afficher la surcouche <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails Randonnée</a> par-dessus le fond de carte <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
+</div>
+
+Une grande collection de fonds de carte et de surcouches mondiales et locales est disponible dans **gpx.rnmkcy.eu**, ainsi qu'une sélection de catégories de points d'intérêt.
+Ceux-ci peuvent être activés dans la [fenêtre de configuration des couches de carte](./menu/settings).
+
+Dans ces paramètres, vous pouvez également gérer l'opacité des surcouches.
+
+Pour les utilisateurs expérimentés, il est possible d'ajouter des fonds de carte et des surcouches personnalisés en fournissant des URLs <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, ou <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a>.
diff --git a/website/src/lib/docs/fr/menu.mdx b/website/src/lib/docs/fr/menu.mdx
new file mode 100755
index 0000000..62605a0
--- /dev/null
+++ b/website/src/lib/docs/fr/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Le menu principal, situé en haut de l'interface, donne accès à une série d'actions, d'options, et de réglages divisés en plusieurs catégories, expliquées séparément dans les sections suivantes.
+
+<DocsNote>
+
+La plupart des actions du menu peuvent également être effectuées en utilisant les raccourcis clavier affichés dans le menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/menu/edit.mdx b/website/src/lib/docs/fr/menu/edit.mdx
new file mode 100755
index 0000000..ac9dd74
--- /dev/null
+++ b/website/src/lib/docs/fr/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Actions d'édition
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Contrairement aux actions sur les fichiers, les actions d'édition peuvent potentiellement modifier le contenu des fichiers sélectionnés.
+De plus, lorsque la vue verticale de la liste de fichiers est activée (voir [Fichiers et statistiques](../files-and-stats)), elles peuvent également être appliquées aux [pistes, segments, et points d'intérêt](../gpx).
+Par conséquent, nous appellerons les éléments qui peuvent être modifiés par ces actions des _éléments de fichier_.
+Notez que, à part les actions annuler et rétablir, les actions d'édition sont également accessibles via le menu contextuel (clic droit) des éléments de fichier.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Annuler et rétablir
+
+En utilisant ces boutons, vous pouvez annuler ou rétablir les dernières actions que vous avez effectuées.
+Cela s'applique à toutes les actions de l'interface, mais pas aux options d'affichage, aux paramètres de l'application ou à la navigation de la carte.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Infos...
+
+Ouvrir la boîte de dialogue d'information de l'élément de fichier actuellement sélectionné, où vous pouvez voir et modifier son nom et sa description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Apparence...
+
+Ouvrir la boîte de dialogue d'apparence, où vous pouvez changer la couleur, l'opacité et l'épaisseur des éléments de fichier sélectionnés sur la carte.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Cacher/afficher
+
+Activer/désactiver la visibilité des éléments de fichier sélectionnés sur la carte.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nouvelle piste
+
+Créer une nouvelle piste dans le fichier sélectionné.
+
+<DocsNote>
+
+Cette action n'est disponible que lorsque la vue verticale de la liste de fichiers est activée.
+De plus, la sélection doit contenir un seul fichier.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nouveau segment
+
+Créer un nouveau segment dans la piste sélectionnée.
+
+<DocsNote>
+
+Cette action n'est disponible que lorsque la vue verticale de la liste de fichiers est activée.
+De plus, la sélection doit contenir une seule piste.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Sélectionner tout
+
+Ajouter tous les éléments de fichier du niveau de hiérarchie actuel à la sélection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Centrer
+
+Centrer la carte sur les éléments de fichier sélectionnés.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copier
+
+Copier les éléments de fichier sélectionnés dans le presse-papiers.
+
+<DocsNote>
+
+Cette action n'est disponible que lorsque la vue verticale de la liste de fichiers est activée.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Couper
+
+Couper les éléments de fichier sélectionnés dans le presse-papiers.
+
+<DocsNote>
+
+Cette action n'est disponible que lorsque la vue verticale de la liste de fichiers est activée.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Coller
+
+Coller les éléments de fichier du presse-papiers au niveau de hiérarchie actuel, s'ils sont compatibles avec celui-ci.
+
+<DocsNote>
+
+Cette action n'est disponible que lorsque la vue verticale de la liste de fichiers est activée.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Supprimer
+
+Supprimer les éléments de fichier sélectionnés.
diff --git a/website/src/lib/docs/fr/menu/file.mdx b/website/src/lib/docs/fr/menu/file.mdx
new file mode 100755
index 0000000..d1a36f5
--- /dev/null
+++ b/website/src/lib/docs/fr/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Actions sur les fichiers
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Le menu des actions sur les fichiers contient un ensemble d'opérations de fichiers assez explicites.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nouveau
+
+Créer un nouveau fichier vide.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Ouvrir...
+
+Ouvrir des fichiers depuis votre ordinateur. 
+
+<DocsNote>
+
+Vous pouvez également glisser-déposer des fichiers directement depuis votre système de fichiers dans la fenêtre.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Dupliquer
+
+Créer une copie des fichiers sélectionnés.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fermer
+
+Fermer les fichiers sélectionnés.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fermer tout
+
+Fermer tous les fichiers.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporter...
+
+Ouvrir le menu d'exportation pour enregistrer les fichiers sélectionnés sur votre ordinateur.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporter tout...
+
+Ouvrir le menu d'exportation pour enregistrer tous les fichiers ouverts sur votre ordinateur.
+
+<DocsNote type="warning">
+
+Si votre téléchargement ne commence pas après avoir cliqué sur le bouton de téléchargement, veuillez vérifier les paramètres de votre navigateur pour autoriser les téléchargements depuis <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/menu/settings.mdx b/website/src/lib/docs/fr/menu/settings.mdx
new file mode 100755
index 0000000..ec0c5ef
--- /dev/null
+++ b/website/src/lib/docs/fr/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Réglages
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Unités de distance
+
+Changer les unités utilisées pour afficher les distances dans l'interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Unités de vitesse
+
+Changer les unités utilisées pour afficher les vitesses dans l'interface.
+Vous pouvez choisir entre distance par heure et minutes par distance, ce qui peut être plus approprié pour les activités en course à pied.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Unités de température
+
+Changer les unités utilisées pour afficher les températures dans l'interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Langue
+
+Définir la langue de l'interface.
+
+<DocsNote>
+
+Vous pouvez contribuer en ajoutant ou en améliorant des traductions sur notre projet <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin</a>.
+Si vous voulez commencer la traduction dans une nouvelle langue, vous pouvez nous <a href="#contact">contacter</a>.
+Toute aide est grandement appréciée !
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Thème
+
+Changer le thème utilisé dans l'interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Source d'imagerie de rue
+
+Changer la source utilisée pour la [commande d'imagerie de rue](../map-controls).
+Par défaut, l'imagerie de <a href="https://www.mapillary.com" target="_blank">Mapillary</a> est utilisée, mais vous pouvez également utiliser <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Plus d'informations sur l'utilisation de la commande d'imagerie de rue dans la [section des commandes de la carte](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Couches de la carte...
+
+Ouvrir un menu où vous pouvez activer ou désactiver les couches de la carte, ajouter des couches personnalisées, modifier l'opacité des surcouches et plus encore.
+Plus d'informations sur les couches de la carte peuvent être trouvées dans la [section des commandes de la carte](../map-controls).
diff --git a/website/src/lib/docs/fr/menu/view.mdx b/website/src/lib/docs/fr/menu/view.mdx
new file mode 100755
index 0000000..cf9021d
--- /dev/null
+++ b/website/src/lib/docs/fr/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Options d'affichage
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Ce menu propose des options pour réorganiser l'interface et la vue de la carte.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Profil altimétrique
+
+Masquer le profil altimétrique pour faire de la place pour la carte, ou l'afficher pour inspecter la sélection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Liste de fichiers verticale
+
+Basculer entre la vue verticale et horizontale de la liste de fichiers.
+La [vue verticale](../files-and-stats) est utile lorsque vous avez beaucoup de fichiers ouverts, ou des fichiers avec plusieurs [pistes, segments ou points d'intérêt](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Basculer au fond de carte précédent
+
+Remplacer le fond de carte par celui précédemment sélectionné dans le [menu des couches de la carte](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Afficher/cacher les surcouches
+
+Activer/désactiver la visibilité des surcouches de carte sélectionnées à travers le [menu des couches de la carte](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Marqueurs de distance
+
+Activer/désactiver la visibilité des marqueurs de distance sur la carte.
+Ceux-ci sont affichés pour la sélection courante, comme le [profil altimétrique](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Flèches de direction
+
+Activer/désactiver la visibilité des flèches de direction sur la carte.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Activer/désactiver la 3D
+
+Entrer ou sortir de la vue 3D de la carte.
+
+<DocsNote>
+
+Pour contrôler l'orientation et l'inclinaison de la carte, vous pouvez également faire glisser la carte tout en maintenant <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/toolbar.mdx b/website/src/lib/docs/fr/toolbar.mdx
new file mode 100755
index 0000000..277c1a5
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Barre d'outils
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+La barre d'outils est située sur le côté gauche de la carte et est le cœur de l'application, puisqu'elle permet d'accéder aux fonctionnalités principales de **gpx.rnmkcy.eu**.
+Chaque outil est représenté par une icône et peut être activé en cliquant dessus.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Comme pour les [actions d'édition](./menu/edit), la plupart des outils peuvent être appliqués à plusieurs fichiers à la fois et aux [pistes et segments](./gpx).
+
+Les sections qui suivent décrivent chaque outil en détail.
diff --git a/website/src/lib/docs/fr/toolbar/clean.mdx b/website/src/lib/docs/fr/toolbar/clean.mdx
new file mode 100755
index 0000000..3646ec9
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Nettoyer
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Lorsque l'outil de nettoyage est sélectionné, glisser le curseur sur la carte crée une sélection rectangulaire.
+
+Selon les options sélectionnées dans la boîte de dialogue illustrée ci-dessous, cliquer sur le bouton de suppression supprimera les points GPS et/ou [points d'intérêt](../gpx) situés à l'intérieur ou à l'extérieur de la sélection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/fr/toolbar/elevation.mdx b/website/src/lib/docs/fr/toolbar/elevation.mdx
new file mode 100755
index 0000000..12bf015
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Altitude
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Cet outil vous permet d'ajouter des données d'altitude aux traces et aux [points d'intérêt](../gpx), ou de remplacer les données existantes.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Les données d'altitude sont fournies par <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Vous pouvez en apprendre plus sur leur origine et précision dans la <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/toolbar/extract.mdx b/website/src/lib/docs/fr/toolbar/extract.mdx
new file mode 100755
index 0000000..e547add
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extraire
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Cet outil vous permet d'extraire [des pistes (ou des segments)](../gpx) de fichiers (ou de pistes) en contenant plusieurs.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Appliquer l'outil à un fichier contenant plusieurs pistes créera un nouveau fichier pour chacune des pistes qu'il contient.
+De même, appliquer l'outil à une piste contenant plusieurs segments créera (dans le même fichier) une nouvelle piste pour chacun des segments qu'elle contient.
+
+<DocsNote>
+
+Lors de l'extraction des pistes d'un fichier contenant des <a href="../gpx">points d'intérêt</a>, l'outil assigne automatiquement chaque point d'intérêt à la piste de laquelle il est le plus proche.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/toolbar/merge.mdx b/website/src/lib/docs/fr/toolbar/merge.mdx
new file mode 100755
index 0000000..56959a1
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Fusionner
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Pour utiliser cet outil, vous devez [sélectionner](../files-and-stats) plusieurs fichiers, [pistes ou segments](../gpx).
+
+- Si votre objectif est de créer une seule trace continue à partir de votre sélection, utilisez l'option **Connecter les traces** et validez.
+- La deuxième option peut être utilisée pour créer ou gérer des fichiers avec plusieurs [pistes ou segments](../gpx).
+  Fusionner des fichiers (ou des pistes) résultera en un seul fichier (ou piste) contenant toutes les pistes (ou tous les segments) de la sélection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/fr/toolbar/minify.mdx b/website/src/lib/docs/fr/toolbar/minify.mdx
new file mode 100755
index 0000000..c66bebc
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minifier
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Cet outil peut être utilisé pour réduire le nombre de points GPS d'une trace, ce qui peut être utile pour réduire sa taille.
+
+Vous pouvez ajuster la tolérance de l'algorithme de simplification en utilisant le curseur, et observer le nombre de points qui seront conservés, ainsi qu'un aperçu de la trace simplifiée sur la carte.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+La valeur de tolérance représente la distance maximale permise entre la trace originale et la trace simplifiée.
+Vous pouvez en apprendre plus sur l'algorithme utilisé <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">ici</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/fr/toolbar/poi.mdx b/website/src/lib/docs/fr/toolbar/poi.mdx
new file mode 100755
index 0000000..c5ae5ea
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points d'intérêt
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Les [points d'intérêt](../gpx) peuvent être ajoutés aux fichiers GPX pour marquer des emplacements d'intérêt sur la carte et les afficher sur votre appareil GPS.
+
+### Créer un point d'intérêt
+
+Pour créer un point d'intérêt, remplissez le formulaire illustré ci-dessous.
+Vous pouvez choisir l'emplacement du point d'intérêt en cliquant sur la carte ou en saisissant les coordonnées manuellement.
+Validez le formulaire lorsque vous avez terminé.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Modifier un point d'intérêt
+
+Le formulaire montré ci-dessus peut également être utilisé pour modifier un point d'intérêt existant après l'avoir sélectionné sur la carte.
+Si vous avez seulement besoin de déplacer le point d'intérêt, vous pouvez le faire glisser à l'endroit souhaité.
diff --git a/website/src/lib/docs/fr/toolbar/routing.mdx b/website/src/lib/docs/fr/toolbar/routing.mdx
new file mode 100755
index 0000000..938105a
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Planification et édition d'itinéraires
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+L'outil de planification et d'édition d'itinéraires vous permet de créer et de modifier des itinéraires en plaçant ou en déplaçant des points d'ancrage sur la carte.
+
+## Réglages
+
+Comme illustré ci-dessous, la boîte de dialogue de l'outil contient quelques paramètres pour contrôler le comportement du routage.
+Vous pouvez minimiser la boîte de dialogue pour économiser de l'espace en cliquant sur <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routage
+
+Lorsque le routage est activé, les points d'ancrage placés ou déplacés sur la carte seront connectés par une route calculée sur le réseau routier <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Désactivez le routage pour connecter les points d'ancrage en ligne droite.
+Ce paramètre peut également être modifié en appuyant sur <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activité
+
+Sélectionnez le type d'activité pour lequel vous souhaitez que les itinéraires soient adaptés.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Autoriser les routes privées
+
+Lorsque cette option est activée, le moteur de routage prend en compte les routes privées lors du calcul des routes.
+
+<DocsNote type="warning">
+
+Utilisez cette option uniquement si vous connaissez bien la région et avez la permission d'utiliser les routes en question.
+
+</DocsNote>
+
+## Tracer et éditer des itinéraires
+
+Créer un itinéraire ou étendre un itinéraire existant est aussi simple que de cliquer sur la carte pour placer un nouveau point d'ancrage.
+
+Vous pouvez également faire glisser un point d'ancrage existant pour rediriger le segment qui le relie au point d'ancrage précédent et suivant.
+
+De plus, de nouveaux points d'ancrage peuvent être insérés entre les points existants en survolant le segment qui les relie et en faisant glisser le point d'ancrage qui apparaît à l'emplacement souhaité.
+Sur les appareils tactiles, vous pouvez appuyer sur le segment pour insérer un nouveau point d'ancrage.
+
+<DocsNote>
+
+Lors de l'édition de fichiers GPX importés, un ensemble de points d'ancrage initial est créé automatiquement.
+Pour faciliter le processus d'édition, plus la carte est zoomée, plus les points d'ancrage sont nombreux à être affichés.
+Cela permet d'éditer l'itinéraire à différents niveaux de détail.
+
+</DocsNote>
+
+Enfin, vous pouvez supprimer les points d'ancrage en cliquant dessus et en sélectionnant <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Supprimer</button> dans le menu contextuel.
+
+<DocsImage src="tools/routing" alt="Les points d'ancrage permettent de modifier facilement un itinéraire." />
+
+## Outils supplémentaires
+
+Les outils suivants automatisent certaines opérations communes de modification d'itinéraire.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Inverser
+
+Inverser le sens de l'itinéraire.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Retour au départ
+
+Connecter le dernier point de l'itinéraire avec le point de départ, en utilisant les paramètres de routage choisis.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Aller-retour
+
+Revenir au point de départ par le même itinéraire.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Changer le point de départ de la boucle
+
+Lorsque le point d'arrivée de l'itinéraire est suffisamment proche du départ, vous pouvez changer le départ de la boucle en cliquant sur n'importe quel point d'ancrage et en sélectionnant <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Démarrer la boucle ici</button> dans le menu contextuel.
diff --git a/website/src/lib/docs/fr/toolbar/scissors.mdx b/website/src/lib/docs/fr/toolbar/scissors.mdx
new file mode 100755
index 0000000..39f6982
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Rogner et diviser
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Rogner
+
+En utilisant le curseur, vous pouvez définir la partie de la trace sélectionnée que vous voulez garder.
+Les marqueurs de départ et d'arrivée sur la carte et les [statistiques et profil altimétrique](../files-and-stats) sont mis à jour en temps réel pour refléter la sélection.
+Vous pouvez également créer un rectangle de sélection directement sur le profil altimétrique.
+Validez la sélection lorsque vous êtes satisfait du résultat.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Diviser
+
+Pour diviser la trace sélectionnée en deux parties, cliquez sur l'un des marqueurs séparés affichés le long de la trace.
+Pour diviser à un point précis de votre choix, survolez la trace sur la carte.
+Des ciseaux apparaîtront à la position du curseur, montrant que vous pouvez diviser la trace à ce point.
+
+Vous pouvez choisir de diviser la trace en deux fichiers GPX, ou de créer une [piste ou un segment](../gpx) pour chaque partie dans le même fichier.
+
+<DocsImage src="tools/split" alt="Survoler la trace sélectionnée transforme votre curseur en ciseaux." />
diff --git a/website/src/lib/docs/fr/toolbar/time.mdx b/website/src/lib/docs/fr/toolbar/time.mdx
new file mode 100755
index 0000000..c6a68c9
--- /dev/null
+++ b/website/src/lib/docs/fr/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Temps
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Cet outil vous permet de modifier ou d'ajouter des horodatages à une trace.
+Vous devez simplement utiliser le formulaire illustré ci-dessous et le valider lorsque vous avez terminé.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Lorsque vous modifiez la vitesse, le temps de déplacement est adapté en conséquence dans le formulaire, et vice versa.
+De même, lorsque vous modifiez l'heure de départ, l'heure de fin est mise à jour pour conserver la même durée totale, et vice versa.
+
+<DocsNote>
+
+Lorsque vous utilisez cet outil avec des horodatages existants, changer le temps ou la vitesse aura pour effet de les décaler, de les étirer ou de les compresser de la manière appropriée.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/faq.mdx b/website/src/lib/docs/he/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/he/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/files-and-stats.mdx b/website/src/lib/docs/he/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/he/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/he/getting-started.mdx b/website/src/lib/docs/he/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/he/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/he/gpx.mdx b/website/src/lib/docs/he/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/he/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/he/home/funding.mdx b/website/src/lib/docs/he/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/he/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/he/home/mapbox.mdx b/website/src/lib/docs/he/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/he/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/he/home/translation.mdx b/website/src/lib/docs/he/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/he/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/he/integration.mdx b/website/src/lib/docs/he/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/he/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/he/map-controls.mdx b/website/src/lib/docs/he/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/he/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/he/menu.mdx b/website/src/lib/docs/he/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/he/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/menu/edit.mdx b/website/src/lib/docs/he/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/he/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/he/menu/file.mdx b/website/src/lib/docs/he/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/he/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/menu/settings.mdx b/website/src/lib/docs/he/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/he/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/he/menu/view.mdx b/website/src/lib/docs/he/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/he/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/toolbar.mdx b/website/src/lib/docs/he/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/he/toolbar/clean.mdx b/website/src/lib/docs/he/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/he/toolbar/elevation.mdx b/website/src/lib/docs/he/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/toolbar/extract.mdx b/website/src/lib/docs/he/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/toolbar/merge.mdx b/website/src/lib/docs/he/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/he/toolbar/minify.mdx b/website/src/lib/docs/he/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/he/toolbar/poi.mdx b/website/src/lib/docs/he/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/he/toolbar/routing.mdx b/website/src/lib/docs/he/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/he/toolbar/scissors.mdx b/website/src/lib/docs/he/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/he/toolbar/time.mdx b/website/src/lib/docs/he/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/he/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/faq.mdx b/website/src/lib/docs/hu/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/hu/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/files-and-stats.mdx b/website/src/lib/docs/hu/files-and-stats.mdx
new file mode 100755
index 0000000..7dc9922
--- /dev/null
+++ b/website/src/lib/docs/hu/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+Az egérgörgővel is méretezhetii a magassági profilt. Balra és jobbra mozoghat a profil húzásával, miközben lenyomva tartja a <kbd>Shift</kbd> billentyűt.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/hu/getting-started.mdx b/website/src/lib/docs/hu/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/hu/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/hu/gpx.mdx b/website/src/lib/docs/hu/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/hu/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/hu/home/funding.mdx b/website/src/lib/docs/hu/home/funding.mdx
new file mode 100755
index 0000000..e821c38
--- /dev/null
+++ b/website/src/lib/docs/hu/home/funding.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## Segítsen megőrizni a webhely ingyenességét (és reklám mentességét)
+
+Minden alkalommal, amikor GPS-pontokat ad hozzá vagy mozgat, szervereink kiszámítják a legjobb útvonalat az úthálózaton.<a href="https://mapbox.com" target="_blank">Mapbox</a> API-jait használjuk a gyönyörű térképek megjelenítésére, a magassági adatok lekérésére és a helyek keresésére.
+
+Sajnos ez magas költségű.
+Ha tetszik ezt az alkalmazás, kérjük, fontoljon meg egy kis adományt, hogy a webhely továbbra is ingyenes és hirdetésmentes legyen.
+
+Nagyon szépen köszönöm a támogatást! ❤️
diff --git a/website/src/lib/docs/hu/home/mapbox.mdx b/website/src/lib/docs/hu/home/mapbox.mdx
new file mode 100755
index 0000000..6ee4f62
--- /dev/null
+++ b/website/src/lib/docs/hu/home/mapbox.mdx
@@ -0,0 +1,5 @@
+A Mapbox a weboldalon található gyönyörű térképek egy részét biztosítja.
+Ők fejlesztik a **gpx.rnmkcy.eu** működésének alapját adó <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">térképmotort</a> is.
+
+Végtelenül szerencsések és hálásak vagyunk, hogy részesei lehetünk a <a href="https://mapbox.com/community" target="_blank">közösségi programjuknak</a>, amely nonprofit szervezeteket, oktatási intézményeket és pozitív hatást gyakorló szervezeteket támogat.
+A partnerségnek köszönhetően a **gpx.rnmkcy.eu** kedvezményes áron használhatja a Mapbox eszközeit, ami nagyban hozzájárul a projekt pénzügyi életképességéhez, és lehetővé teszi, hogy a lehető legjobb felhasználói élményt nyújtsuk.
diff --git a/website/src/lib/docs/hu/home/translation.mdx b/website/src/lib/docs/hu/home/translation.mdx
new file mode 100755
index 0000000..a3013e7
--- /dev/null
+++ b/website/src/lib/docs/hu/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## Fordítás
+
+A weboldalt önkéntesek fordítják egy közös fordítói platformon.
+Hozzájárulhat fordítások hozzáadásával vagy javításával <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin projektünkben</a>.
+
+Ha új nyelvre szeretne fordítani, kérjük, <a href="#contact">vegye fel velünk a kapcsolatot</a>.
+
+Minden segítségnek nagyon örülünk és nagyra értékelünk!
diff --git a/website/src/lib/docs/hu/integration.mdx b/website/src/lib/docs/hu/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/hu/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/hu/map-controls.mdx b/website/src/lib/docs/hu/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/hu/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/hu/menu.mdx b/website/src/lib/docs/hu/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/hu/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/menu/edit.mdx b/website/src/lib/docs/hu/menu/edit.mdx
new file mode 100755
index 0000000..b4ebdb0
--- /dev/null
+++ b/website/src/lib/docs/hu/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+A fájlműveletekkel ellentétben a szerkesztési műveletek potenciálisan módosíthatják az aktuálisan kiválasztott fájlok tartalmát.
+Ezen túlmenően, ha a fájllista függőleges elrendezése engedélyezve van (lásd: [Fájlok és statisztikák](../files-and-stats)), ezek a [sávokra, szegmensekre és érdekes pontokra] is alkalmazhatók (.. /gpx).
+Ezen túlmenően, ha a fájllista függőleges elrendezése engedélyezve van (lásd: [Fájlok és statisztikák](../files-and-stats)), ezek a [sávokra, szegmensekre és érdekes pontokra] is alkalmask (.. /gpx).
+Ne feledje, hogy a visszavonási és ismétlési műveletek kivételével a szerkesztési műveletek is elérhetők a fájlelemek helyi menüjéből (jobb gombbal).
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Visszavonás és újra
+
+Ezekkel a gombokkal visszavonhatja vagy megismételheti az utoljára végrehajtott műveleteket.
+Ez a kezelőfelület minden műveletére vonatkozik, de nem vonatkozik a beállításokra, az alkalmazásbeállításokra vagy a térképes navigációra.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Információ...
+
+Nyissa meg az aktuálisan kiválasztott fájlelem információs párbeszédablakát, ahol megtekintheti és szerkesztheti annak nevét és leírását.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Megjelenés...
+
+Nyissa meg a megjelenés párbeszédablakot, ahol módosíthatja a térképen kiválasztott fájlelemek színét, átlátszatlanságát és szélességét.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Elrejtés/megjelenítés
+
+Kapcsolja be a kijelölt fájlelemek láthatóságát a térképen.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+Ez a művelet csak akkor érhető el, ha a fájllista függőleges elrendezése engedélyezett.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+Ez a művelet csak akkor érhető el, ha a fájllista függőleges elrendezése engedélyezett.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Az összes kijelölése
+
+Az aktuális hierarchiaszinten lévő összes fájlelem hozzáadása a kijelöléshez.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Középre
+
+A térkép középpontjába a kiválasztott fájlelemeket.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Másolás
+
+Másolja a kiválasztott fájlelemeket a vágólapra.
+
+<DocsNote>
+
+Ez a művelet csak akkor érhető el, ha a fájllista függőleges elrendezése engedélyezett.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Kivágás
+
+Vágja ki a kiválasztott fájlelemeket a vágólapra.
+
+<DocsNote>
+
+Ez a művelet csak akkor érhető el, ha a fájllista függőleges elrendezése engedélyezett.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Beillesztés
+
+Illessze be a fájlelemeket a vágólapról az aktuális hierarchiaszintre, ha kompatibilisek vele.
+
+<DocsNote>
+
+Ez a művelet csak akkor érhető el, ha a fájllista függőleges elrendezése engedélyezett.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Törlés
+
+Törölje a kiválasztott fájlelemeket.
diff --git a/website/src/lib/docs/hu/menu/file.mdx b/website/src/lib/docs/hu/menu/file.mdx
new file mode 100755
index 0000000..d109367
--- /dev/null
+++ b/website/src/lib/docs/hu/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Fájlműveletek
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+A fájlműveletek menü egy sor meglehetősen magától értetődő fájlműveletet tartalmaz.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Új
+
+Hozzon létre egy új üres fájlt.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Megnyitás...
+
+Nyissa meg a fájlokat a számítógépéről. 
+
+<DocsNote>
+
+A fájlokat közvetlenül a fájlrendszerből is áthúzhatja az ablakba.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplikálás
+
+Készítsen másolatot az aktuálisan kiválasztott fájlokról.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Bezárás
+
+Zárja be az aktuálisan kiválasztott fájlokat.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Az összes bezárása
+
+Zárja be az összes fájlt.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportálás...
+
+Nyissa meg az exportálási párbeszédpanelt az aktuálisan kiválasztott fájlok számítógépre mentéséhez.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Az összes exportálása...
+
+Nyissa meg az exportálási párbeszédpanelt az összes fájl számítógépre mentéséhez.
+
+<DocsNote type="warning">
+
+Ha a letöltés nem indul el a letöltés gombra kattintás után, ellenőrizze a böngésző beállításait, hogy engedélyezze a letöltést a <b>gpx.rnmkcy.eu</b> webhelyről.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/menu/settings.mdx b/website/src/lib/docs/hu/menu/settings.mdx
new file mode 100755
index 0000000..88ee546
--- /dev/null
+++ b/website/src/lib/docs/hu/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Hozzájárulhat fordítások hozzáadásával vagy javításával <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin projektünkben</a>.
+Ha új nyelvre szeretne fordítani, kérjük, <a href="#contact">vegye fel velünk a kapcsolatot</a>.
+Minden segítségnek nagyon örülünk és nagyra értékelünk!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/hu/menu/view.mdx b/website/src/lib/docs/hu/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/hu/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/toolbar.mdx b/website/src/lib/docs/hu/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/hu/toolbar/clean.mdx b/website/src/lib/docs/hu/toolbar/clean.mdx
new file mode 100755
index 0000000..06aece6
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Tiszta
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Ha a tiszta eszköz van kiválasztva, a térkép húzásával téglalap alakú kijelölés jön létre.
+
+Az alábbi párbeszédpanelen kiválasztott opcióktól függően a törlés gombra kattintva eltávolítja a GPS-pontokat és/vagy [érdekes helyeket](../gpx) a kijelölésen belül vagy kívül.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/hu/toolbar/elevation.mdx b/website/src/lib/docs/hu/toolbar/elevation.mdx
new file mode 100755
index 0000000..a0e6879
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Emelkedés
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Ez az eszköz lehetővé teszi magassági adatok hozzáadását a nyomvonalakhoz és [érdekes helyekhez] (../gpx), vagy a meglévő adatok cseréjét.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+A magassági adatokat a <a href="https://mapbox.com" target="_blank">Mapbox</a> biztosítja.
+Eredetéről és pontosságáról a <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">dokumentációban</a> tudhat meg többet.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/toolbar/extract.mdx b/website/src/lib/docs/hu/toolbar/extract.mdx
new file mode 100755
index 0000000..4cc79e9
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Kiemelés
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Ezzel az eszközzel kiemelhetsz [nyomvonalakat (vagy szakaszokat)](../gpx) olyan fájlokból (vagy nyomvonalakból), amelyek több ilyet tartalmaznak.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Ha az eszközt egy több nyomvonalat (track) tartalmazó fájlra alkalmazod, akkor minden egyes nyomvonalhoz létre fog jönni egy új fájl.
+Hasonlóképpen, ha az eszközt egy több szakaszt (segment) tartalmazó nyomvonalra alkalmazod, akkor (a fájlon belül) létre fog jönni egy-egy új nyomvonal minden egyes szakaszhoz, amelyet a fájl tartalmaz.
+
+<DocsNote>
+
+Ha egy <a href="../gpx">érdekes pontokat (POI)</a> is tartalmazó fájlból emelsz ki nyomvonalat, akkor az eszköz az egyes érdekes pontokat automatikusan ahhoz a pályához rendeli hozzá, amelyikhez a legközelebb van.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/toolbar/merge.mdx b/website/src/lib/docs/hu/toolbar/merge.mdx
new file mode 100755
index 0000000..833a911
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Egyesítés
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Az eszköz használatához [ki kell választania](../files-and-stats) több fájlt, [sávot vagy szegmenst] (../gpx).
+
+- Ha az a cél, hogy egyetlen folyamatos nyomkövetést hozzon létre a kiválasztottból, használja a **A nyomkövetések összekapcsolása** opciót, és érvényesítse.
+- A második lehetőség több [sávot vagy szegmenst] tartalmazó fájlok létrehozására vagy kezelésére használható (../gpx).
+  A fájlok (vagy útvonalak) egyesítése egyetlen fájlt (vagy útvonalat) eredményez, amely tartalmazza a kijelölés összes útvonalát (vagy szegmensét).
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/hu/toolbar/minify.mdx b/website/src/lib/docs/hu/toolbar/minify.mdx
new file mode 100755
index 0000000..efc082d
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minimalizálás
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Ezzel az eszközzel csökkenthető a GPS-pontok száma a nyomkövetésben, ami hasznos lehet a méretének csökkentésében.
+
+A csúszkával beállíthatja az egyszerűsítési algoritmus tűréshatárát, és megtekintheti a megtartandó pontok számát, valamint az egyszerűsített nyomkövetést a térképen.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+A tűrésérték az eredeti és az egyszerűsített nyomvonal közötti megengedett legnagyobb távolságot jelenti.
+A használt algoritmusról <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">itt</a> olvashat bővebben.
+
+</DocsNote>
diff --git a/website/src/lib/docs/hu/toolbar/poi.mdx b/website/src/lib/docs/hu/toolbar/poi.mdx
new file mode 100755
index 0000000..385816b
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Nevezetes helyek
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+A [Points of Interest](../gpx) hozzáadható a GPX-fájlokhoz, hogy megjelölje az érdekes helyeket a térképen, és megjelenítse azokat GPS-eszközén.
+
+### Érdekes pont létrehozása
+
+Érdekes pont létrehozásához töltse ki az alábbi űrlapot.
+Kiválaszthatja az érdekes hely helyét a térképre kattintva vagy a koordináták manuális megadásával.
+Ha végzett, érvényesítse az űrlapot.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Érdekes pont szerkesztése
+
+A fenti űrlap segítségével a térképen történő kijelölést követően szerkeszthet egy meglévő érdekességet.
+Ha csak az érdekes pontot kell mozgatnia, húzhatja a kívánt helyre.
diff --git a/website/src/lib/docs/hu/toolbar/routing.mdx b/website/src/lib/docs/hu/toolbar/routing.mdx
new file mode 100755
index 0000000..ce71492
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Útvonal tervezés és szerkesztés
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Az útvonaltervező és -szerkesztő eszköz lehetővé teszi útvonalak létrehozását és szerkesztését horgonypontok elhelyezésével vagy mozgatásával a térképen.
+
+## Settings
+
+Az alábbiak szerint az eszköz párbeszédpanel néhány beállítást tartalmaz az útválasztási viselkedés szabályozásához.
+A <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button> elemre kattintva a párbeszédpanelt kicsinyítheti, hogy helyet takarítson meg.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Útválasztás
+
+Ha az útválasztás engedélyezve van, a térképen elhelyezett vagy áthelyezett horgonypontokat az <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> úthálózaton kiszámított útvonal köti össze.
+Az útválasztás letiltása a rögzítési pontok egyenes vonalakkal történő összekapcsolásához.
+Ez a beállítás az <kbd>F5</kbd> megnyomásával is váltható.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Tevékenység
+
+Válassza ki a tevékenység típusát az útvonalak személyre szabásához.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Magánutak engedélyezése
+
+Ha engedélyezve van, az útvonaltervező motor figyelembe veszi a magánutakat az útvonalak kiszámításakor.
+
+<DocsNote type="warning">
+
+Csak akkor használja ezt a lehetőséget, ha ismeri a területet, és rendelkezik engedéllyel a kérdéses utak használatára.
+
+</DocsNote>
+
+## Útvonalak tervezése és szerkesztése
+
+Útvonal létrehozása vagy egy meglévő meghosszabbítása olyan egyszerű, mint egy új horgonypont elhelyezéséhez a térképre kattintva.
+
+Meglévő rögzítési pontot húzással is átirányíthatja az előző és a következő horgonyponttal összekötő szakaszt.
+
+Továbbá új rögzítési pontokat lehet beszúrni a meglévők közé, ha az egérmutatót az őket összekötő szakasz fölé viszi, és a megjelenő rögzítési pontot a kívánt helyre húzza.
+Érintős eszközökön a szegmens megérintésével új rögzítési pontot szúrhat be.
+
+<DocsNote>
+
+Az importált GPX-fájlok szerkesztésekor a rendszer automatikusan létrehozza a kezdeti rögzítési pontokat.
+A szerkesztési folyamat megkönnyítése érdekében minél jobban kinagyítja a térképet, annál több horgonypont jelenik meg.
+Ez lehetővé teszi az útvonal különböző részletezésű szerkesztését.
+
+</DocsNote>
+
+Végül törölheti a rögzítési pontokat, ha rájuk kattint, és a helyi menü <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Törlés</button> parancsát választja.
+
+<DocsImage src="tools/routing" alt="A rögzítési pontok lehetővé teszik az útvonal egyszerű szerkesztését." />
+
+## További eszközök
+
+A következő eszközök automatizálnak néhány gyakori útvonal-módosítási műveletet.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Fordítva
+
+Fordítsa meg az útvonal irányát.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Vissza a kezdéshez
+
+Csatlakoztassa az útvonal utolsó pontját a kiindulási ponthoz a kiválasztott útvonalbeállítások segítségével.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Oda-vissza út
+
+Ugyanezen az útvonalon térjen vissza a kiindulóponthoz.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Módosítsa a hurok kezdetét
+
+Ha az útvonal végpontja elég közel van a kiinduláshoz, módosíthatja az útvonal kezdőpontját, ha bármelyik horgonypontra kattint, és a helyi menüből kiválasztja a <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Útvonal indítása itt</button> lehetőséget.
diff --git a/website/src/lib/docs/hu/toolbar/scissors.mdx b/website/src/lib/docs/hu/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/hu/toolbar/time.mdx b/website/src/lib/docs/hu/toolbar/time.mdx
new file mode 100755
index 0000000..d9a1053
--- /dev/null
+++ b/website/src/lib/docs/hu/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Idő
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/faq.mdx b/website/src/lib/docs/it/faq.mdx
new file mode 100755
index 0000000..bb73ab5
--- /dev/null
+++ b/website/src/lib/docs/it/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** utilizza i dati di <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, che è una mappa del mondo aperta e collaborativa.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+Se non hai mai contribuito a OpenStreetMap prima, ecco come puoi suggerire delle modifiche:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Qualcuno più esperto con OpenStreetMap passerà in rassegna la tua nota e apporterà le modifiche necessarie.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/files-and-stats.mdx b/website/src/lib/docs/it/files-and-stats.mdx
new file mode 100755
index 0000000..28f791d
--- /dev/null
+++ b/website/src/lib/docs/it/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### Selezione del file
+
+Facendo clic su una scheda, è possibile passare tra i file per ispezionare le loro statistiche, e applicare [modifiche](./menu/edit) e [strumenti](./toolbar) a loro.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+La maggior parte delle [azioni di modifica](./menu/edit) e [strumenti](./toolbar) possono essere applicate a più file contemporaneamente.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+.
+
+### Layout verticale
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+L'elenco di file verticali è utile quando si hanno molti file aperti, o file con più tracce, segmenti o punti di interesse (./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+Puoi anche applicare [modifiche](./menu/edit) e [strumenti](./toolbar) agli elementi interni del file.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Profilo di elevazione e statistiche
+
+Nella parte inferiore dell'interfaccia è possibile trovare il profilo di elevazione e le statistiche per la selezione corrente.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Statistiche interattive
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+Per ottenere le statistiche per una sezione specifica del profilo di elevazione, è possibile trascinare un rettangolo di selezione sul profilo.
+Fare clic sul profilo per resettare la selezione.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Dati aggiuntivi
+
+Utilizzando i pulsanti a destra del profilo di elevazione, è possibile colorare opzionalmente il profilo di elevazione mediante:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> informazioni calcolate dai dati di elevazione, o
+- .
+  È disponibile solo per i file creati con **gpx.rnmkcy.eu**.
+
+Se la tua selezione lo prevede puoi visualizzare anche i dati di: **velocità** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **frequenza cardiaca** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadenza** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperatura** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, e **potenza** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> sul profilo altimetrico.
diff --git a/website/src/lib/docs/it/getting-started.mdx b/website/src/lib/docs/it/getting-started.mdx
new file mode 100755
index 0000000..361f651
--- /dev/null
+++ b/website/src/lib/docs/it/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Come iniziare
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Benvenuto nella guida ufficiale per **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+È possibile fare clic su un file per selezionarlo e visualizzare le sue statistiche sotto l'elenco.
+Nella [sezione dedicata](./files-and-stats), spiegheremo come selezionare più file e passare a un layout verticale per la gestione avanzata dei file.
+
+## Barra degli strumenti
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Controlli Mappa
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+Questi controlli ti consentono di navigare sulla mappa, ingrandire e rimpicciolire e passare da uno stile di mappa all'altro.
diff --git a/website/src/lib/docs/it/gpx.mdx b/website/src/lib/docs/it/gpx.mdx
new file mode 100755
index 0000000..9cbf48c
--- /dev/null
+++ b/website/src/lib/docs/it/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: Formato file GPX
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+Il formato <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX</a> è uno standard aperto per lo scambio di dati GPS tra applicazioni e dispositivi GPS.
+Esso consiste essenzialmente di una serie di punti GPS che codificano una o più tracce GPS, e, facoltativamente, alcuni punti d'interesse.
+
+I file GPX possono anche contenere metadati, di cui i campi **nome** e **descrizione** sono i più utili per gli utenti.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracce, segmenti e punti GPS
+
+Come accennato sopra, un file GPX può contenere più tracce GPS.
+Queste sono organizzate in una struttura gerarchica, con le tracce stesse al livello superiore.
+
+- Una **traccia** è composta da una sequenza di segmenti scollegati.
+  Inoltre, può contenere metadati come un **nome**, una **descrizione**, e **proprietà di visualizzazione**.
+- Un **segmento** è una sequenza di punti GPS che formano un percorso continuo.
+- Un **punto GPS** è una posizione con una latitudine, una longitudine, ed eventualmente un timestamp e un'altitudine.
+  Alcuni dispositivi memorizzano anche informazioni aggiuntive come frequenza cardiaca, cadenza, temperatura e potenza.
+
+Nella maggior parte dei casi, i file GPX contengono una singola traccia con un singolo segmento.
+Tuttavia, la gerarchia sopra descritta consente applicazioni più avanzate, come la pianificazione di viaggi di più giorni con diverse varianti per ogni giorno.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Punti d'interesse
+
+I punti d'interesse (tecnicamente chiamati _waypoint_) rappresentano luoghi d'interesse da mostrare su un dispositivo GPS o su una mappa digitale.
+
+Oltre alle sue coordinate, un punto d'interesse può avere un **nome** e una **descrizione**.
diff --git a/website/src/lib/docs/it/home/funding.mdx b/website/src/lib/docs/it/home/funding.mdx
new file mode 100755
index 0000000..ba5ceca
--- /dev/null
+++ b/website/src/lib/docs/it/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Aiuta a mantenere il sito gratis (e senza pubblicità)
+
+Ogni volta che aggiungi o sposti i punti GPS, i nostri server calcolano il percorso migliore sulla rete stradale.
+Utilizziamo anche le API di <a href="https://mapbox.com" target="_blank">Mapbox</a> per visualizzare mappe dettagliate, recuperare i dati di elevazione e consentire la ricerca di luoghi.
+
+Sfortunatamente, questo è costoso.
+Se ti piace utilizzare questo strumento e lo trovi utile, per favore considera di fare una piccola donazione per aiutare a mantenere il sito web gratuito e senza pubblicità.
+
+Grazie mille per il tuo supporto! ❤️
diff --git a/website/src/lib/docs/it/home/mapbox.mdx b/website/src/lib/docs/it/home/mapbox.mdx
new file mode 100755
index 0000000..391f35f
--- /dev/null
+++ b/website/src/lib/docs/it/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox è l'azienda che fornisce alcune delle bellissime mappe su questo sito.
+Sviluppano anche il <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a>che alimenta **gpx.rnmkcy.eu**.
+
+Siamo incredibilmente fortunati e grati di far parte del loro programma <a href="https://mapbox.com/community" target="_blank">Community</a>, che supporta organizzazioni senza fini di lucro, educative e di impatto positivo.
+Questa partnership consente a **gpx. tudio** di usufruire degli strumenti Mapbox a prezzi scontati, contribuendo notevolmente alla sostenibilità finanziaria del progetto e consentendoci di offrire la migliore esperienza possibile per gli utenti.
diff --git a/website/src/lib/docs/it/home/translation.mdx b/website/src/lib/docs/it/home/translation.mdx
new file mode 100755
index 0000000..204f92c
--- /dev/null
+++ b/website/src/lib/docs/it/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Traduzione
+
+Il sito web è tradotto da volontari utilizzando una piattaforma di traduzione collaborativa.
+Tu puoi contribuire aggiungendo o migliorando le traduzioni sul nostro <a href="https://crowdin.com/project/gpxstudio" target="_blank">progetto Crowdin</a>.
+
+Se desideri iniziare a tradurre in una nuova lingua, <a href="#contact">contattaci</a>.
+
+Qualsiasi aiuto è molto apprezzato!
diff --git a/website/src/lib/docs/it/integration.mdx b/website/src/lib/docs/it/integration.mdx
new file mode 100755
index 0000000..2071e53
--- /dev/null
+++ b/website/src/lib/docs/it/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integrazione
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+Tutto ciò di cui hai bisogno è:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. File GPX ospitati sul tuo server o su Google Drive, o accessibili tramite un URL pubblico.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+Dovrai configurare la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Condivisione di risorse multiorigine (CORS)</a> sul tuo server per consentire a <b>gpx.rnmkcy.eu</b> di caricare i tuoi file GPX.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/it/map-controls.mdx b/website/src/lib/docs/it/map-controls.mdx
new file mode 100755
index 0000000..7fed8cb
--- /dev/null
+++ b/website/src/lib/docs/it/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Controlli Mappa
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+Questi controlli ti consentono di navigare sulla mappa, ingrandire e rimpicciolire e passare da uno stile di mappa all'altro.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+Per controllare l'orientamento e l'inclinazione della mappa, puoi anche trascinare la mappa tenendo premuto <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+Il pulsante di localizzazione centra la mappa sulla posizione corrente.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Il passaggio su un punto verde mostrerà l'immagine di street view in quella posizione.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Livelli mappa
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/it/menu.mdx b/website/src/lib/docs/it/menu.mdx
new file mode 100755
index 0000000..696c725
--- /dev/null
+++ b/website/src/lib/docs/it/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Il menu principale, situato nella parte superiore dell'interfaccia, fornisce l'accesso alle azioni, opzioni, e le impostazioni suddivise in più categorie, spiegate separatamente nelle sezioni seguenti.
+
+<DocsNote>
+
+La maggior parte delle azioni del menu può anche essere eseguita utilizzando le scorciatoie da tastiera visualizzate nel menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/menu/edit.mdx b/website/src/lib/docs/it/menu/edit.mdx
new file mode 100755
index 0000000..8b4190b
--- /dev/null
+++ b/website/src/lib/docs/it/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Inoltre, quando il layout verticale dell'elenco dei file è abilitato (vedi [File e statistiche](.. files-and-stats)), possono anche essere applicati a [tracce, segmenti e punti di interesse](../gpx).
+Pertanto, ci riferiremo agli elementi che possono essere modificati da queste azioni come _elementi_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Usando questi pulsanti, puoi annullare o ripetere le ultime azioni eseguite.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nuova traccia
+
+Crea una nuova traccia nel file selezionato.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Inoltre, la selezione deve essere un singolo file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nuovo segmento
+
+Crea un nuovo segmento nella traccia selezionata.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Inoltre, la selezione deve essere una singola traccia.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Centra la mappa sugli elementi di file selezionati.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Incolla gli elementi del file dagli appunti al livello di gerarchia corrente se sono compatibili con esso.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/it/menu/file.mdx b/website/src/lib/docs/it/menu/file.mdx
new file mode 100755
index 0000000..4c8b815
--- /dev/null
+++ b/website/src/lib/docs/it/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Azione sui File
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Il menu delle azioni sui file contiene una serie di operazioni piuttosto autoesplicative.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Crea un nuovo file vuoto.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Apri...
+
+Open files from your computer. 
+
+<DocsNote>
+
+È inoltre possibile trascinare i file direttamente dal file system nella finestra.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Crea una copia dei file attualmente selezionati.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Chiudi tutti i file.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Apre la finestra di esportazione per salvare i file attualmente selezionati sul tuo computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+Se il download non inizia dopo aver fatto clic sul pulsante di download, controlla le impostazioni del tuo browser per consentire i download da <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/menu/settings.mdx b/website/src/lib/docs/it/menu/settings.mdx
new file mode 100755
index 0000000..847274e
--- /dev/null
+++ b/website/src/lib/docs/it/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Impostazioni
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Unità distanza
+
+Cambia le unità utilizzate per visualizzare le distanze nell'interfaccia.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Cambia le unità utilizzate per visualizzare le velocità nell'interfaccia.
+Puoi scegliere tra distanza oraria o minuti per distanza, che può essere più adatta per le attività di corsa.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Cambia le unità utilizzate per visualizzare le temperature nell'interfaccia.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Cambia la lingua utilizzata nell'interfaccia.
+
+<DocsNote>
+
+Tu puoi contribuire aggiungendo o migliorando le traduzioni sul nostro <a href="https://crowdin.com/project/gpxstudio" target="_blank">progetto Crowdin</a>.
+Se desideri iniziare a tradurre in una nuova lingua, <a href="#contact">contattaci</a>.
+Qualsiasi aiuto è molto apprezzato!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Cambia il tema usato nell'interfaccia.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Livelli mappa...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/it/menu/view.mdx b/website/src/lib/docs/it/menu/view.mdx
new file mode 100755
index 0000000..b9bbca2
--- /dev/null
+++ b/website/src/lib/docs/it/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Opzioni di visualizzazione
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Nascondi il profilo di elevazione per fare spazio alla mappa, o mostralo per ispezionare la selezione corrente.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Elenco file verticali
+
+Passa tra una disposizione verticale e una orizzontale per l'elenco dei file.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Attiva/disattiva sovrapposizioni
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Attiva/disattiva la visibilità degli indicatori di distanza sulla mappa.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Frecce di direzione
+
+Attiva/disattiva la visibilità delle frecce di direzione sulla mappa.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Attiva/Disattiva 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+Per controllare l'orientamento e l'inclinazione della mappa, puoi anche trascinare la mappa tenendo premuto <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/toolbar.mdx b/website/src/lib/docs/it/toolbar.mdx
new file mode 100755
index 0000000..bb7dc77
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Barra degli strumenti
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Ogni strumento è rappresentato da un'icona e può essere attivato facendo clic su di esso.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Come per le [azioni di modifica](./menu/edit), la maggior parte degli strumenti può essere applicata a più file contemporaneamente e a [tracce e segmenti interni](./gpx).
+
+Le sezioni successive descrivono ogni strumento in dettaglio.
diff --git a/website/src/lib/docs/it/toolbar/clean.mdx b/website/src/lib/docs/it/toolbar/clean.mdx
new file mode 100755
index 0000000..c251ec3
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Cancella
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Quando lo strumento "Cancella" è selezionato, trascinando la mappa si creerà una selezione rettangolare.
+
+A seconda delle opzioni selezionate nella finestra mostrata sotto, fare clic sul pulsante Elimina rimuoverà i punti GPS e/o [punti d'interesse](../gpx) situati dentro o fuori la selezione.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/it/toolbar/elevation.mdx b/website/src/lib/docs/it/toolbar/elevation.mdx
new file mode 100755
index 0000000..d699edb
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Dislivello
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Puoi saperne di più sulla sua origine e accuratezza nella <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentazione</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/toolbar/extract.mdx b/website/src/lib/docs/it/toolbar/extract.mdx
new file mode 100755
index 0000000..f68f603
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Estrai
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Questo strumento consente di estrarre [tracce (o segmenti)](../gpx) da file (o tracce) contenenti più di essi.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applicando lo strumento a un file contenente più tracce si creerà un nuovo file per ciascuna delle tracce che contiene.
+Allo stesso modo, applicare lo strumento a una traccia contenente più segmenti creerà (nello stesso file) una nuova traccia per ciascuno dei segmenti che contiene.
+
+<DocsNote>
+
+Quando si estraggono le tracce da un file contenente <a href="../gpx">punti d'interesse</a>, lo strumento assegnerà automaticamente ogni punto d'interesse alla traccia a cui è più vicino.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/toolbar/merge.mdx b/website/src/lib/docs/it/toolbar/merge.mdx
new file mode 100755
index 0000000..1ea3ead
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Unisci
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Per utilizzare questo strumento, è necessario [selezionare](../files-and-stats) file multipli, [tracce, o segmenti](../gpx).
+
+- Se il tuo obiettivo è quello di creare una singola traccia continua dalla tua selezione, usa l'opzione **Collega le tracce** e convalida.
+- La seconda opzione può essere utilizzata per creare o gestire file con più [tracce o segmenti](../gpx).
+  L'unione di file (o tracce) comporterà un singolo file (o traccia) contenente tutte le tracce (o segmenti) dalla selezione.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/it/toolbar/minify.mdx b/website/src/lib/docs/it/toolbar/minify.mdx
new file mode 100755
index 0000000..4407736
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minimizza
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Questo strumento può essere utilizzato per ridurre il numero di punti GPS in una traccia, che può essere utile per diminuire le sue dimensioni.
+
+È possibile regolare la tolleranza dell'algoritmo di semplificazione utilizzando il cursore, e vedere il numero di punti che saranno mantenuti, così come la traccia semplificata sulla mappa.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Il valore di tolleranza rappresenta la distanza massima consentita tra la traccia originale e la traccia semplificata.
+Puoi leggere di più sull'algoritmo utilizzato <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">qui</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/it/toolbar/poi.mdx b/website/src/lib/docs/it/toolbar/poi.mdx
new file mode 100755
index 0000000..760bf76
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Punti di interesse
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Punti d'interesse](../gpx) possono essere aggiunti ai file GPX per contrassegnare le posizioni d'interesse sulla mappa e visualizzarli sul tuo dispositivo GPS.
+
+### Creare un punto d'interesse
+
+Per creare un punto di interesse, compila il modulo qui sotto.
+È possibile scegliere la posizione del punto di interesse facendo clic sulla mappa o inserendo le coordinate manualmente.
+Convalida il modulo quando hai finito.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Modificare un punto di interesse
+
+Il modulo sopra può anche essere utilizzato per modificare un punto di interesse esistente dopo averlo selezionato sulla mappa.
+Se hai solo bisogno di spostare il punto di interesse, puoi trascinarlo nella posizione desiderata.
diff --git a/website/src/lib/docs/it/toolbar/routing.mdx b/website/src/lib/docs/it/toolbar/routing.mdx
new file mode 100755
index 0000000..8c2bf34
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Pianificazione e modifica del percorso
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Lo strumento di pianificazione e modifica del percorso consente di creare e modificare percorsi posizionando o spostando punti di ancoraggio sulla mappa.
+
+## Impostazioni
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creare un percorso o estendere un percorso esistente è semplice come fare clic sulla mappa per posizionare un nuovo punto di ancoraggio.
+
+È inoltre possibile trascinare un punto di ancoraggio esistente per reindirizzare il segmento collegandolo con il punto di ancoraggio precedente e successivo.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+Sui dispositivi touch, è possibile toccare il segmento per inserire un nuovo punto di ancoraggio.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+I seguenti strumenti automatizzano alcune operazioni comuni di modifica del percorso.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+Quando il punto finale del percorso è abbastanza vicino all'inizio, è possibile modificare l'inizio del ciclo facendo clic su qualsiasi punto di ancoraggio e selezionando <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Parti da qui con il loop</button> dal menu contestuale.
diff --git a/website/src/lib/docs/it/toolbar/scissors.mdx b/website/src/lib/docs/it/toolbar/scissors.mdx
new file mode 100755
index 0000000..f5f9c57
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Ritaglia e dividi
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Ritaglia
+
+Utilizzando il dispositivo di scorrimento è possibile definire la parte della traccia selezionata che si desidera conservare.
+I marcatori di inizio e fine sulla mappa e il [profilo di elevazione](../files-and-stats) vengono aggiornati in tempo reale per riflettere la selezione.
+In alternativa, puoi trascinare un rettangolo di selezione direttamente sul profilo di elevazione.
+Convalida la selezione quando sei soddisfatto del risultato.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Dividi
+
+Per dividere la traccia selezionata in due parti, fare clic su uno degli indicatori di divisione visualizzati lungo la traccia.
+Per dividere in un punto specifico a tua scelta, passa sopra la traccia sulla mappa.
+Le forbici appariranno nella posizione del cursore, mostrando che è possibile dividere la traccia in quel punto.
+
+Puoi scegliere di dividere la traccia in due file GPX, o di mantenere le parti divise nello stesso file di [tracce o segmenti](../gpx).
+
+<DocsImage src="tools/split" alt="Passare sopra la traccia selezionata trasforma il cursore in forbici." />
diff --git a/website/src/lib/docs/it/toolbar/time.mdx b/website/src/lib/docs/it/toolbar/time.mdx
new file mode 100755
index 0000000..2dd5741
--- /dev/null
+++ b/website/src/lib/docs/it/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Dati temporali
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Questo strumento consente di modificare o aggiungere timestamp a una traccia.
+Devi semplicemente usare il modulo mostrato qui sotto e convalidarlo quando hai finito.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Quando si modifica la velocità, il tempo di spostamento viene adattato di conseguenza nel modulo e viceversa.
+Allo stesso modo, quando si modifica l'ora di inizio, l'ora di fine viene aggiornata per mantenere la stessa durata totale, e viceversa.
+
+<DocsNote>
+
+Quando si utilizza questo strumento con timestamp esistenti, cambiare il tempo o la velocità semplicemente spostando, allungando o comprimendo di conseguenza.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/faq.mdx b/website/src/lib/docs/ko/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/ko/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/files-and-stats.mdx b/website/src/lib/docs/ko/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/ko/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/ko/getting-started.mdx b/website/src/lib/docs/ko/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/ko/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/ko/gpx.mdx b/website/src/lib/docs/ko/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/ko/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/ko/home/funding.mdx b/website/src/lib/docs/ko/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/ko/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/ko/home/mapbox.mdx b/website/src/lib/docs/ko/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/ko/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/ko/home/translation.mdx b/website/src/lib/docs/ko/home/translation.mdx
new file mode 100755
index 0000000..038e2e3
--- /dev/null
+++ b/website/src/lib/docs/ko/home/translation.mdx
@@ -0,0 +1,11 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> 번역
+
+이 웹사이트는 협업 번역 플랫폼을 통해 자원봉사자들이 번역하고 있습니다.<a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin 프로젝트</a>에서 번역을 추가하거나 개선하여 기여할 수 있습니다.
+
+새로운 언어로 번역을 시작하고 싶다면, <a href="#contact">연락</a>해 주세요.
+
+여러분의 도움이 큰 힘이 됩니다!
diff --git a/website/src/lib/docs/ko/integration.mdx b/website/src/lib/docs/ko/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/ko/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/ko/map-controls.mdx b/website/src/lib/docs/ko/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/ko/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/ko/menu.mdx b/website/src/lib/docs/ko/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/ko/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/menu/edit.mdx b/website/src/lib/docs/ko/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/ko/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/ko/menu/file.mdx b/website/src/lib/docs/ko/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/ko/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/menu/settings.mdx b/website/src/lib/docs/ko/menu/settings.mdx
new file mode 100755
index 0000000..d4e9eab
--- /dev/null
+++ b/website/src/lib/docs/ko/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+<a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin 프로젝트</a>에서 번역을 추가하거나 개선하여 기여할 수 있습니다.
+새로운 언어로 번역을 시작하고 싶다면, <a href="#contact">연락</a>해 주세요.
+여러분의 도움이 큰 힘이 됩니다!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/ko/menu/view.mdx b/website/src/lib/docs/ko/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/ko/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/toolbar.mdx b/website/src/lib/docs/ko/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/ko/toolbar/clean.mdx b/website/src/lib/docs/ko/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ko/toolbar/elevation.mdx b/website/src/lib/docs/ko/toolbar/elevation.mdx
new file mode 100755
index 0000000..79b38d3
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: 고도
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/toolbar/extract.mdx b/website/src/lib/docs/ko/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/toolbar/merge.mdx b/website/src/lib/docs/ko/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ko/toolbar/minify.mdx b/website/src/lib/docs/ko/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ko/toolbar/poi.mdx b/website/src/lib/docs/ko/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/ko/toolbar/routing.mdx b/website/src/lib/docs/ko/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/ko/toolbar/scissors.mdx b/website/src/lib/docs/ko/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/ko/toolbar/time.mdx b/website/src/lib/docs/ko/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/ko/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/faq.mdx b/website/src/lib/docs/lt/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/lt/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/files-and-stats.mdx b/website/src/lib/docs/lt/files-and-stats.mdx
new file mode 100755
index 0000000..5b1b1be
--- /dev/null
+++ b/website/src/lib/docs/lt/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Puslapis nerastas
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Bylų sąrašas
+
+Kai [atidarysite](./meniu/file) bylas, jie bus rodomi kaip skirtukai bylų sąraše, esančiame žemėlapio apačioje.
+Jūs galite juos pertvarkyti tempiant ir paleidžiant skirtukus.
+Ir kai yra atidaryta daug bylų, jūs galite slinkti pro skirtukų sąrašą, kad naviguotumėte tarp jų.
+
+<DocsNote>
+
+Naudojant pelę, jūs turite laikyti <kbd>Shift<kbd>, kad slinktumėte horizontaliai.
+
+</DocsNote>
+
+### Bylos pasirinkimas
+
+Paspausdami ant skirtuko, jūs galite perjungti bylas, kad peržiūrėtumėte jų statistikas ir jiems pritaikytumėte [redaguoti veiksmus](./menu/edit) ir [įrankiai](./toolbar).
+Laikydami <kbd>Ctrl/Cmd</kbd> mygtuką, jūs galite pridėti bylas prie pasirinkimo ar jas panakinti, ir laikydami <kbd>Shift</kbd>, jūs galite pasirinkti kelias bylas.
+Dauguma [redaguoti veiksmus](./menu/edit) ir [įrankiai](./toolbar) gali būti pritaikyti kelioms byloms vienu metu.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/lt/getting-started.mdx b/website/src/lib/docs/lt/getting-started.mdx
new file mode 100755
index 0000000..4eb1c48
--- /dev/null
+++ b/website/src/lib/docs/lt/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Puslapis nerastas
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/lt/gpx.mdx b/website/src/lib/docs/lt/gpx.mdx
new file mode 100755
index 0000000..7d8ec56
--- /dev/null
+++ b/website/src/lib/docs/lt/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Svarbios vietos** (techniškai vadinamos _waypoints_) atvaizduoja svarbią vietą, kad būtų galima atvaizduoti GPS įrenginyje arba skaitmeniniame žemėlapyje.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/lt/home/funding.mdx b/website/src/lib/docs/lt/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/lt/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/lt/home/mapbox.mdx b/website/src/lib/docs/lt/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/lt/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/lt/home/translation.mdx b/website/src/lib/docs/lt/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/lt/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/lt/integration.mdx b/website/src/lib/docs/lt/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/lt/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/lt/map-controls.mdx b/website/src/lib/docs/lt/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/lt/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/lt/menu.mdx b/website/src/lib/docs/lt/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/lt/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/menu/edit.mdx b/website/src/lib/docs/lt/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/lt/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/lt/menu/file.mdx b/website/src/lib/docs/lt/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/lt/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/menu/settings.mdx b/website/src/lib/docs/lt/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/lt/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/lt/menu/view.mdx b/website/src/lib/docs/lt/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/lt/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/toolbar.mdx b/website/src/lib/docs/lt/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/lt/toolbar/clean.mdx b/website/src/lib/docs/lt/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/lt/toolbar/elevation.mdx b/website/src/lib/docs/lt/toolbar/elevation.mdx
new file mode 100755
index 0000000..79e9604
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Aukštis
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/toolbar/extract.mdx b/website/src/lib/docs/lt/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/toolbar/merge.mdx b/website/src/lib/docs/lt/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/lt/toolbar/minify.mdx b/website/src/lib/docs/lt/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lt/toolbar/poi.mdx b/website/src/lib/docs/lt/toolbar/poi.mdx
new file mode 100755
index 0000000..d92f1d9
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Svarbios vietos
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/lt/toolbar/routing.mdx b/website/src/lib/docs/lt/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/lt/toolbar/scissors.mdx b/website/src/lib/docs/lt/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/lt/toolbar/time.mdx b/website/src/lib/docs/lt/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/lt/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/faq.mdx b/website/src/lib/docs/lv/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/lv/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/files-and-stats.mdx b/website/src/lib/docs/lv/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/lv/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/lv/getting-started.mdx b/website/src/lib/docs/lv/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/lv/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/lv/gpx.mdx b/website/src/lib/docs/lv/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/lv/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/lv/home/funding.mdx b/website/src/lib/docs/lv/home/funding.mdx
new file mode 100755
index 0000000..7d0a003
--- /dev/null
+++ b/website/src/lib/docs/lv/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Liels paldies par tavu atbalstu! ❤️
diff --git a/website/src/lib/docs/lv/home/mapbox.mdx b/website/src/lib/docs/lv/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/lv/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/lv/home/translation.mdx b/website/src/lib/docs/lv/home/translation.mdx
new file mode 100755
index 0000000..06248df
--- /dev/null
+++ b/website/src/lib/docs/lv/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Tulkojums
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/lv/integration.mdx b/website/src/lib/docs/lv/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/lv/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/lv/map-controls.mdx b/website/src/lib/docs/lv/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/lv/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/lv/menu.mdx b/website/src/lib/docs/lv/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/lv/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/menu/edit.mdx b/website/src/lib/docs/lv/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/lv/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/lv/menu/file.mdx b/website/src/lib/docs/lv/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/lv/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/menu/settings.mdx b/website/src/lib/docs/lv/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/lv/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/lv/menu/view.mdx b/website/src/lib/docs/lv/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/lv/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/toolbar.mdx b/website/src/lib/docs/lv/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/lv/toolbar/clean.mdx b/website/src/lib/docs/lv/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/lv/toolbar/elevation.mdx b/website/src/lib/docs/lv/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/toolbar/extract.mdx b/website/src/lib/docs/lv/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/toolbar/merge.mdx b/website/src/lib/docs/lv/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/lv/toolbar/minify.mdx b/website/src/lib/docs/lv/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/lv/toolbar/poi.mdx b/website/src/lib/docs/lv/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/lv/toolbar/routing.mdx b/website/src/lib/docs/lv/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/lv/toolbar/scissors.mdx b/website/src/lib/docs/lv/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/lv/toolbar/time.mdx b/website/src/lib/docs/lv/toolbar/time.mdx
new file mode 100755
index 0000000..84aa1b3
--- /dev/null
+++ b/website/src/lib/docs/lv/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Laiks
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Šis rīks ļauj mainīt vai pievienot laika zīmes takai.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/faq.mdx b/website/src/lib/docs/nl/faq.mdx
new file mode 100755
index 0000000..ceef1ca
--- /dev/null
+++ b/website/src/lib/docs/nl/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Moet ik doneren om de website te gebruiken?
+
+Nee.
+De website is gratis te gebruiken en zal dat altijd blijven (zolang het financieel haalbaar is).
+Donaties worden echter gewaardeerd en helpen om de website draaiende te houden.
+
+### Waarom wordt voor deze weg gekozen? Hoe kan ik iets toevoegen aan de kaart?
+
+**gpx.rnmkcy.eu** gebruikt gegevens van <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, een open wereldkaart op basis van samenwerking.
+Dit betekent dat je kunt bijdragen aan de kaart door data op OpenStreetMap toe te voegen of te bewerken.
+
+Als je nog nooit hebt bijgedragen aan OpenStreetMap is dit hoe je wijzigingen kunt voorstellen:
+
+1. Ga naar de locatie waar je gegevens wilt toevoegen of bewerken van de <a href="https://www.openstreetmap.org/" target="_blank">kaart</a>.
+2. Gebruik het gereedschap <button>Query</button> aan de rechterkant om de bestaande gegevens te inspecteren.
+3. Rechtsklik op de locatie en selecteer <button>Voeg hier een notitie toe</button>.
+4. Leg uit wat er niet klopt of ontbreekt in de notitie en klik <button>Add note</button> om het in de dienen.
+
+Iemand die meer ervaring met OpenStreetMap heeft zal vervolgens uw opmerking bekijken en de nodige wijzigingen aanbrengen.
+
+<DocsNote>
+
+Meer informatie over hoe bij te dragen aan OpenStreetMap kan gevonden worden <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">hier</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/files-and-stats.mdx b/website/src/lib/docs/nl/files-and-stats.mdx
new file mode 100755
index 0000000..079bd9f
--- /dev/null
+++ b/website/src/lib/docs/nl/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Bestanden en statistieken
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Bestandenlijst
+
+Zodra je [opened](./menu/file) bestanden hebt, worden ze weergegeven als tabbladen in de lijst met bestanden die zich onderaan de kaart bevinden.
+U kunt ze rangschikken door de tabbladen te slepen en te laten vallen.
+En wanneer veel bestanden open zijn, kun je door de lijst met tabbladen bladeren.
+
+<DocsNote>
+
+Wanneer je een muis gebruikt, moet je <kbd>Shift</kbd> ingedrukt houden om horizontaal te scrollen.
+
+</DocsNote>
+
+### Bestand selecteren
+
+Door op een tabblad te klikken, kun je schakelen tussen de bestanden om de statistieken daarvan te controleren, en [bewerk acties](./menu/edit) en [tools](./toolbar) er op toe te passen.
+Door de <kbd>Ctrl/Cmd</kbd> toets ingedrukt te houden, kunt u bestanden aan de selectie toevoegen of verwijderen en door <kbd>Shift</kbd>ingedrukt te houden, kunt u een serie bestanden selecteren.
+De meeste van de [bewerk acties](./menu/edit) en [tools](./toolbar) kunnen op meerdere bestanden tegelijk worden toegepast.
+
+<DocsNote>
+
+Je kunt ook navigeren door de bestanden met behulp van de pijltoetsen op je toetsenbord, en <kbd>Shift</kbd> gebruiken om bestanden toe te voegen aan de selectie.
+
+</DocsNote>
+
+### Bewerkingen
+
+Door met de rechtermuisknop te klikken op een tabblad bestanden, kun je dezelfde acties gebruiken als in het [edit menu](./menu/edit).
+
+### Verticale lay-out
+
+Zoals vermeld in de [opties bekijken](./menu/view), kan je schakelen tussen een horizontale en een verticale lay-out voor de bestandslijst.
+De verticale bestandslijst is handig wanneer je veel bestanden hebt geopend, of bestanden met meerdere [tracks, segmenten of POI's](./gpx).
+Deze lay-out stelt je in staat om de inhoud van de bestanden te bekijken via inklapbare onderdelen.
+
+Je kunt ook [bewerk acties](./menu/edit) en [tools](./toolbar) toepassen op interne bestands items.
+Bovendien kun je de interne onderdelen slepen en neerzetten om ze te rangschikken, of ze in de hiërarchie of zelfs naar een ander bestand verplaatsen.
+
+<DocsNote>
+
+De grootte van de bestandslijst kan worden aangepast door het scheidingsteken tussen de kaart en de bestandslijst te slepen.
+
+</DocsNote>
+
+## Hoogteprofiel en statistieken
+
+Aan de onderkant van de interface kunt u het hoogteprofiel en de statistieken voor de huidige selectie vinden.
+
+<DocsNote>
+
+De grootte van het hoogteprofiel kan worden aangepast door het scheidingsteken tussen de kaart en het hoogteprofiel te slepen.
+
+</DocsNote>
+
+### Interactieve statistieken
+
+Bij het zweven over het hoogteprofiel, toont een hint de statistieken op de positie van de cursor.
+
+Om de statistieken van een specifiek gedeelte van het hoogteprofiel te zien, kunt u een selectierechthoek over het profiel slepen.
+Klik op het profiel om de selectie opnieuw in te stellen.
+
+Je kunt het muiswiel ook gebruiken om in en uit te zoomen op het hoogte profiel, of te verschuiven door het profiel te slepen terwijl je de <kbd>Shift</kbd> toets ingedrukt houdt.
+
+### Aanvullende gegevens
+
+Met behulp van de knoppen aan de rechterkant van het hoogteprofiel kunt u het hoogteprofiel optioneel kleuren door:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> informatie berekend op basis van de hoogtegegevens, of
+- **oppervlak** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data afkomstig van <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  Dit is alleen beschikbaar voor bestanden gemaakt met **gpx.rnmkcy.eu**.
+
+Als je selectie het bevat, kun je ook visualiseren: **snelheid** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **hartsnelheid** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, en **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data op het hoogteprofiel.
diff --git a/website/src/lib/docs/nl/getting-started.mdx b/website/src/lib/docs/nl/getting-started.mdx
new file mode 100755
index 0000000..1fa803b
--- /dev/null
+++ b/website/src/lib/docs/nl/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Aan de slag
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welkom bij de officiële handleiding voor **gpx.rnmkcy.eu**!
+Deze handleiding zal je door alle componenten en gereedschappen van de interface begeleiden en je helpen een deskundige gebruiker van de applicatie te worden.
+
+<DocsImage src="getting-started/interface" alt="De gpx.rnmkcy.eu interface." />
+
+Zoals weergegeven in bovenstaande scherm, is de interface verdeeld in vier hoofddelen rond de kaart. 
+Voordat we in de details van elke sectie duiken, hebben we een snel overzicht van de interface.
+
+## Menu
+
+Bovenaan de interface vind je het [hoofdmenu](./menu).
+Dit is waar je toegang hebt tot gemeenschappelijke acties zoals het openen, sluiten en exporteren van bestanden, ongedaan maken en opnieuw uitvoeren van acties, en het aanpassen van de applicatie-instellingen.
+
+## Bestanden en statistieken
+
+Aan de onderkant van de interface vindt u de lijst met bestanden die momenteel geopend zijn in de toepassing.
+Klik op een bestand om het te selecteren en de statistieken onder de lijst weer te geven.
+In het [dedicated sectie](./files-and-stats) zullen we uitleggen hoe we meerdere bestanden moeten selecteren en naar een verticale lay-out moeten overschakelen voor geavanceerd bestandsbeheer.
+
+## Werkbalk
+
+Aan de linkerkant van de interface vindt u de [toolbar](./toolbar), die alle tools bevat die u kunt gebruiken om uw bestanden te bewerken.
+
+## Kaart beheer
+
+Tot slot vind je aan de rechterkant van de interface de [kaart besturing](./map-controls).
+Met deze controles kunt u de kaart, in- en uitzoomen en schakelen tussen verschillende kaartstijlen.
diff --git a/website/src/lib/docs/nl/gpx.mdx b/website/src/lib/docs/nl/gpx.mdx
new file mode 100755
index 0000000..a279497
--- /dev/null
+++ b/website/src/lib/docs/nl/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX bestandsindeling
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+De <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX bestandsindeling</a> is open voor het uitwisselen van GPS-gegevens tussen applicaties en GPS-apparaten.
+Het bestaat in wezen uit een reeks GPS-punten die één of meerdere GPS-sporen coderen, en eventueel enkele aandachtspunten.
+
+GPX-bestanden kunnen ook metagegevens bevatten, waarvan de **naam** en **omschrijving** velden het nuttigst zijn voor gebruikers.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segmenten en GPS punten
+
+Zoals hierboven vermeld, kan een GPX-bestand meerdere GPS-routes bevatten.
+Deze zijn georganiseerd in een hiërarchische structuur, met routes op het hoogste niveau.
+
+- Een **track** is gemaakt van een reeks van losstaande segmenten.
+  Bovendien kan het metadata bevatten zoals een **naam**, een **beschrijving**, en **eigenschappen**.
+- Een **segment** is een reeks GPS-punten die een continu pad vormen.
+- Een **GPS punt** is een locatie met een breedtegraad, een lengtegraad en optioneel een tijdstempel en een hoogte.
+  Sommige toestellen slaan ook extra informatie op, zoals hartsnelheid, cadentie, temperatuur en voeding.
+
+In de meeste gevallen bevatten GPX-bestanden een enkele track met een enkel segment.
+De hierboven beschreven hiërarchie maakt echter meer geavanceerd gebruik mogelijk, zoals het plannen van meerdaagse reizen met meerdere varianten per dag.
+
+### POI's (Interessante plekken)
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+Naast de coördinaten kan een POI een **naam** en een **beschrijving** bevatten.
diff --git a/website/src/lib/docs/nl/home/funding.mdx b/website/src/lib/docs/nl/home/funding.mdx
new file mode 100755
index 0000000..a0ae847
--- /dev/null
+++ b/website/src/lib/docs/nl/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help de website gratis te houden (en advertentievrij)
+
+Elke keer dat u GPS-punten toevoegt of verplaatst, berekenen onze servers de beste route op het wegennetwerk.
+We gebruiken ook API's van <a href="https://mapbox.com" target="_blank">Mapbox</a> om mooie kaarten weer te geven, hoogtegegevens op te halen en u toe te staan om naar plaatsen te zoeken.
+
+Helaas is dit duur.
+Als u deze tool graag gebruikt en waardevol vindt, overweeg dan om een kleine donatie te doen om de website gratis en advertentievrij te houden.
+
+Heel hartelijk bedankt voor je steun! ❤️
diff --git a/website/src/lib/docs/nl/home/mapbox.mdx b/website/src/lib/docs/nl/home/mapbox.mdx
new file mode 100755
index 0000000..b172576
--- /dev/null
+++ b/website/src/lib/docs/nl/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is het bedrijf dat enkele van de mooie kaarten op deze website aanbiedt.
+Ze ontwikkelen ook de <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">kaart engine</a> die **gpx.rnmkcy.eu** aanstuurt.
+
+We zijn ontzettend gelukkig en dankbaar om deel uit te maken van hun <a href="https://mapbox.com/community" target="_blank">Community</a> programma, dat non-profit instellingen, educatieve instellingen en positieve effectorganisaties ondersteunt.
+Dit partnerschap staat **gpx.rnmkcy.eu** toe om te profiteren van Mapbox tools tegen kortingsprijzen, draagt in grote mate bij aan de financiële levensvatbaarheid van het project en stelt ons in staat om de best mogelijke gebruikerservaring aan te bieden.
diff --git a/website/src/lib/docs/nl/home/translation.mdx b/website/src/lib/docs/nl/home/translation.mdx
new file mode 100755
index 0000000..7145cba
--- /dev/null
+++ b/website/src/lib/docs/nl/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Vertaling
+
+De website werd vertaald door vrijwilligers op een samenwerkend vertaalplatform.
+U kunt bijdragen door vertalingen van ons <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin-project</a> toe te voegen of te verbeteren.
+
+Als u wilt beginnen met vertalen in een nieuwe taal, neem dan <a href="#contact">contact op</a>.
+
+Elke hulp wordt zeer gewaardeerd!
diff --git a/website/src/lib/docs/nl/integration.mdx b/website/src/lib/docs/nl/integration.mdx
new file mode 100755
index 0000000..e0c62cf
--- /dev/null
+++ b/website/src/lib/docs/nl/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integratie
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+Je kunt **gpx.rnmkcy.eu** gebruiken om kaarten te maken die je GPX bestanden laten zien en deze insluiten op je website.
+
+Alles wat je nodig hebt is:
+
+1. Een <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> om de kaart te laden, en
+2. GPX-bestanden gehost op uw server of op Google Drive, of toegankelijk via een openbare URL.
+
+U kunt dan met de onderstaande configurator spelen om de kaart aan te passen en de corresponderende HTML-code te genereren.
+
+<DocsNote type="warning">
+
+Om je GPX bestanden te laden, moet je <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers op je server instellen om <b>gpx.rnmkcy.eu</b> toe te staan.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/nl/map-controls.mdx b/website/src/lib/docs/nl/map-controls.mdx
new file mode 100755
index 0000000..43c23d8
--- /dev/null
+++ b/website/src/lib/docs/nl/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Kaart beheer
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+De kaartbesturingselementen bevinden zich aan de rechterkant van de interface.
+Met deze controles kunt u de kaart, in- en uitzoomen en schakelen tussen verschillende kaartstijlen.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Kaartnavigatie
+
+Met de besturingselementen bovenaan kunt u inzoomen <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> en uitzoomen <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, en de oriëntatie en kanteling van de kaart <Compass size="16" class="inline-block" style="margin-bottom: 2px" /> wijzigen.
+
+<DocsNote>
+
+Om de oriëntatie en kanteling van de kaart te bepalen, kun je ook de kaart slepen terwijl je <kbd>Ctrl</kbd> ingedrukt houdt.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Zoekbalk
+
+Je kunt de zoekbalk gebruiken om een adres te zoeken en via de kaart er naar toe te navigeren.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Lokaliseer knop
+
+De locatie-knop centreert de kaart op je huidige locatie.
+
+<DocsNote>
+
+Dit werkt alleen als je je browser en <b>gpx.rnmkcy.eu</b> hebt toegestaan om toegang te krijgen tot je locatie.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+Deze knop kan worden gebruikt om de street view modus op de kaart in te schakelen.
+Afhankelijk van de bron die voor street view weergave gekozen is in de [settings](./menu/settings), kan straatbeeld verschillend benaderd worden.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: de dekking van street view wordt weergegeven als groene lijnen op de kaart. Wanneer voldoende ingezoomd, zullen groene stippen de exacte locaties tonen waar straatbeeld aanwezig is. Bewegen over een groene stip toont op die locatie het straatbeeld.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: klik op de kaart om een nieuw tabblad met het straatbeeld te openen op die locatie.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Kaartlagen
+
+Met de kaartlagen knop kunt u wisselen tussen verschillende basiskaarten, en kaart overlays en POI categorieën aan en uit zetten.
+
+- **Basiskaarten** zijn achtergrondkaarten die de belangrijkste geografische kenmerken van de wereld weergeven.
+  Afhankelijk van hun doel hebben basiskaarten verschillende stijlen en detailniveaus.
+  Er kan slechts één basiskaart tegelijk worden weergegeven.
+- **Overlays** zijn extra lagen die kunnen worden weergegeven bovenop de basiskaart om aanvullende informatie te verstrekken.
+- **POI's (Interessante punten)** kunnen worden toegevoegd aan de kaart om verschillende categorieën plaatsen te tonen, zoals winkels, restaurants, of accommodaties.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+Beweeg boven de kaart om de <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay te tonen bovenop de <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basiskaart.
+    </span>
+</div>
+
+Een grote verzameling van globale en lokale basiskaarten en overlays is beschikbaar in **gpx.rnmkcy.eu**, evenals een aantal POI categorien.
+Ze kunnen worden ingeschakeld in het [map layer settings dialoog](./menu/settings).
+
+In deze instellingen kunt u ook de transparantie van de overlays beheren.
+
+Voor gevorderde gebruikers is het mogelijk om aangepaste basiskaarten en overlays toe te voegen door <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, of <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/nl/menu.mdx b/website/src/lib/docs/nl/menu.mdx
new file mode 100755
index 0000000..6db097b
--- /dev/null
+++ b/website/src/lib/docs/nl/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Het hoofdmenu, gesitueerd aan de bovenkant van de interface, biedt toegang tot acties, opties en instellingen verdeeld in meerdere categorieën, apart uitgelegd in de volgende secties.
+
+<DocsNote>
+
+De meeste van de menu-acties kunnen ook worden uitgevoerd met behulp van de toetsenbordsneltoetsen die worden weergegeven in het menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/menu/edit.mdx b/website/src/lib/docs/nl/menu/edit.mdx
new file mode 100755
index 0000000..e473ace
--- /dev/null
+++ b/website/src/lib/docs/nl/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Bewerkingen
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+In tegenstelling tot de bestandsacties, kunnen de bewerkingsacties mogelijk de inhoud van de huidige geselecteerde bestanden wijzigen.
+Bovendien, wanneer de verticale lay-out van de bestandenlijst is ingeschakeld (zie [Bestanden en statistieken](../files-and-stats)), deze kunnen ook worden toegepast op [tracks, segmenten en interessante punten](../gpx).
+Daarom zullen we verwijzen naar de elementen die door deze acties kunnen worden gewijzigd als _bestanden_.
+Merk op dat behalve het ongedaan maken en opnieuw doen de acties ook toegankelijk zijn via het contextmenu (rechtermuisklik) van de bestandsitems.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Ongedaan maken en opnieuw doen
+
+Met behulp van deze knoppen kunt u de laatste acties die u heeft uitgevoerd ongedaan maken of opnieuw uitvoeren.
+Dit geldt voor alle acties van de interface maar niet voor het bekijken van opties, applicatie-instellingen of kaart navigatie.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open het informatievenster van het huidig geselecteerde bestandsitem, waar u de naam en beschrijving kunt zien en bewerken.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Uiterlijk...
+
+Open het uiterlijk-dialoogvenster, waar je de kleur, doorzichtigheid en breedte van de geselecteerde items op de kaart kunt wijzigen.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Verberg/Toon
+
+De zichtbaarheid van de geselecteerde bestandsitems op de kaart in-/uitschakelen.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nieuwe track
+
+Maak een nieuwe track aan in het geselecteerde bestand.
+
+<DocsNote>
+
+Deze actie is alleen beschikbaar wanneer de verticale lay-out van de bestandslijst is ingeschakeld.
+Bovendien moet de selectie een enkel bestand zijn.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nieuw segment
+
+Maak een nieuw segment aan in de geselecteerde track.
+
+<DocsNote>
+
+Deze actie is alleen beschikbaar wanneer de verticale lay-out van de bestandslijst is ingeschakeld.
+Bovendien moet de selectie een enkele track zijn.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Selecteer alles
+
+Alle bestanden in het huidige hiërarchie niveau aan de selectie toevoegen.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Midden
+
+Centreer de kaart op de geselecteerde bestandsitems.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Kopie
+
+Kopieer de geselecteerde bestanden naar het klembord.
+
+<DocsNote>
+
+Deze actie is alleen beschikbaar wanneer de verticale lay-out van de bestandslijst is ingeschakeld.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Knip
+
+Kopieer de geselecteerde bestanden naar het klembord.
+
+<DocsNote>
+
+Deze actie is alleen beschikbaar wanneer de verticale lay-out van de bestandslijst is ingeschakeld.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Plakken
+
+Plak de bestandsitems van het klembord naar het huidige hiërarchie niveau indien compatibel.
+
+<DocsNote>
+
+Deze actie is alleen beschikbaar wanneer de verticale lay-out van de bestandslijst is ingeschakeld.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Verwijderen
+
+Verwijder de geselecteerde bestanden.
diff --git a/website/src/lib/docs/nl/menu/file.mdx b/website/src/lib/docs/nl/menu/file.mdx
new file mode 100755
index 0000000..0dd56ed
--- /dev/null
+++ b/website/src/lib/docs/nl/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Bestandsbewerkingen
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Het menu met bestandsacties bevat een aantal vrij vanzelfsprekende bestandsoperaties.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nieuw
+
+Nieuw leeg bestand maken.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Openen...
+
+Open bestanden vanaf de computer. 
+
+<DocsNote>
+
+Je kunt ook bestanden direct vanuit je bestandssysteem naar het venster slepen.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Maak een kopie van de huidige geselecteerde bestanden.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Sluiten
+
+Sluit de huidige geselecteerde bestanden.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Alles sluiten
+
+Sluit alle bestanden.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporteren...
+
+Open het exportdialoogvenster om de huidige geselecteerde bestanden op te slaan op uw computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporteer alles...
+
+Open het exportdialoogvenster om de huidige geselecteerde bestanden op te slaan op uw computer.
+
+<DocsNote type="warning">
+
+Als je download niet start na het klikken op de downloadknop, controleer dan je browserinstellingen om downloads van <b>gpx.rnmkcy.eu</b> toe te staan.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/menu/settings.mdx b/website/src/lib/docs/nl/menu/settings.mdx
new file mode 100755
index 0000000..46f605c
--- /dev/null
+++ b/website/src/lib/docs/nl/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Instellingen
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Afstandseenheden
+
+Wijzig de eenheden die worden gebruikt om afstanden in de interface weer te geven.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Snelheids eenheden
+
+Verander de eenheden die worden gebruikt om velocities in de interface weer te geven.
+U kunt kiezen tussen afstand per uur of minuten per afstand, wat geschikter kan zijn voor het uitvoeren van activiteiten.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperatuureenheden
+
+Verander de eenheden die worden gebruikt om de temperaturen in de interface weer te geven.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Taal
+
+Verander de taal die in de interface wordt gebruikt.
+
+<DocsNote>
+
+U kunt bijdragen door vertalingen van ons <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin-project</a> toe te voegen of te verbeteren.
+Als u wilt beginnen met vertalen in een nieuwe taal, neem dan <a href="#contact">contact op</a>.
+Elke hulp wordt zeer gewaardeerd!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Thema
+
+Verander het thema dat in de interface wordt gebruikt.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Straatweergave bron
+
+Wijzig de bron die gebruikt wordt voor de [straatweergave](../map-controls).
+De standaard is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, maar u kunt ook <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a> gebruiken.
+Leer meer over het gebruik van de straatweergave controle in de [map besturingselementen sectie](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Kaartlagen...
+
+Hiermee open je een dialoogvenster waar je kaartlagen kunt in- of uitschakelen, aangepaste lagen kunt toevoegen, de transparantie van overlays, en meer kunt aanpassen.
+Meer informatie over kaart lagen is te vinden in de [map control sectie](../map-controls).
diff --git a/website/src/lib/docs/nl/menu/view.mdx b/website/src/lib/docs/nl/menu/view.mdx
new file mode 100755
index 0000000..bdb4a04
--- /dev/null
+++ b/website/src/lib/docs/nl/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Bekijk opties
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Dit menu biedt opties om de interface en de kaartweergave te herschikken.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Hoogte profiel
+
+Verberg het hoogteprofiel om ruimte te maken voor de kaart, of toon het om de huidige selectie te inspecteren.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Verticale bestandslijst
+
+Schakel tussen een verticale en een horizontale layout voor de bestandslijst.
+De verticale bestandslijst is handig wanneer je veel bestanden hebt geopend, of bestanden met meerdere [tracks, segmenten of POI's](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Wissel naar vorige basemap
+
+Verander de basiskaart naar de kaart die eerder is geselecteerd via [kaartlaag controle](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Schakel overlays
+
+Verander de basiskaart naar de kaart die eerder is geselecteerd via [kaartlaag controle](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> afstandsmarkeringen
+
+De zichtbaarheid van afstandsmarkeringen op de kaart in-/uitschakelen.
+Ze worden weergegeven voor de huidige selectie, zoals het [hoogteprofiel](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Richtingspijlen
+
+Afstandsmarkeringen op de kaart in-/uitschakelen.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Schakel 3D in/uit
+
+Voer in of verlaat de 3D-mapweergave.
+
+<DocsNote>
+
+Om de oriëntatie en kanteling van de kaart te bepalen, kun je ook de kaart slepen terwijl je <kbd>Ctrl</kbd> ingedrukt houdt.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/toolbar.mdx b/website/src/lib/docs/nl/toolbar.mdx
new file mode 100755
index 0000000..38fbdef
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Werkbalk
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+De werkbalk bevindt zich aan de linkerkant van de kaart en is het hart van de applicatie, omdat het toegang geeft tot de belangrijkste functies van **gpx.rnmkcy.eu**.
+Elk gereedschap wordt weergegeven door een pictogram en kan worden geactiveerd door erop te klikken.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Net als bij [bewerk acties](./menu/edit), kunnen de meeste gereedschappen tegelijk op meerdere bestanden worden toegepast en op [binnenste tracks en segmenten](./gpx).
+
+De volgende secties beschrijven elk gereedschap in detail.
diff --git a/website/src/lib/docs/nl/toolbar/clean.mdx b/website/src/lib/docs/nl/toolbar/clean.mdx
new file mode 100755
index 0000000..bad5750
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Opruimen
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Wanneer het gereedscahp "opruimen" is geselecteerd, zal het slepen op de kaart een rechthoekige selectie maken.
+
+Afhankelijk van de opties die geselecteerd zijn in het dialoogvenster hieronder, zal het klikken op de knop verwijderen GPS punten en/of [interessante punten](../gpx) verwijderen, binnen respectievelijk buiten de selectie.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/nl/toolbar/elevation.mdx b/website/src/lib/docs/nl/toolbar/elevation.mdx
new file mode 100755
index 0000000..67248d6
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Stijging
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Met dit gereedschap kun je hoogtegegevens toevoegen aan sporen en [interessante punten](../gpx), of de bestaande gegevens vervangen.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Hoogtegegevens worden verstrekt door <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Je kunt meer leren over de oorsprong en nauwkeurigheid in de <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentatie</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/toolbar/extract.mdx b/website/src/lib/docs/nl/toolbar/extract.mdx
new file mode 100755
index 0000000..cfcf0d1
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Uitpakken
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Met dit gereedschap kun je [tracks (of segmenten) uitpakken](../gpx) uit bestanden (of tracks) die meerdere van deze bevatten.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Het toepassen van het gereedschap op een bestand dat meerdere tracks bevat, maakt een nieuw bestand voor elk van de tracks die het bevat.
+Evenzo zal het toepassen van het gereedschap op een track met meerdere segmenten een nieuwe track maken (in hetzelfde bestand) voor elk van de segmenten die het bevat.
+
+<DocsNote>
+
+Bij het uitpakken van tracks uit een bestand met <a href="../gpx">interessante punten</a>, zal de tool automatisch elke POI toewijzen aan de track waar het het dichtst bij staat.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/toolbar/merge.mdx b/website/src/lib/docs/nl/toolbar/merge.mdx
new file mode 100755
index 0000000..ea5fc82
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Samenvoegen
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Om dit gereedschap te gebruiken, moet je [select](../files-and-stats) meerdere bestanden, [tracks of segmenten](../gpx).
+
+- Als je doel is om een enkel doorlopend spoor te maken vanuit je selectie, gebruik dan de **Verbind de sporen** optie en valideer.
+- De tweede optie kan worden gebruikt om bestanden te maken of te beheren met meerdere [tracks of segmenten](../gpx).
+  Bestanden (of tracks) samenvoegen resulteert in één enkel bestand (of track) met alle tracks (of segmenten) uit de selectie.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/nl/toolbar/minify.mdx b/website/src/lib/docs/nl/toolbar/minify.mdx
new file mode 100755
index 0000000..032f862
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Verkleinen
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Dit gereedschap kan worden gebruikt om het aantal GPS-punten in een spoor te verminderen, wat nuttig kan zijn om de grootte te verminderen.
+
+U kunt de marge van het vereenvoudigingsalgoritme aanpassen met de schuifregelaar, en dan wordt het aantal punten zichtbaar dat zal worden bewaard, evenals het vereenvoudigde spoor op de kaart.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+De tolerantiewaarde vertegenwoordigt de maximale afstand tussen het oorspronkelijke spoor en de vereenvoudigde spoor.
+Je kunt <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">hier</a> meer lezen over het algoritme dat wordt gebruikt.
+
+</DocsNote>
diff --git a/website/src/lib/docs/nl/toolbar/poi.mdx b/website/src/lib/docs/nl/toolbar/poi.mdx
new file mode 100755
index 0000000..838ca5f
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Interessante punten (POI's)
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Interessantepunten](../gpx) kunnen worden toegevoegd aan GPX bestanden om interessante plaatsen op de kaart te markeren en deze op uw GPS-apparaat te tonen.
+
+### Maak een POI
+
+Om een POI te maken, vul het onderstaande formulier in.
+Je kunt de locatie kiezen door op de kaart te klikken of door de coordinaten in te vullen.
+Valideer het formulier goed zodra je klaar bent.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Bewerk een POI
+
+Bovenstaand forrmulier kan ook gebruikt worden om een bestaande POI te bewerken nadat je het hebt geselecteerd op de kaart.
+Als je alleen het interessante punt hoeft te verplaatsen, kunt je het naar de gewenste locatie slepen.
diff --git a/website/src/lib/docs/nl/toolbar/routing.mdx b/website/src/lib/docs/nl/toolbar/routing.mdx
new file mode 100755
index 0000000..e9ad79a
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Routeplanning en -bewerking
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Met het gereedschap voor routeplanning en bewerken kunt je routes te maken en bewerken door ankerpunten te plaatsen of verplaatsen op de kaart.
+
+## Instellingen
+
+Zoals hieronder weergegeven, bevat het dialoogvenster een paar instellingen om het routerend gedrag te beheren.
+Je kunt het dialoogvenster minimaliseren om ruimte te besparen door te klikken op <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routering
+
+Wanneer routering is ingeschakeld zullen ankerpunten geplaatst of verplaatst op de kaart worden verbonden door een route berekend op het <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> wegennetwerk.
+Routering uitschakelen om ankerpunten te verbinden met rechte lijnen.
+Deze instelling kan ook worden omgeschakeld door op <kbd>F5</kbd> te drukken.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activiteit
+
+Selecteer het type activiteit waarop de routes toegesneden moeten worden.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Privéwegen toestaan
+
+Wanneer ingeschakeld, zal de routering software rekening houden met privéwegen bij het berekenen van routes.
+
+<DocsNote type="warning">
+
+Gebruik deze optie alleen als je lokale kennis van het gebied hebt en toestemming hebt om de betreffende wegen te gebruiken.
+
+</DocsNote>
+
+## Plotten en bewerken van routes
+
+Voor het maken van een route of het uitbreiden van een bestaande route kun je simpelweg klikken op de kaart om een nieuw ankerpunt te plaatsen.
+
+Je kunt ook een bestaand ankerpunt slepen om het segment opnieuw te berekenen tussen het vorige en volgende ankerpunt.
+
+Verder kunnen nieuwe ankerpunten worden ingevoegd tussen bestaande door over het tussenliggende segment te zweven en het ankerpunt dat verschijnt te verslepen naar de gewenste locatie.
+Op touchapparaten kun je op het segment tikken om een nieuw ankerpunt in te voegen.
+
+<DocsNote>
+
+Bij het bewerken van geïmporteerde GPX-bestanden, wordt er automatisch een eerste set ankerpunten gemaakt.
+Om het bewerkingsproces gemakkelijker te maken, worden er bij inzoomen meer ankerpunten weergegeven.
+Hierdoor kan de route op verschillende detailniveaus worden bewerkt.
+
+</DocsNote>
+
+Tot slot kun je ankerpunten verwijderen door erop te klikken en <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> te selecteren in het contextmenu.
+
+<DocsImage src="tools/routing" alt="Ankerpunten maken het makkelijk om een route te bewerken." />
+
+## Extra gereedschappen
+
+De volgende gereedschappen automatiseren bewerkingen op een gemeenschappelijke route.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Omkeren
+
+Keer de richting van de route om.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Terug naar start
+
+Sluit het laatste punt van de route aan met het startpunt, door gebruik te maken van de gekozen route-instellingen.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Rondreis
+
+Terug naar het startpunt met dezelfde route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Wijzig het begin van de lus
+
+Wanneer het eindpunt van de route dichtbij genoeg is, kan je de start van de lus veranderen door op een ankerpunt te klikken en <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start Loop hier</button> te selecteren in het contextmenu.
diff --git a/website/src/lib/docs/nl/toolbar/scissors.mdx b/website/src/lib/docs/nl/toolbar/scissors.mdx
new file mode 100755
index 0000000..8ba3016
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Bijsnijden of splitsen
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Bijsnijden
+
+Met behulp van de schuifregelaar kunt u het deel van de gekozen track dat u wilt behouden, definiëren.
+De start- en eindmarkeringen op de kaart en het [statistieken en hoogteprofiel](../files-and-stats) worden in real time bijgewerkt om de selectie weer te geven.
+Als alternatief kun je een selectierechthoek direct op het profiel slepen.
+Bevestig de selectie wanneer u tevreden bent met het resultaat.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Splitsen
+
+Om de geselecteerde trace in twee delen te splitsen, klikt u op een van de splitsmarkeringen die langs de trace worden weergegeven.
+Om te splitsen op een specifiek punt van je keuze, zweef over de track op de kaart.
+Schaar verschijnt op de cursorpositie, en toont dat je het spoor kunt splitsen op dat punt.
+
+Je kunt kiezen om de track te splitsen in twee GPX-bestanden, of om de delen in hetzelfde bestand te houden als [nummers of segmenten](../gpx).
+
+<DocsImage src="tools/split" alt="Over het geselecteerde spoor zweven verandert je cursor in een schaar." />
diff --git a/website/src/lib/docs/nl/toolbar/time.mdx b/website/src/lib/docs/nl/toolbar/time.mdx
new file mode 100755
index 0000000..6ddd490
--- /dev/null
+++ b/website/src/lib/docs/nl/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Tijd
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Met deze tool kunt u tijd wijzigen of toevoegen aan een spoor.
+U hoeft alleen het onderstaande formulier te gebruiken en het te valideren wanneer u klaar bent.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Wanneer u de snelheid bewerkt, wordt de bewegende tijd aangepast in het formulier, en omgekeerd.
+Ook wanneer u de starttijd bewerkt, wordt de eindtijd bijgewerkt om dezelfde totale duur te houden, en omgekeerd.
+
+<DocsNote>
+
+Bij het gebruik van dit gereedschap met bestaande tijdstempels, zal het wijzigen van de tijd of snelheid ertoe leiden dat deze gewoon verschuiven, of langer/korter worden.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/faq.mdx b/website/src/lib/docs/no/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/no/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/files-and-stats.mdx b/website/src/lib/docs/no/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/no/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/no/getting-started.mdx b/website/src/lib/docs/no/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/no/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/no/gpx.mdx b/website/src/lib/docs/no/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/no/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/no/home/funding.mdx b/website/src/lib/docs/no/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/no/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/no/home/mapbox.mdx b/website/src/lib/docs/no/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/no/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/no/home/translation.mdx b/website/src/lib/docs/no/home/translation.mdx
new file mode 100755
index 0000000..540a47e
--- /dev/null
+++ b/website/src/lib/docs/no/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+All hjelp er høyt verdsatt!
diff --git a/website/src/lib/docs/no/integration.mdx b/website/src/lib/docs/no/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/no/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/no/map-controls.mdx b/website/src/lib/docs/no/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/no/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/no/menu.mdx b/website/src/lib/docs/no/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/no/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/menu/edit.mdx b/website/src/lib/docs/no/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/no/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/no/menu/file.mdx b/website/src/lib/docs/no/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/no/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/menu/settings.mdx b/website/src/lib/docs/no/menu/settings.mdx
new file mode 100755
index 0000000..c571634
--- /dev/null
+++ b/website/src/lib/docs/no/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+All hjelp er høyt verdsatt!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/no/menu/view.mdx b/website/src/lib/docs/no/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/no/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/toolbar.mdx b/website/src/lib/docs/no/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/no/toolbar/clean.mdx b/website/src/lib/docs/no/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/no/toolbar/elevation.mdx b/website/src/lib/docs/no/toolbar/elevation.mdx
new file mode 100755
index 0000000..8aaf63a
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Høyde
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/toolbar/extract.mdx b/website/src/lib/docs/no/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/toolbar/merge.mdx b/website/src/lib/docs/no/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/no/toolbar/minify.mdx b/website/src/lib/docs/no/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/no/toolbar/poi.mdx b/website/src/lib/docs/no/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/no/toolbar/routing.mdx b/website/src/lib/docs/no/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/no/toolbar/scissors.mdx b/website/src/lib/docs/no/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/no/toolbar/time.mdx b/website/src/lib/docs/no/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/no/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/faq.mdx b/website/src/lib/docs/pl/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/pl/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/files-and-stats.mdx b/website/src/lib/docs/pl/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/pl/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/pl/getting-started.mdx b/website/src/lib/docs/pl/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/pl/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/pl/gpx.mdx b/website/src/lib/docs/pl/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/pl/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/pl/home/funding.mdx b/website/src/lib/docs/pl/home/funding.mdx
new file mode 100755
index 0000000..9b1ced0
--- /dev/null
+++ b/website/src/lib/docs/pl/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Pomóż, aby ta strona pozostała darmową (i bez reklam)
+
+Za każdym razem, gdy dodasz lub przenosisz punkty GPS, nasze serwery obliczają najlepszą trasę w sieci drogowej.
+Używamy również API z <a href="https://mapbox.com" target="_blank">Mapbox</a> do wyświetlania pięknych map, pobierania danych wysokości i wyszukiwania miejsc.
+
+Niestety jest to kosztowne.
+Jeśli podoba Ci się korzystanie z tego narzędzia i uznajesz je za wartościowe, rozważ przekazanie małej darowizny, aby pomóc w utrzymaniu strony bez reklam.
+
+Bardzo dziękuję za wsparcie! ❤️
diff --git a/website/src/lib/docs/pl/home/mapbox.mdx b/website/src/lib/docs/pl/home/mapbox.mdx
new file mode 100755
index 0000000..e87161c
--- /dev/null
+++ b/website/src/lib/docs/pl/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox jest firmą, która dostarczyła kilka pięknych map na tej stronie.
+Oni opracowują również <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">silnik </a> , który napędza **gpx.rnmkcy.eu**.
+
+Jesteśmy niezwykle wdzięczni za udział w programie <a href="https://mapbox.com/community" target="_blank">Community</a> , który wspiera nonprofity, instytucje edukacyjne i organizacje o pozytywnym wpływie.
+To partnerstwo pozwala **gpx.rnmkcy.eu**  korzystać z narzędzi Mapbox po obniżonych cenach, w znacznym stopniu przyczyniając się do rentowności projektu i umożliwiając nam zaoferowanie możliwie najlepszych doświadczeń użytkowników.
diff --git a/website/src/lib/docs/pl/home/translation.mdx b/website/src/lib/docs/pl/home/translation.mdx
new file mode 100755
index 0000000..12cea12
--- /dev/null
+++ b/website/src/lib/docs/pl/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Tłumaczenie
+
+Strona internetowa jest tłumaczona przez wolontariuszy na platformie do współpracy w tłumaczeniu.
+Możesz pomóc dodając i sprawdzając istniejące tłumaczenie w <a href="https://crowdin.com/project/gpxstudio" target="_blank">projekcie Crowdin</a>.
+
+Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się</a>.
+
+Każda pomoc jest bardzo mile widziana!
diff --git a/website/src/lib/docs/pl/integration.mdx b/website/src/lib/docs/pl/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/pl/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/pl/map-controls.mdx b/website/src/lib/docs/pl/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/pl/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/pl/menu.mdx b/website/src/lib/docs/pl/menu.mdx
new file mode 100755
index 0000000..fbf57d0
--- /dev/null
+++ b/website/src/lib/docs/pl/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Większość działań może być również wykonywana przy użyciu skrótów klawiszowych wyświetlanych w menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/menu/edit.mdx b/website/src/lib/docs/pl/menu/edit.mdx
new file mode 100755
index 0000000..155936d
--- /dev/null
+++ b/website/src/lib/docs/pl/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+W przeciwieństwie do pliku, edycja może potencjalnie modyfikować zawartość aktualnie wybranych plików.
+Ponadto, gdy układ pionowy listy plików jest włączony (patrz [Pliki i statystyki](../files-and-stats)), może być również zastosowane do [ścieżek, segmentów i punktów zainteresowania](../gpx).
+Dlatego będziemy odnosić się do elementów, które mogą być modyfikowane przez te działania jako _elementy pliku_.
+Zauważ, że z wyjątkiem akcji cofania i powtarzania, akcje edycji są również dostępne w menu kontekstowym (prawy przycisk myszy) elementów pliku.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Cofnij i ponów
+
+Używając tych przycisków, możesz cofnąć lub ponownie wykonać ostatnio wykonane czynności.
+Ma to zastosowanie do wszystkich akcji interfejsu, ale nie do opcji wyświetlania, ustawień aplikacji lub nawigacji mapy.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Otwórz okno dialogowe aktualnie wybranego pliku, gdzie możesz zobaczyć i edytować jego nazwę i opis.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Wygląd...
+
+Otwórz okno dialogowe wyglądu, aby zmienić kolor, przezroczystość i szerokość zaznaczonych elementów pliku na mapie.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Ukryj/pokaż
+
+Przełącz widoczność zaznaczonego pliku na mapie.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+Ta akcja jest dostępna tylko wtedy, gdy układ pionowy listy plików jest włączony.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+Ta akcja jest dostępna tylko wtedy, gdy układ pionowy listy plików jest włączony.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Zaznacz wszystko
+
+Dodaj do zaznaczenia wszystkie pliki na bieżącym poziomie hierarchii.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Kopiuj
+
+Skopiuj zaznaczone pliki do schowka.
+
+<DocsNote>
+
+Ta akcja jest dostępna tylko wtedy, gdy układ pionowy listy plików jest włączony.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Wytnij
+
+Wytnij zaznaczone pliki do schowka.
+
+<DocsNote>
+
+Ta akcja jest dostępna tylko wtedy, gdy układ pionowy listy plików jest włączony.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Wklej
+
+Wklej elementy pliku ze schowka do bieżącego poziomu hierarchii, jeśli są z nim zgodne.
+
+<DocsNote>
+
+Ta akcja jest dostępna tylko wtedy, gdy układ pionowy listy plików jest włączony.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Usuń
+
+Usuń zaznaczone pliki.
diff --git a/website/src/lib/docs/pl/menu/file.mdx b/website/src/lib/docs/pl/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/pl/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/menu/settings.mdx b/website/src/lib/docs/pl/menu/settings.mdx
new file mode 100755
index 0000000..0954c38
--- /dev/null
+++ b/website/src/lib/docs/pl/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Możesz pomóc dodając i sprawdzając istniejące tłumaczenie w <a href="https://crowdin.com/project/gpxstudio" target="_blank">projekcie Crowdin</a>.
+Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się</a>.
+Każda pomoc jest bardzo mile widziana!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/pl/menu/view.mdx b/website/src/lib/docs/pl/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/pl/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/toolbar.mdx b/website/src/lib/docs/pl/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/pl/toolbar/clean.mdx b/website/src/lib/docs/pl/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pl/toolbar/elevation.mdx b/website/src/lib/docs/pl/toolbar/elevation.mdx
new file mode 100755
index 0000000..a8403e0
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Przewyższenie
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/toolbar/extract.mdx b/website/src/lib/docs/pl/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/toolbar/merge.mdx b/website/src/lib/docs/pl/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pl/toolbar/minify.mdx b/website/src/lib/docs/pl/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pl/toolbar/poi.mdx b/website/src/lib/docs/pl/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/pl/toolbar/routing.mdx b/website/src/lib/docs/pl/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/pl/toolbar/scissors.mdx b/website/src/lib/docs/pl/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/pl/toolbar/time.mdx b/website/src/lib/docs/pl/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/pl/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/faq.mdx b/website/src/lib/docs/pt-BR/faq.mdx
new file mode 100755
index 0000000..0791414
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: Perguntas Frequentes
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Eu preciso fazer uma doação para usar este site?
+
+Não.
+O site é gratuito e sempre será (contanto que seja financeiramente sustentável).
+No entanto, as doações são apreciadas e ajudam a manter o site funcionando.
+
+### Por que esta rota é escolhida sobre aquela? _Ou_ como posso adicionar algo ao mapa?
+
+O **gpx.rnmkcy.eu** usa dados do <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, que é um mapa mundo aberto e colaborativo.
+Isto significa que você pode contribuir para o mapa adicionando ou editando dados no OpenStreetMap.
+
+Se você nunca contribuiu para o OpenStreetMap antes, aqui está como você pode sugerir mudanças:
+
+1. Vá para o local onde você deseja adicionar ou editar dados no <a href="https://www.openstreetmap.org/" target="_blank">mapa</a>.
+2. Use a ferramenta <button>Consulta</button> à direita para inspecionar os dados existentes.
+3. Clique com o botão direito no local e selecione <button>Adicionar uma nota aqui</button>.
+4. Explique o que está incorreto ou faltando e clique <button>Adicionar nota</button> para submetê-la.
+
+Alguém mais experiente com o OpenStreetMap irá rever sua nota e fazer as alterações necessárias.
+
+<DocsNote>
+
+Mais informações sobre como contribuir para o OpenStreetMap podem ser encontradas <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">aqui</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/files-and-stats.mdx b/website/src/lib/docs/pt-BR/files-and-stats.mdx
new file mode 100755
index 0000000..072c285
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Arquivos e estatísticas
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Lista de arquivos
+
+Uma vez [abertos](./menu/file), os arquivos serão exibidos como abas na lista de arquivos localizados na parte inferior do mapa.
+Você pode reordená-los arrastando e soltando as abas.
+E quando muitos arquivos estiverem abertos, você poderá rolar a lista de abas para navegar entre eles.
+
+<DocsNote>
+
+Ao usar um mouse, você precisa segurar <kbd>Shift</kbd> para rolar horizontalmente.
+
+</DocsNote>
+
+### Seleção de arquivo
+
+Clicando em uma aba, você pode alternar entre arquivos para inspecionar suas estatísticas, e aplicar [ações de edição](./menu/edit) e [ferramentas](./toolbar) para eles.
+Ao segurar a tecla <kbd>Ctrl/Cmd</kbd>, você poderá adicionar arquivos à seleção ou removê-los e segurando <kbd>Shift</kbd>, você pode selecionar um intervalo de arquivos.
+A maioria das [ações de edição](./menu/edit) e [ferramentas](./toolbar) podem ser aplicadas a vários arquivos de uma só vez.
+
+<DocsNote>
+
+Você também pode navegar pelos arquivos usando as setas do teclado e usar <kbd>Shift</kbd> para adicionar arquivos à seleção.
+
+</DocsNote>
+
+### Ações de edição
+
+Clicando com o botão direito em uma aba arquivo, você pode acessar as mesmas ações que no [menu de edição](./menu/edit).
+
+### Layout vertical
+
+Como mencionado na [seção de opções de visualização](./menu/view), você pode alternar entre um layout horizontal e vertical para a lista de arquivos.
+A lista vertical é útil quando você tem muito arquivos abertos, ou arquivos com múltiplas [faixas, segmentos ou waypoints](./gpx).
+De fato, este layout permite que você inspecione o conteúdo dos arquivos por seções ocultáveis.
+
+Você também pode aplicar as [ações de edição](./menu/edit) e [ferramentas](./toolbar) para itens de arquivos internos.
+Além disso, você pode arrastar e soltar os itens internos para reordená-los, ou movê-los na hierarquia ou até mesmo para outro arquivo.
+
+<DocsNote>
+
+O tamanho da lista de arquivos pode ser ajustado arrastando o separador entre o mapa e a lista de arquivos.
+
+</DocsNote>
+
+## Perfil de elevação e estatísticas
+
+Na parte inferior da interface, você pode encontrar o perfil de elevação e estatísticas para a seleção atual.
+
+<DocsNote>
+
+O tamanho do perfil de elevação pode ser ajustado arrastando o separador entre o mapa e o perfil de elevação.
+
+</DocsNote>
+
+### Estatísticas interativas
+
+Ao passar o mouse sobre o perfil de elevação, uma dica mostrará estatísticas sobre a posição do cursor.
+
+Para obter as estatísticas de uma seção específica do perfil de elevação, você pode arrastar um retângulo de seleção no perfil.
+Clique no perfil para redefinir a seleção.
+
+Você também pode usar a roda do mouse para aumentar e diminuir o zoom no perfil de elevação, e mover para esquerda e direita arrastando o perfil enquanto segura a tecla <kbd>Shift</kbd>.
+
+### Dados adicionais
+
+Usando os botões à direita do perfil de elevação, você pode opcionalmente colorir o perfil de elevação por:
+
+- **inclinação** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> informação computada a partir dos dados de elevação, ou
+- **superfície** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> dados vindos dos marcadores de <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">superfície</a> do <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>.
+  Isso só está disponível para arquivos criados com **gpx.rnmkcy.eu**.
+
+Se sua seleção incluir, você também pode visualizar: **velocidade** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **frequência cardíaca** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadência** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperatura** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />e **energia** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> dados sobre o perfil de elevação.
diff --git a/website/src/lib/docs/pt-BR/getting-started.mdx b/website/src/lib/docs/pt-BR/getting-started.mdx
new file mode 100755
index 0000000..8d4f6ed
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Primeiros passos
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Bem-vindo ao guia oficial do **gpx.rnmkcy.eu**!
+Este guia irá guiá-lo por todos os componentes e ferramentas da interface, ajudando você a se tornar um usuário proficiente da aplicação.
+
+<DocsImage src="getting-started/interface" alt="Interface do gpx.rnmkcy.eu." />
+
+Como mostrado na captura de tela acima, a interface é dividida em quatro seções principais organizadas ao redor do mapa. 
+Antes de entrarmos nos detalhes de cada seção, vamos ter uma visão geral da interface.
+
+## Menu
+
+Na parte superior da interface, você encontrará o [menu principal](./menu).
+Aqui é onde você pode acessar ações comuns, como abertura, fechamento e exportação de arquivos, desfazer e refazer ações e ajustar as configurações do aplicativo.
+
+## Arquivos e estatísticas
+
+Na parte inferior da interface, você encontrará a lista de arquivos atualmente abertos no aplicativo.
+Você pode clicar em um arquivo para selecioná-lo e exibir suas estatísticas abaixo da lista.
+Na [seção dedicada](./files-and-stats), vamos explicar como selecionar vários arquivos e mudar para um layout vertical para o gerenciamento avançado de arquivos.
+
+## Barra de ferramentas
+
+No lado esquerdo da interface, você encontrará [barra de ferramentas](./toolbar), que contém todas as ferramentas que você pode usar para editar seus arquivos.
+
+## Controles do mapa
+
+Finalmente, no lado direito da interface, você encontrará os [controles do mapa](./map-controls).
+Estes controles permitem navegar pelo mapa, ampliar e sair e alternar entre diferentes estilos de mapa.
diff --git a/website/src/lib/docs/pt-BR/gpx.mdx b/website/src/lib/docs/pt-BR/gpx.mdx
new file mode 100755
index 0000000..6c646cd
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: Formato do arquivo GPX
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+O <a href="https://www.topografix.com/gpx.asp" target="_blank">formato de arquivo GPX</a> é um padrão aberto para troca de dados GPS entre aplicativos e dispositivos GPS.
+Ela consiste essencialmente em uma série de pontos do GPS codificando um ou vários rastros do GPS e, opcionalmente, alguns pontos de interesse.
+
+Arquivos GPX também podem conter metadados, dos quais os campos **nome** e **descrição** são os mais úteis para os usuários.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> faixas, segmentos e pontos de GPS
+
+Como mencionado acima, um arquivo GPX pode conter vários traços GPS.
+Estes são organizados em uma estrutura hierárquica, com faixas no nível superior.
+
+- Uma **faixa** é feita de uma sequência de segmentos desconectados.
+  Além disso, ele pode conter metadados como um **nome**, uma **descrição** e **propriedades de aparência**.
+- Um **segmento** é uma sequência de pontos GPS que formam um caminho contínuo.
+- Um **ponto GPS** é um local com uma latitude, uma longitude e, opcionalmente, um marcador de hora e uma altitude.
+  Alguns dispositivos também armazenam informações adicionais, como frequência cardíaca, cadência, temperatura e potência.
+
+Na maioria dos casos, os arquivos GPX contêm uma única faixa com um único segmento.
+No entanto, a hierarquia acima descrita permite casos de utilização mais avançados, como o planeamento de viagens de vários dias com várias variantes por dia.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Pontos de interesse
+
+**Pontos de interesse** (tecnicamente chamados _pontos de rota_) representam locais de interesse para serem exibidos em um navegador GPS ou em um mapa digital.
+
+Além de suas coordenadas, um ponto de interesse pode ter um **nome** e uma **descrição**.
diff --git a/website/src/lib/docs/pt-BR/home/funding.mdx b/website/src/lib/docs/pt-BR/home/funding.mdx
new file mode 100755
index 0000000..4f95f45
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ajude a manter o site gratuito (e sem anúncios)
+
+Cada vez que você adiciona ou move pontos de GPS, nosso servidor calcula a melhor rota no mapa.
+Nos também usamos as APIs do <a href="https://mapbox.com" target="_blank">Mapbox</a> para mostrar mapas bonitos, pegar dados de elevação e permitir que você busque por lugares.
+
+Infelizmente, isso é caro.
+Se você gosta dessa ferramenta e acha ela valiosa, considere fazer uma pequena doação para ajudar a manter o site grátis e sem propagandas.
+
+Muito obrigado pelo seu apoio! ❤️
diff --git a/website/src/lib/docs/pt-BR/home/mapbox.mdx b/website/src/lib/docs/pt-BR/home/mapbox.mdx
new file mode 100755
index 0000000..7f35e20
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox é uma empresa que fornece alguns dos belos mapas desse site.
+Eles também desenvolvem o <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">mecanismo de mapa</a> que alimenta **gpx.rnmkcy.eu**.
+
+Somos incrivelmente afortunados e gratos de ser parte do programa de <a href="https://mapbox.com/community" target="_blank">Comunidade</a>, que apoia instituições educacionais, sem fins lucrativos e de grande impacto positivo.
+Essa parceria permite **gpx.rnmkcy.eu** se beneficiar de descontos no uso das ferramentas do Mapbox, contribuindo para a viabilidade financeira do projeto e nos permite oferecer a melhor experiência possível de usuário.
diff --git a/website/src/lib/docs/pt-BR/home/translation.mdx b/website/src/lib/docs/pt-BR/home/translation.mdx
new file mode 100755
index 0000000..5144cd4
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Tradução
+
+O site é traduzido por voluntários usando uma plataforma de tradução colaborativa.
+Você pode contribuir adicionando ou melhorando as traduções em nosso <a href="https://crowdin.com/project/gpxstudio" target="_blank">projeto do Crowdin</a>.
+
+Se quiser iniciar a tradução de uma nova língua, por favor <a href="#contact">entre em contato</a>.
+
+Qualquer ajuda é muito bem-vinda!
diff --git a/website/src/lib/docs/pt-BR/integration.mdx b/website/src/lib/docs/pt-BR/integration.mdx
new file mode 100755
index 0000000..bcb14e1
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integração
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+Você pode usar **gpx.rnmkcy.eu** para criar mapas mostrando os seus arquivos GPX e incorporá-los em seu site.
+
+Tudo que você precisa é:
+
+1. Um <a href="https://account.mapbox.com/auth/signup" target="_blank">Token de acesso do Mapbox</a> para caeegar o mapa, e
+2. Arquivos GPX hospedados no seu servidor ou no Google Drive, ou acessíveis através de uma URL pública.
+
+Você pode configurar abaixo a aparência do seu mapa e gerar o código HTML correspondente.
+
+<DocsNote type="warning">
+
+Você precisa configurar cabeçalhos <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> no seu servidor para permitir que <b>gpx.rnmkcy.eu</b> carregue seus arquivos GPX.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/pt-BR/map-controls.mdx b/website/src/lib/docs/pt-BR/map-controls.mdx
new file mode 100755
index 0000000..959765e
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Controles do mapa
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+Estes controles permitem navegar pelo mapa, ampliar e sair e alternar entre diferentes estilos de mapa.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Navegação no mapa
+
+Os controles no topo permitem aumentar<Plus size="16" class="inline-block" style="margin-bottom: 2px" /> e diminuir <Minus size="16" class="inline-block" style="margin-bottom: 2px" /> o zoom e mudar a orientação e inclinação do mapa <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+Para controlar a orientação e a inclinação do mapa, você também pode arrastar o mapa enquanto segura <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Barra de pesquisa
+
+Você pode usar a barra de pesquisa para procurar um endereço e navegar até ele no mapa.
+
+### U<LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Botão Localizar
+
+O botão de localizar centraliza o mapa na sua localização atual.
+
+<DocsNote>
+
+Isso só funciona se você tiver permitido o acesso que seu navegador e <b>gpx.rnmkcy.eu</b> tenham acesso a sua localização.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+Este botão pode ser usado para ativar o modo visualização de rua no mapa.
+Dependendo da fonte da visualização de rua escolhida nas [configurações](./menu/settings), as imagens de visualização de rua podem ser acessadas de forma diferente.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: a cobertura de rua aparecerá como linhas verdes no mapa. Quando ampliado o suficiente, os pontos verdes mostrarão os locais exatos onde a imagem de visualização de rua está disponível. Passar o mouse sobre um ponto verde irá mostrar a imagem de rua naquele local.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: clique no mapa para abrir uma nova aba com a visualização de rua naquele local.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Camadas do mapa
+
+O botão de camadas de mapa permite que você alterne entre diferentes mapas e alternar entre sobreposições de mapa e categorias de pontos de interesse.
+
+- **Mapas base** são mapas de fundo que apresentam as características geográficas principais do mundo.
+  Apenas um mapa base pode ser exibio por vez.
+  Apenas um mapa base pode ser exibio por vez.
+- **Sobreposições** são camadas adicionais que podem ser exibidas no topo do basemap para fornecer informações complementares.
+- **Pontos de interesse** podem ser adicionados ao mapa para mostrar diferentes categorias de lugares, como lojas, restaurantes ou acomodações.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Passe o mouse por cima do mapa para mostrar a camada de <a href="https://hiking.waymarkedtrails.org" target="_blank">Trilhas demarcadas</a> sobre o mapa <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
+</div>
+
+Uma grande diversidade de mapas globais e locais está disponível no **gpx.rnmkcy.eu**, bem como uma seleção de pontos de interesse.
+Eles podem ser ativados nas [configurações de camadas do mapa](./menu/settings).
+
+Nessas configurações, você também pode gerenciar a opacidade das camadas.
+
+Para usuários avançados, é possível adicionar mapas e sobreposições personalizados, fornecendo <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, ou <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, ou ainda URLs com arquivos <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox JSON</a>.
diff --git a/website/src/lib/docs/pt-BR/menu.mdx b/website/src/lib/docs/pt-BR/menu.mdx
new file mode 100755
index 0000000..c67553e
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+O menu principal, localizado no topo da interface, fornece acesso a ações, opções e configurações, divididos em várias categorias, explicadas separadamente nas seções seguintes.
+
+<DocsNote>
+
+A maioria das ações do menu também poder ser executadas usando atalhos de teclado exibidos no menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/menu/edit.mdx b/website/src/lib/docs/pt-BR/menu/edit.mdx
new file mode 100755
index 0000000..a9a1276
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Ações de edição
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Ao contrário das ações de arquivo, as ações de edição podem potencialmente modificar o conteúdo dos arquivos selecionados.
+Além do mais, quando o layout vertical da lista de arquivos está habilitado (veja [Arquivos e estatísticas](../files-and-stats)), eles também podem ser aplicadas a [faixas, segmentos e pontos de interesse](../gpx).
+Portanto, nós iremos nos referir aos elementos que podem ser modificados por essas ações como **itens de arquivo**.
+Note que exceto as ações de desfazer e refazer, as ações de edição também estão acessíveis através do menu de contexto (botão direito) dos itens de arquivo.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Desfazer e refazer
+
+Usando esses botões, você pode desfazer e refazer as últimas ações realizadas.
+Isso se aplica para todas as ações da interface, mas não para as opções de visualização, configuração do aplicativo ou navegação no mapa.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Informações...
+
+Abrir a caixa de informação do arquivo atualmente selecionado, onde você pode ver e editar seu nome e descrição.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Aparência...
+
+Abrir a caixa de aparência onde você pode mudar a cor, opacidade e largura do arquivo selecionado no mapa.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Esconder/mostrar
+
+Alternar a visibilidade dos arquivos selecionados no mapa.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nova faixa
+
+Criar uma faixa no arquivo selecionado.
+
+<DocsNote>
+
+Esta ação só está disponível quando o layout vertical da lista de arquivos está habilitado.
+Além disso, a seleção deve ter um único arquivo.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Novo segmento
+
+Criar um segmento na faixa selecionada.
+
+<DocsNote>
+
+Esta ação só está disponível quando o layout vertical da lista de arquivos está habilitado.
+Além disso, a seleção deve ter uma única faixa.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Selecionar tudo
+
+Adicionar todos os itens na hierarquia atual à seleção.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Centralizar
+
+Centralizar o mapa nos itens do arquivo selecionado.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copiar
+
+Copiar os arquivos selecionados para a área de transferência.
+
+<DocsNote>
+
+Esta ação só está disponível quando o layout vertical da lista de arquivos está habilitado.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cortar
+
+Recortar os itens do arquivo selecionado para a área de transferência.
+
+<DocsNote>
+
+Esta ação só está disponível quando o layout vertical da lista de arquivos está habilitado.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Colar
+
+Cole os itens do arquivo da área de transferência para o nível de hierarquia atual se eles forem compatíveis com ele.
+
+<DocsNote>
+
+Esta ação só está disponível quando o layout vertical da lista de arquivos está habilitado.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Excluir
+
+Excluir os itens do arquivo selecionado.
diff --git a/website/src/lib/docs/pt-BR/menu/file.mdx b/website/src/lib/docs/pt-BR/menu/file.mdx
new file mode 100755
index 0000000..a6502e9
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: Ações do arquivo
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+O menu de ações de arquivo contém um conjunto de operações de arquivo bem auto-explicativo.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Novo
+
+Criar novo arquivo vazio.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Abrir...
+
+Abrir arquivos do seu computador. 
+
+<DocsNote>
+
+Você também pode arrastar e soltar arquivos diretamente do seu sistema de arquivos para a janela.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicar
+
+Criar uma cópia dos arquivos atualmente selecionados.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fechar
+
+Fechar os arquivos atualmente selecionados.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fechar todos
+
+Fechar todos os arquivos.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
+
+Abrir caixa de diálogo de exportação para o arquivo selecionado para seu computador.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar todos...
+
+Abrir caixa de diálogo de exportação para salvar todos os arquivos para seu computador.
+
+<DocsNote type="warning">
+
+Se o seu download não começar depois de clicar no botão de download, verifique as configurações do seu navegador para permitir os downloads de <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/menu/settings.mdx b/website/src/lib/docs/pt-BR/menu/settings.mdx
new file mode 100755
index 0000000..448cded
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Configurações
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Unidades de distância
+
+Altere as unidades usadas para exibir distâncias na interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Unidade de velocidade
+
+Altere as unidades usadas para exibir velocidades na interface.
+Você pode escolher entre distância por hora ou minutos por distância, que pode ser mais adequada para atividades em execução.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Unidade de temperatura
+
+Alterar as unidades usadas para exibir temperaturas na interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Idioma
+
+Altere o idioma usado na interface.
+
+<DocsNote>
+
+Você pode contribuir adicionando ou melhorando as traduções em nosso <a href="https://crowdin.com/project/gpxstudio" target="_blank">projeto do Crowdin</a>.
+Se quiser iniciar a tradução de uma nova língua, por favor <a href="#contact">entre em contato</a>.
+Qualquer ajuda é muito bem-vinda!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Tema
+
+Alterar o tema usado na interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Fonte do Street View
+
+Altere a fonte usada para o [controle de Street View](../map-controls).
+O padrão é <a href="https://www.mapillary.com" target="_blank">Mapilliary</a>, mas você também pode user <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Saiba mais sobre como utilizar o controle de Street View na [seção de controle de mapa](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Camadas do mapa...
+
+Abrir uma caixa de diálogo onde você pode ativar ou desativar camadas de mapa, adicionar camadas, alterar a opacidade das camadas e muito mais.
+Mais informações sobre as camadas do mapa podem ser encontradas na [seção de controles do mapa](../map-controls).
diff --git a/website/src/lib/docs/pt-BR/menu/view.mdx b/website/src/lib/docs/pt-BR/menu/view.mdx
new file mode 100755
index 0000000..6679d80
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: Ver opções
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Este menu fornece opções para reorganizar a interface e a visualização do mapa.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Perfil de elevação
+
+Oculte o perfil de elevação para liberar espaço para o mapa, ou mostre-o para inspecionar a seleção atual.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Lista de arquivos vertical
+
+Alternar entre um layout vertical e horizontal para a lista de arquivos.
+A [lista vertical de arquivos](../files-and-stats) é útil quando você tem muitos arquivos abertos, ou arquivos com múltiplas [faixas, segmentos ou pontos de interesse](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Mudar para mapa base anterior
+
+Altere o mapa base para o previamente selecionado através do [controle de camada de mapa](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Alternar sobreposições
+
+Alternar a visibilidade das camadas do mapa selecionadas através do [controle da camada do mapa](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Marcadores de distância
+
+Alterna a visibilidade dos marcadores de distância no mapa.
+Eles são exibidos para a seleção atual, como o [perfil de elevação](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Setas de direção
+
+Alterna a visibilidade das setas de direção no mapa.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Alternar 3D
+
+Entrar ou sair da visualização do mapa 3D.
+
+<DocsNote>
+
+Para controlar a orientação e a inclinação do mapa, você também pode arrastar o mapa enquanto segura <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/toolbar.mdx b/website/src/lib/docs/pt-BR/toolbar.mdx
new file mode 100755
index 0000000..acd8bae
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Barra de ferramentas
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+A barra de ferramentas está localizada ao lado esquero do do mapa e é o coração da aplicação, dando acesso as principais funcionalidades do **gpx.rnmkcy.eu**.
+Cada ferramenta é representada por um ícone e pode ser ativada clicando nela.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Como em [ações de edição](./menu/edit), a maioria das ferramentas pode ser aplicada a vários arquivos de uma única vez e para [faixas internas e segmentos](./gpx).
+
+As próximas seções descrevem cada ferramenta em detalhes.
diff --git a/website/src/lib/docs/pt-BR/toolbar/clean.mdx b/website/src/lib/docs/pt-BR/toolbar/clean.mdx
new file mode 100755
index 0000000..5f351f0
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Limpar
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Quando a ferramenta de limpeza é selecionada, arrastar o mapa criará uma seleção retangular.
+
+Dependendo das opções selecionadas na caixa de diálogo abaixo, clicar no botão excluir removerá os pontos GPS e/ou [pontos de interesse](../gpx) localizado dentro ou fora da seleção.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pt-BR/toolbar/elevation.mdx b/website/src/lib/docs/pt-BR/toolbar/elevation.mdx
new file mode 100755
index 0000000..26b75b1
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevação
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta ferramenta permite que você adicione dados de elevação a rastros e [pontos de interesse](../gpx), ou substituir os dados existentes.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Dados de elevação são fornecidos por <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Você pode aprender mais sobre sua origem e precisão na <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentação</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/toolbar/extract.mdx b/website/src/lib/docs/pt-BR/toolbar/extract.mdx
new file mode 100755
index 0000000..11ea070
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extrair
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta ferramenta permite que você extraia [faixas (ou segmentos)](../gpx) de arquivos (ou faixas) que contenham múltiplos deles.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Aplicar a ferramenta a um arquivo que contém várias faixas criará um novo arquivo para cada uma das trilhas que contém.
+Da mesma forma, aplicar a ferramenta a uma faixa que contém vários segmentos irá criar (no mesmo arquivo) uma nova faixa para cada um dos segmentos que ele contém.
+
+<DocsNote>
+
+Ao extrair as trilhas de um arquivo que contém <a href="../gpx">pontos de interesse</a>, a ferramenta atribuirá automaticamente cada ponto de interesse para a faixa à qual está mais próximo.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/toolbar/merge.mdx b/website/src/lib/docs/pt-BR/toolbar/merge.mdx
new file mode 100755
index 0000000..7d086ef
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Mesclar
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Para usar esta ferramenta, você precisa [selecionar](../files-and-stats) vários arquivos, [faixas ou segmentos](../gpx).
+
+- Se seu objetivo é criar um único rastro contínuo a partir da sua seleção, use a opção **Conecte os rastros** e valide.
+- A segunda opção pode ser usada para criar ou gerenciar arquivos com várias [faixas ou segmentos](../gpx).
+  Mesclar arquivos (ou faixas) resultará em um único arquivo (ou faixa) contendo todas as faixas (ou segmentos) da seleção.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pt-BR/toolbar/minify.mdx b/website/src/lib/docs/pt-BR/toolbar/minify.mdx
new file mode 100755
index 0000000..a8f7926
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minificar
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta ferramenta pode ser utilizada para reduzir o número de pontos GPS em um traço, o que pode ser útil para diminuir seu tamanho.
+
+Você pode ajustar a tolerância do algoritmo de simplificação usando o controle deslizante, e ver o número de pontos que serão mantidos, bem como o traço simplificado no mapa.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+O valor da tolerância representa a distância máxima permitida entre o traço original e o traço simplificado.
+Você pode ler mais sobre o algoritmo usado <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">aqui</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt-BR/toolbar/poi.mdx b/website/src/lib/docs/pt-BR/toolbar/poi.mdx
new file mode 100755
index 0000000..24a2b41
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Pontos de interesse
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Pontos de interesse](../gpx) podem ser adicionados aos arquivos GPX para marcar locais de interesse no mapa e exibi-los no seu dispositivo GPS.
+
+### Criando um ponto de interesse
+
+Para criar um ponto de interesse, preencha o formulário mostrado abaixo.
+Você pode escolher a localização do ponto de interesse clicando no mapa ou digitando as coordenadas manualmente.
+Valide o formulário quando terminar.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editando um ponto de interesse
+
+O formulário acima também pode ser usado para editar um ponto de interesse existente depois de selecioná-lo no mapa.
+Se você só precisar mover o ponto de interesse, você pode arrastá-lo para o local desejado.
diff --git a/website/src/lib/docs/pt-BR/toolbar/routing.mdx b/website/src/lib/docs/pt-BR/toolbar/routing.mdx
new file mode 100755
index 0000000..e0b3cb9
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Planejamento e edição de rotas
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+A ferramenta de planejamento e edição de rotas permite que você crie e edite rotas colocando ou movendo pontos de âncora no mapa.
+
+## Configurações
+
+Como mostrado abaixo, o diálogo de ferramentas contém algumas configurações para controlar o comportamento de roteamento.
+Você pode minimizar o diálogo para economizar espaço clicando em <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Roteamento
+
+Quando o roteamento estiver habilitado, pontos de ancoragem colocados ou movidos no mapa serão conectados por uma rota calculada na rede rodoviária do <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Desative o roteamento para conectar pontos de âncora com linhas retas.
+Esta configuração também pode ser alternada pressionando <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Atividade
+
+Selecione o tipo de atividade para adaptar as rotas.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Permitir estradas particulares
+
+Quando habilitado, o mecanismo de roteamento considerará estradas privadas durante as rotas de computação.
+
+<DocsNote type="warning">
+
+Só utilize esta opção se tiver conhecimento local da região e tiver autorização para utilizar as estradas em questão.
+
+</DocsNote>
+
+## Plotagem e edição de rotas
+
+Criar uma rota ou estender uma já existente é tão simples quanto clicar no mapa para colocar um novo ponto de âncora.
+
+Você também pode arrastar um ponto de âncora existente para re-rotear o segmento conectando-o com os pontos de âncora anterior e posterior.
+
+Adicionalmente, novos pontos de âncora podem ser inseridos entre os existentes passando o mouse sobre o segmento que os conecta e arrastando o ponto de âncora que parece para a localização desejada.
+Em dispositivos com tela sensível ao toque, você pode tocar no segmento para inserir um novo ponto de âncora.
+
+<DocsNote>
+
+Ao editar arquivos GPX importados, um conjunto inicial de pontos de âncora é criado automaticamente.
+Para facilitar o processo de edição, quanto mais o mapa está ampliado, mais pontos de âncora são exibidos.
+Isto permite que o caminho seja editado em diferentes níveis de detalhes.
+
+</DocsNote>
+
+Finalmente, você pode excluir pontos de âncora clicando neles e selecionando <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Apagar</button> do menu de contexto.
+
+<DocsImage src="tools/routing" alt="Pontos de âncora permitem que você edite uma rota facilmente." />
+
+## Ferramentas adicionais
+
+As seguintes ferramentas automatizam algumas operações comuns de modificação de rota.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Inverter
+
+Inverter a direção da rota.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Voltar para o início
+
+Conecte o último ponto da rota com o ponto de partida, usando as configurações de roteamento escolhidas.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Ida e volta
+
+Retorne ao ponto de partida pela mesma rota.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Muda o início do laço
+
+Quando o ponto final da rota é suficientemente próximo do início, você pode alterar o início do laço clicando em qualquer ponto de âncora e selecionando <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Começar laço aqui</button> no menu de contexto.
diff --git a/website/src/lib/docs/pt-BR/toolbar/scissors.mdx b/website/src/lib/docs/pt-BR/toolbar/scissors.mdx
new file mode 100755
index 0000000..b7df9f6
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Cortar e dividir
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Cortar
+
+Usando o controle deslizante, você pode definir a parte do rastro selecionado que você deseja manter.
+Os marcadores de início e fim no mapa e o [perfil de estatísticas e elevação](../files-and-stats) são atualizados em tempo real para refletir a seleção.
+Alternativamente, você pode arrastar um retângulo de seleção diretamente no perfil de elevação.
+Valide a seleção quando você estiver satisfeito com o resultado.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Dividir
+
+Para dividir o rastro selecionado em duas partes, clique em um dos marcadores de divisão exibidos ao longo do traço.
+Para dividir em um ponto específico de sua escolha, passe o mouse sobre o rastro no mapa.
+Uma tesoura irá aparecer na posição do cursor, mostrando que você pode dividir o rastro naquele momento.
+
+Você pode optar por dividir o rastro em dois arquivos GPX, ou para manter as partes divididas no mesmo arquivo como [faixas ou segmentos](../gpx).
+
+<DocsImage src="tools/split" alt="Passando o mouse sobre o rastro selecionado transforma seu cursor em tesoura." />
diff --git a/website/src/lib/docs/pt-BR/toolbar/time.mdx b/website/src/lib/docs/pt-BR/toolbar/time.mdx
new file mode 100755
index 0000000..a4df73e
--- /dev/null
+++ b/website/src/lib/docs/pt-BR/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Tempo
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Esta ferramenta permite alterar ou adicionar tempos de tempo para traços.
+Você precisa simplesmente usar o formulário mostrado abaixo e validá-lo quando terminar.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Ao editar a velocidade, o tempo de movimento é adaptado no formulário, e vice-versa.
+Da mesma forma, quando você editar a hora de início, a hora de término é atualizada para manter a mesma duração total e vice-versa.
+
+<DocsNote>
+
+Ao usar esta ferramenta com carimbos de tempo existentes, alterar o tempo ou velocidade simplesmente transferir, alongar ou compactá-los de acordo.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/faq.mdx b/website/src/lib/docs/pt/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/pt/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/files-and-stats.mdx b/website/src/lib/docs/pt/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/pt/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/pt/getting-started.mdx b/website/src/lib/docs/pt/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/pt/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/pt/gpx.mdx b/website/src/lib/docs/pt/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/pt/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/pt/home/funding.mdx b/website/src/lib/docs/pt/home/funding.mdx
new file mode 100755
index 0000000..4f95f45
--- /dev/null
+++ b/website/src/lib/docs/pt/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ajude a manter o site gratuito (e sem anúncios)
+
+Cada vez que você adiciona ou move pontos de GPS, nosso servidor calcula a melhor rota no mapa.
+Nos também usamos as APIs do <a href="https://mapbox.com" target="_blank">Mapbox</a> para mostrar mapas bonitos, pegar dados de elevação e permitir que você busque por lugares.
+
+Infelizmente, isso é caro.
+Se você gosta dessa ferramenta e acha ela valiosa, considere fazer uma pequena doação para ajudar a manter o site grátis e sem propagandas.
+
+Muito obrigado pelo seu apoio! ❤️
diff --git a/website/src/lib/docs/pt/home/mapbox.mdx b/website/src/lib/docs/pt/home/mapbox.mdx
new file mode 100755
index 0000000..7f35e20
--- /dev/null
+++ b/website/src/lib/docs/pt/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox é uma empresa que fornece alguns dos belos mapas desse site.
+Eles também desenvolvem o <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">mecanismo de mapa</a> que alimenta **gpx.rnmkcy.eu**.
+
+Somos incrivelmente afortunados e gratos de ser parte do programa de <a href="https://mapbox.com/community" target="_blank">Comunidade</a>, que apoia instituições educacionais, sem fins lucrativos e de grande impacto positivo.
+Essa parceria permite **gpx.rnmkcy.eu** se beneficiar de descontos no uso das ferramentas do Mapbox, contribuindo para a viabilidade financeira do projeto e nos permite oferecer a melhor experiência possível de usuário.
diff --git a/website/src/lib/docs/pt/home/translation.mdx b/website/src/lib/docs/pt/home/translation.mdx
new file mode 100755
index 0000000..5144cd4
--- /dev/null
+++ b/website/src/lib/docs/pt/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Tradução
+
+O site é traduzido por voluntários usando uma plataforma de tradução colaborativa.
+Você pode contribuir adicionando ou melhorando as traduções em nosso <a href="https://crowdin.com/project/gpxstudio" target="_blank">projeto do Crowdin</a>.
+
+Se quiser iniciar a tradução de uma nova língua, por favor <a href="#contact">entre em contato</a>.
+
+Qualquer ajuda é muito bem-vinda!
diff --git a/website/src/lib/docs/pt/integration.mdx b/website/src/lib/docs/pt/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/pt/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/pt/map-controls.mdx b/website/src/lib/docs/pt/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/pt/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/pt/menu.mdx b/website/src/lib/docs/pt/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/pt/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/menu/edit.mdx b/website/src/lib/docs/pt/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/pt/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/pt/menu/file.mdx b/website/src/lib/docs/pt/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/pt/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/menu/settings.mdx b/website/src/lib/docs/pt/menu/settings.mdx
new file mode 100755
index 0000000..512f371
--- /dev/null
+++ b/website/src/lib/docs/pt/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Você pode contribuir adicionando ou melhorando as traduções em nosso <a href="https://crowdin.com/project/gpxstudio" target="_blank">projeto do Crowdin</a>.
+Se quiser iniciar a tradução de uma nova língua, por favor <a href="#contact">entre em contato</a>.
+Qualquer ajuda é muito bem-vinda!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/pt/menu/view.mdx b/website/src/lib/docs/pt/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/pt/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/toolbar.mdx b/website/src/lib/docs/pt/toolbar.mdx
new file mode 100755
index 0000000..fb3aabe
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+A barra de ferramentas está localizada do lado esquerdo do mapa sendo o coração da aplicação, dando acesso as principais funcionalidades do **gpx.rnmkcy.eu**.
+Cada ferramenta é representada por um ícone e pode ser ativado ao clicar sobre ele.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Assim como [ações de edição](./menu/edit), a maioria das ferramentas pode ser aplicada a vários arquivos de uma só vez e também [faixas e segmentos](./gpx).
+
+As próximas seções descrevem cada ferramenta em detalhes.
diff --git a/website/src/lib/docs/pt/toolbar/clean.mdx b/website/src/lib/docs/pt/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pt/toolbar/elevation.mdx b/website/src/lib/docs/pt/toolbar/elevation.mdx
new file mode 100755
index 0000000..3464951
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevação
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/toolbar/extract.mdx b/website/src/lib/docs/pt/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/toolbar/merge.mdx b/website/src/lib/docs/pt/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/pt/toolbar/minify.mdx b/website/src/lib/docs/pt/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/pt/toolbar/poi.mdx b/website/src/lib/docs/pt/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/pt/toolbar/routing.mdx b/website/src/lib/docs/pt/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/pt/toolbar/scissors.mdx b/website/src/lib/docs/pt/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/pt/toolbar/time.mdx b/website/src/lib/docs/pt/toolbar/time.mdx
new file mode 100755
index 0000000..5aaff07
--- /dev/null
+++ b/website/src/lib/docs/pt/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Tempo
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/faq.mdx b/website/src/lib/docs/ro/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/ro/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/files-and-stats.mdx b/website/src/lib/docs/ro/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/ro/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/ro/getting-started.mdx b/website/src/lib/docs/ro/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/ro/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/ro/gpx.mdx b/website/src/lib/docs/ro/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/ro/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/ro/home/funding.mdx b/website/src/lib/docs/ro/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/ro/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/ro/home/mapbox.mdx b/website/src/lib/docs/ro/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/ro/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/ro/home/translation.mdx b/website/src/lib/docs/ro/home/translation.mdx
new file mode 100755
index 0000000..909df9a
--- /dev/null
+++ b/website/src/lib/docs/ro/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Orice ajutor este foarte apreciat!
diff --git a/website/src/lib/docs/ro/integration.mdx b/website/src/lib/docs/ro/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/ro/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/ro/map-controls.mdx b/website/src/lib/docs/ro/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/ro/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/ro/menu.mdx b/website/src/lib/docs/ro/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/ro/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/menu/edit.mdx b/website/src/lib/docs/ro/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/ro/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/ro/menu/file.mdx b/website/src/lib/docs/ro/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/ro/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/menu/settings.mdx b/website/src/lib/docs/ro/menu/settings.mdx
new file mode 100755
index 0000000..c8b2fd8
--- /dev/null
+++ b/website/src/lib/docs/ro/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Orice ajutor este foarte apreciat!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/ro/menu/view.mdx b/website/src/lib/docs/ro/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/ro/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/toolbar.mdx b/website/src/lib/docs/ro/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/ro/toolbar/clean.mdx b/website/src/lib/docs/ro/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ro/toolbar/elevation.mdx b/website/src/lib/docs/ro/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/toolbar/extract.mdx b/website/src/lib/docs/ro/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/toolbar/merge.mdx b/website/src/lib/docs/ro/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ro/toolbar/minify.mdx b/website/src/lib/docs/ro/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ro/toolbar/poi.mdx b/website/src/lib/docs/ro/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/ro/toolbar/routing.mdx b/website/src/lib/docs/ro/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/ro/toolbar/scissors.mdx b/website/src/lib/docs/ro/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/ro/toolbar/time.mdx b/website/src/lib/docs/ro/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/ro/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/faq.mdx b/website/src/lib/docs/ru/faq.mdx
new file mode 100755
index 0000000..2267f57
--- /dev/null
+++ b/website/src/lib/docs/ru/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: Ответы на частые вопросы
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Нужно ли мне сделать пожертвование для использования веб-сайта?
+
+Нет.
+Сайт бесплатный для использования и всегда будет (пока он является финансово устойчив).
+Тем не менее, пожертвования ценятся и помогают поддерживать работу веб-сайта.
+
+### Почему выбран этот маршрут, а не другой? _Или_ как я могу добавить что-нибудь на карту?
+
+**gpx.rnmkcy.eu** использует данные от <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, который является открытой и совместной мировой картой.
+Это означает, что вы можете внести свой вклад в карту, добавив или редактировав данные на OpenStreetMap.
+
+Если вы никогда не вносили вклад в OpenStreetMap раньше, то вы можете предложить изменения:
+
+1. Перейдите к месту, где вы хотите добавить или редактировать данные на <a href="https://www.openstreetmap.org/" target="_blank">карте</a>.
+2. Используйте инструмент <button>Запросить объекты</button> справа, чтобы просмотреть существующие данные.
+3. Щелкните правой кнопкой мыши на местоположении и выберите <button> Добавить сюда заметку </button>.
+4. Объясните, что неверно или отсутствует в заметке, и нажмите <button>Добавить заметку</button>, чтобы отправить её.
+
+Кто-то более опытный с OpenStreetMap затем рассмотрит вашу заметку и внесет необходимые изменения.
+
+<DocsNote>
+
+Более подробную информацию о том, как внести вклад в OpenStreetMap, можно найти <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">здесь</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/files-and-stats.mdx b/website/src/lib/docs/ru/files-and-stats.mdx
new file mode 100755
index 0000000..b8903c0
--- /dev/null
+++ b/website/src/lib/docs/ru/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Файлы и статистика
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## Список файлов
+
+После того как вы [откроете](./menu/file) файлы, они будут отображаться в виде вкладок в списке файлов, расположенном внизу карты.
+Вы можете изменить их порядок, перетаскивая вкладки.
+И когда открыто множество файлов, вы можете прокручивать список вкладок, чтобы перемещаться между ними.
+
+<DocsNote>
+
+При использовании мыши, для горизонтальной прокрутки необходимо удерживать клавишу <kbd>Shift</kbd>.
+
+</DocsNote>
+
+### Выбор файла
+
+Нажав на вкладку, вы можете переключаться между файлами, чтобы просмотреть их статистику и применить [действия редактирования](./menu/edit) и [инструменты](./toolbar) к ним.
+Удерживая клавишу <kbd>Ctrl/Cmd</kbd>, вы можете добавить файлы в выборку или удалить их, а удерживая <kbd>Shift</kbd>, вы можете выбрать диапазон файлов.
+Большинство [действий редактирования](./menu/edit) и [инструментов](./toolbar) можно применять к нескольким файлам одновременно.
+
+<DocsNote>
+
+Вы также можете перемещаться по файлам с помощью стрелок на клавиатуре и использовать <kbd>Shift</kbd>, чтобы добавлять файлы в выборку.
+
+</DocsNote>
+
+### Редактировать действия
+
+Щелкнув правой кнопкой мыши на вкладке файла, вы можете получить доступ к тем же действиям, что и в [меню редактирования](./menu/edit).
+
+### Вертикальное расположение
+
+Как упоминалось в разделе [варианты просмотра](./menu/view), вы можете переключаться между горизонтальным и вертикальным макетом для списка файлов.
+Вертикальный список полезен при открытии большого количества файлов или нескольких файлов с [треками, звеньями или интересными точками](./gpx).
+Действительно, этот макет позволяет вам просматривать содержимое файлов через сворачиваемые секции.
+
+Вы также можете применять [действия редактирования](./menu/edit) и [инструменты](./toolbar) к внутренним элементам файла.
+Кроме того, вы можете перетаскивать внутренние элементы, чтобы изменить их порядок, перемещать их в иерархии или даже в другой файл.
+
+<DocsNote>
+
+Размер списка файлов можно настроить, перетаскивая разделитель между картой и списком файлов.
+
+</DocsNote>
+
+## Профиль и статистика высот
+
+Внизу интерфейса вы можете найти профиль высоты и статистику для текущего выбора.
+
+<DocsNote>
+
+Размер профиля высоты можно настроить, перетаскивая разделитель между картой и профилем высоты.
+
+</DocsNote>
+
+### Интерактивная статистика
+
+При наведении курсора на профиль высоты появится подсказка с данными статистики в позиции курсора.
+
+Чтобы получить статистику для конкретного сегмента профиля высоты, вы можете перетащить выделяющий прямоугольник на профиле.
+Нажмите на профиль, чтобы сбросить выделение.
+
+Вы также можете использовать колесо мыши для увеличения и уменьшения масштаба профиля высоты, а перемещаться влево и вправо, перетаскивая профиль, удерживая клавишу <kbd>Shift</kbd>.
+
+### Дополнительные данные
+
+С помощью кнопок справа от профиля высоты можно изменить цвет профиля высоты:
+
+- **угол наклона** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> информация, вычисленная на основе данных о высоте, или
+- **поверхность** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> данные, полученные из тегов <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> по ключу <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a>.
+  Это доступно только для файлов, созданных с помощью **gpx.rnmkcy.eu**.
+
+Если ваш выбор включает это, вы также можете визуализировать: **скорость** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **частоту сердечных сокращений** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **каденцию** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **температуру** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, и **мощность** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> данные на профиле высоты.
diff --git a/website/src/lib/docs/ru/getting-started.mdx b/website/src/lib/docs/ru/getting-started.mdx
new file mode 100755
index 0000000..0aced7c
--- /dev/null
+++ b/website/src/lib/docs/ru/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Начало работы
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Добро пожаловать в официальное руководство **gpx.rnmkcy.eu**!
+Это руководство проведет вас через все компоненты и инструменты интерфейса, помогая стать опытным пользователем приложения.
+
+<DocsImage src="getting-started/interface" alt="Интерфейс gpx.rnmkcy.eu." />
+
+Как показано на скриншоте выше, интерфейс разделен на четыре основных раздела, упорядоченных вокруг карты. 
+Перед тем как погрузиться в подробности каждого раздела, давайте посмотрим на интерфейс.
+
+## Меню
+
+В верхней части интерфейса вы найдете [главное меню](./menu).
+Здесь вы можете получить доступ к общим действиям, таким как открытие, закрытие и экспорт файлов, отмена действий и изменение настроек приложения.
+
+## Файлы и статистика
+
+В нижней части интерфейса вы найдете список файлов, которые в настоящее время открыты в приложении.
+Вы можете нажать на файл, чтобы выбрать его и отобразить его статистику под списком.
+В [выделенном разделе](./files-and-stats) мы объясним, как выбрать несколько файлов и переключиться на вертикальную раскладку для расширенного управления файлами.
+
+## Панель инструментов
+
+Слева в интерфейсе вы найдете [панель инструментов](./toolbar), она содержит все инструменты, которые вы можете использовать для редактирования своих файлов.
+
+## Управление картой
+
+Наконец, в правой части интерфейса вы найдете [управление картой](./map-controls).
+Эти элементы управления позволяют перемещаться по карте, увеличивать и уменьшать масштаб и переключаться между различными стилями карты.
diff --git a/website/src/lib/docs/ru/gpx.mdx b/website/src/lib/docs/ru/gpx.mdx
new file mode 100755
index 0000000..98e64d3
--- /dev/null
+++ b/website/src/lib/docs/ru/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: Формат GPX файла
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+Файл <a href="https://www.topografix.com/gpx.asp" target="_blank">с GPX форматом</a> является открытым стандартом для обмена данными GPS между приложениями и GPS устройствами.
+В сущности, он состоит из серии GPS-точек, кодирующих один или несколько GPS-треков, а также точки интереса.
+
+GPX-файлы могут также содержать метаданные, из которых поля **имя** и **описание** являются наиболее полезными для пользователей.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Треки, сегменты и GPS точки
+
+Как упоминалось выше, файл GPX может содержать несколько GPS треков.
+Они организованы в иерархической структуре, с треками на верхнем уровне.
+
+- **Трек** состоит из последовательности несоединенных сегментов.
+  Кроме того, он может содержать метаданные, такие как **имя**, **описание** и **свойства внешнего вида**.
+- **сегмент** — это последовательность точек GPS, образующих непрерывный путь.
+- **GPS точка** — это местоположение с заданной широтой и долготой, а также, при необходимости, с временной меткой и высотой.
+  Некоторые устройства также хранят дополнительную информацию, такую как сердечный ритм, каденс, температура и мощность.
+
+В большинстве случаев файлы GPX содержат один трек с одним сегментом.
+Однако описанная выше иерархия позволяет использовать более сложные варианты использования, такие как планирование многодневных поездок с несколькими вариантами на каждый день.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Точки интереса
+
+**Точки интереса** (технически называемые _путевые точки_) представляют интересные места для показа на GPS устройстве или на цифровой карте.
+
+Помимо координат, точка интереса может иметь **имя** и **описание**.
diff --git a/website/src/lib/docs/ru/home/funding.mdx b/website/src/lib/docs/ru/home/funding.mdx
new file mode 100755
index 0000000..cb0f6be
--- /dev/null
+++ b/website/src/lib/docs/ru/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Помогите сделать сайт бесплатным (и без рекламы)
+
+Каждый раз при добавлении или перемещении точек GPS наши серверы рассчитывают наилучший маршрут по дорожной сети.
+Мы также используем API от <a href="https://mapbox.com" target="_blank">Mapbox</a> для отображения красивых карт, получения данных о высоте и возможности поиска мест.
+
+К сожалению, это дорого.
+Если вам нравится этот инструмент и вы находите его ценным, пожалуйста, сделайте небольшое пожертвование, чтобы сделать сайт бесплатным и без рекламы.
+
+Большое спасибо за вашу помощь! ❤️
diff --git a/website/src/lib/docs/ru/home/mapbox.mdx b/website/src/lib/docs/ru/home/mapbox.mdx
new file mode 100755
index 0000000..01494d4
--- /dev/null
+++ b/website/src/lib/docs/ru/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox — это компания, которая предоставляет красивые карты на этом сайте.
+Они также разрабатывают <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">движок карт</a>, который обеспечивает работу gpx.rnmkcy.eu.
+
+Мы невероятно счастливы и благодарны за то, что являемся частью их <a href="https://mapbox.com/community" target="_blank">Программы сообщества</a>, которая поддерживает некоммерческие организации, образовательные учреждения и организации, создающие позитивное воздействие.
+Это партнерство позволяет **gpx.rnmkcy.eu** получать доступ к инструментам Mapbox по сниженным ценам, что значительно способствует финансовой устойчивости проекта и позволяет нам предложить лучший пользовательский опыт.
diff --git a/website/src/lib/docs/ru/home/translation.mdx b/website/src/lib/docs/ru/home/translation.mdx
new file mode 100755
index 0000000..ec2e1e5
--- /dev/null
+++ b/website/src/lib/docs/ru/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Перевод
+
+Перевод сайта осуществляется добровольцами на платформе совместного перевода.
+Вы можете внести свой вклад, добавив или улучшив переводы в нашем проекте <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin</a>.
+
+Если вы хотите начать перевод на новый язык, пожалуйста, <a href="#contact">свяжитесь с</a>.
+
+Любая помощь очень ценится!
diff --git a/website/src/lib/docs/ru/integration.mdx b/website/src/lib/docs/ru/integration.mdx
new file mode 100755
index 0000000..d3383df
--- /dev/null
+++ b/website/src/lib/docs/ru/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Интеграция
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+Вы можете использовать **gpx.rnmkcy.eu** для создания карт, отображающих ваши GPX-файлы, и встроить их на ваш сайт.
+
+Все, что вам нужно это:
+
+1. <a href="https://account.mapbox.com/auth/signup" target="_blank">Токен доступа Mapbox</a> для загрузки карты и
+2. GPX файлы, размещенные на вашем сервере или на Google Drive, или доступны по URL.
+
+Затем вы можете поиграть с конфигуратором ниже, чтобы настроить свою карту и сгенерировать соответствующий HTML-код.
+
+<DocsNote type="warning">
+
+Вам потребуется настроить <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">заголовки CORS (Cross-Origin Resource Sharing)</a> на вашем сервере, чтобы разрешить <b>gpx.rnmkcy.eu</b> загружать ваши GPX-файлы.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/ru/map-controls.mdx b/website/src/lib/docs/ru/map-controls.mdx
new file mode 100755
index 0000000..36adf77
--- /dev/null
+++ b/website/src/lib/docs/ru/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Управление картой
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+Эти элементы управления позволяют перемещаться по карте, увеличивать и уменьшать масштаб и переключаться между различными стилями карты.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Карта навигации
+
+Элементы управления вверху позволяют увеличивать <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> и уменьшать масштаб <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, а также изменять ориентацию и наклон карты <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+Чтобы управлять ориентацией и наклоном карты, вы также можете перетаскивать карту, удерживая <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Панель поиска
+
+Вы можете использовать строку поиска, чтобы найти адрес и перейти к нему на карте.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Кнопка определения местоположения
+
+Кнопка "Найти" центрирует карту на вашем текущем местоположении.
+
+<DocsNote>
+
+Это работает только в том случае, если вы разрешили вашему браузеру и <b>gpx.rnmkcy.eu</b> доступ к вашему местоположению.
+
+</DocsNote>
+
+### Просмотр улиц
+
+Эта кнопка может быть использована для включения режима просмотра улиц на карте.
+В зависимости от выбранного источника просмотра улиц в [настройках](./menu/settings), доступ к изображениям просмотра улиц может осуществляться по-разному.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: просмотр улиц будет отображаться зелеными линиями на карте. При достаточном увеличении на карте зеленые точки будут показывать точные места, где доступны изображения просмотра улиц. Наведите курсор на зеленую точку на изображении улиц в этом месте.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: нажмите на карту, чтобы открыть новую вкладку с изображением улицы в этом месте.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Слои карты
+
+Кнопка слоев карты позволяет переключаться между различными базовыми картами, а также включать и выключать наложения карты и категории объектов интереса.
+
+- **Основные карты** - это фоновые карты, в которых представлены основные географические особенности мира.
+  В зависимости от их назначения, базовые карты имеют разные стили и уровни детализации.
+  В один момент может быть отображена только одна базовая карта.
+- **Наложения** - это дополнительные слои, которые могут быть отображены поверх базы данных для предоставления дополнительной информации.
+- **Точки интереса** можно добавить на карту для показа различных категорий мест, таких как магазины, рестораны или размещения.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Наведите указатель мыши на карту, чтобы отобразить наложение <a href="https://hiking.waymarkedtrails.org" target="_blank">Пешеходные маршруты с метками</a> поверх базовой карты <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
+</div>
+
+В **gpx.rnmkcy.eu** доступна большая коллекция глобальных и локальных базовых карт и наложений, а также выбор категорий объектов интереса.
+Они могут быть включены в [диалоге настроек слоя карты](./menu/settings).
+
+В этих настройках вы также можете управлять непрозрачностью наложений.
+
+Для продвинутых пользователей возможно добавление пользовательских базовых карт и наложений, предоставив<a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/ru/menu.mdx b/website/src/lib/docs/ru/menu.mdx
new file mode 100755
index 0000000..0e49380
--- /dev/null
+++ b/website/src/lib/docs/ru/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Меню
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Главное меню, расположенное в верхней части интерфейса, предоставляет доступ к действиям, параметрам и настройкам, и разделены на несколько категорий, каждая из которых подробно объясняется в следующих разделах.
+
+<DocsNote>
+
+Большинство действий в меню также можно выполнять с помощью сочетаний клавиш, которые отображаются в меню.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/menu/edit.mdx b/website/src/lib/docs/ru/menu/edit.mdx
new file mode 100755
index 0000000..06d1552
--- /dev/null
+++ b/website/src/lib/docs/ru/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Редактировать действия
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/ru/menu/file.mdx b/website/src/lib/docs/ru/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/ru/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/menu/settings.mdx b/website/src/lib/docs/ru/menu/settings.mdx
new file mode 100755
index 0000000..1a76985
--- /dev/null
+++ b/website/src/lib/docs/ru/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Вы можете внести свой вклад, добавив или улучшив переводы в нашем проекте <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin</a>.
+Если вы хотите начать перевод на новый язык, пожалуйста, <a href="#contact">свяжитесь с</a>.
+Любая помощь очень ценится!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Слои карты...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/ru/menu/view.mdx b/website/src/lib/docs/ru/menu/view.mdx
new file mode 100755
index 0000000..683290c
--- /dev/null
+++ b/website/src/lib/docs/ru/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+Чтобы управлять ориентацией и наклоном карты, вы также можете перетаскивать карту, удерживая <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/toolbar.mdx b/website/src/lib/docs/ru/toolbar.mdx
new file mode 100755
index 0000000..82c2cf3
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Панель инструментов
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+Панель инструментов расположена слева от карты и является ключевым элементом приложения, так как обеспечивает доступ к основным функциям **gpx.rnmkcy.eu**.
+Каждый инструмент отображается в виде значка и активируется простым нажатием на него.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+Как и в случае с [редактированием действий](./menu/edit), большинство инструментов можно применять сразу к нескольким файлам, а также к [внутренним трекам и сегментам](./gpx).
+
+В следующих разделах подробно описан каждый инструмент.
diff --git a/website/src/lib/docs/ru/toolbar/clean.mdx b/website/src/lib/docs/ru/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ru/toolbar/elevation.mdx b/website/src/lib/docs/ru/toolbar/elevation.mdx
new file mode 100755
index 0000000..56d33cd
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Высота
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Этот инструмент позволяет добавлять данные о высоте к трекам и [точкам интереса](../gpx) или заменять существующие данные.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Данные о высотах предоставляются <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Вы можете узнать больше о его происхождении и точности в <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">документации</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/toolbar/extract.mdx b/website/src/lib/docs/ru/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/toolbar/merge.mdx b/website/src/lib/docs/ru/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/ru/toolbar/minify.mdx b/website/src/lib/docs/ru/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/ru/toolbar/poi.mdx b/website/src/lib/docs/ru/toolbar/poi.mdx
new file mode 100755
index 0000000..cbd5b49
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Точки интереса
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Точки интереса](../gpx) могут быть добавлены в GPX файлы, чтобы отметить интересные места на карте и отобразить их на вашем GPS устройстве.
+
+### Создать точку интереса
+
+Для создания точки интереса заполните приведенную ниже форму.
+Вы можете выбрать местоположение интересующей вас точки, щелкнув на карте или введя координаты вручную.
+Подтвердите форму, когда закончите.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Редактирование точки интереса
+
+Вышеприведенная форма также может быть использована для редактирования существующей точки интереса после ее выбора на карте.
+Если вам нужно только переместить интересующую вас точку, вы можете перетащить ее в нужное место.
diff --git a/website/src/lib/docs/ru/toolbar/routing.mdx b/website/src/lib/docs/ru/toolbar/routing.mdx
new file mode 100755
index 0000000..1c4b69e
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Планирование и редактирование маршрута
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Инструмент для планирования и редактирования маршрутов позволяет создавать и редактировать маршруты, размещая или перемещая точки привязки на карте.
+
+## Settings
+
+Как показано ниже, диалоговое окно инструмента содержит несколько настроек для управления поведением маршрутизации.
+Вы можете минимизировать диалоговое окно для сохранения места, нажав <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Маршрутизация
+
+Когда маршрутизация включена, точки привязки, размещенные или перемещенные на карте, будут соединены маршрутом, рассчитанным на дорожной сети <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Отключите маршрутизацию, чтобы соединить точки привязки прямыми линиями.
+Эту настройку также можно переключить, нажав <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Активность
+
+Выберите тип активности, чтобы настроить маршруты под него.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Разрешить частные дороги
+
+Когда включено, движок маршрутизации будет рассматривать частные дороги при вычислении маршрутов.
+
+<DocsNote type="warning">
+
+Используйте эту опцию только в том случае, если вы знаете местность и имеете разрешение на использование соответствующих дорог.
+
+</DocsNote>
+
+## Создание и редактирование маршрутов
+
+Создать маршрут или продлить существующий так же просто, как щелкнуть на карте, чтобы разместить новую точку привязки.
+
+Вы также можете перетащить существующую точку привязки, чтобы изменить маршрут сегмента, соединяющего её с предыдущей и следующей точками привязки.
+
+Кроме того, новые точки привязки можно вставить между существующими, наведя курсор на сегмент, соединяющий их, и перетащив появившуюся точку привязки в желаемое место.
+На сенсорных устройствах вы можете нажать на сегмент, чтобы вставить новую точку привязки.
+
+<DocsNote>
+
+При редактировании импортированных файлов GPX автоматически создается исходный набор точек привязки.
+Чтобы облегчить процесс редактирования, чем больше масштабируется карта, тем больше точек привязки.
+Это позволяет редактировать маршрут на разных уровнях детализации.
+
+</DocsNote>
+
+Наконец, вы можете удалить точки привязки, нажав на них и выбрав <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Удалить</button> из контекстного меню.
+
+<DocsImage src="tools/routing" alt="Точки привязки позволяют легко редактировать маршрут." />
+
+## Дополнительные инструменты
+
+Следующие инструменты автоматизируют некоторые общие модификации маршрута.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Обратный
+
+Изменить направление маршрута на противоположное.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Вернуться к началу
+
+Подсоедините последнюю точку маршрута к начальной точке, используя выбранные параметры маршрутизации.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Круговой маршрут
+
+Вернуться к начальной точке тем же маршрутом.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Изменить начало кольца
+
+Когда конечная точка маршрута достаточно близка к началу, вы можете изменить начало петли, щелкнув на любую точку привязки и выбрав <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Начать петлю здесь</button> из контекстного меню.
diff --git a/website/src/lib/docs/ru/toolbar/scissors.mdx b/website/src/lib/docs/ru/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/ru/toolbar/time.mdx b/website/src/lib/docs/ru/toolbar/time.mdx
new file mode 100755
index 0000000..46df015
--- /dev/null
+++ b/website/src/lib/docs/ru/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Время
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+Этот инструмент позволяет вам изменять или добавлять временные метки для трека.
+Вам просто нужно использовать форму, показанную ниже, и подтвердить её после завершения.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+При изменении скорости, время движения адаптируется соответствующим образом, и наоборот.
+Аналогично, когда вы редактируете время начала, то время окончания обновляется, чтобы сохранить такую же продолжительность и наоборот.
+
+<DocsNote>
+
+При использовании этого инструмента с уже существующими временными метками изменение времени или скорости просто сдвинет, растянет или сожмет их соответствующим образом.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/faq.mdx b/website/src/lib/docs/sr/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/sr/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/files-and-stats.mdx b/website/src/lib/docs/sr/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/sr/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/sr/getting-started.mdx b/website/src/lib/docs/sr/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/sr/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/sr/gpx.mdx b/website/src/lib/docs/sr/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/sr/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/sr/home/funding.mdx b/website/src/lib/docs/sr/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/sr/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/sr/home/mapbox.mdx b/website/src/lib/docs/sr/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/sr/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/sr/home/translation.mdx b/website/src/lib/docs/sr/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/sr/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/sr/integration.mdx b/website/src/lib/docs/sr/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/sr/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/sr/map-controls.mdx b/website/src/lib/docs/sr/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/sr/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/sr/menu.mdx b/website/src/lib/docs/sr/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/sr/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/menu/edit.mdx b/website/src/lib/docs/sr/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/sr/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/sr/menu/file.mdx b/website/src/lib/docs/sr/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/sr/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/menu/settings.mdx b/website/src/lib/docs/sr/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/sr/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/sr/menu/view.mdx b/website/src/lib/docs/sr/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/sr/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/toolbar.mdx b/website/src/lib/docs/sr/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/sr/toolbar/clean.mdx b/website/src/lib/docs/sr/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/sr/toolbar/elevation.mdx b/website/src/lib/docs/sr/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/toolbar/extract.mdx b/website/src/lib/docs/sr/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/toolbar/merge.mdx b/website/src/lib/docs/sr/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/sr/toolbar/minify.mdx b/website/src/lib/docs/sr/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sr/toolbar/poi.mdx b/website/src/lib/docs/sr/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/sr/toolbar/routing.mdx b/website/src/lib/docs/sr/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/sr/toolbar/scissors.mdx b/website/src/lib/docs/sr/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/sr/toolbar/time.mdx b/website/src/lib/docs/sr/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/sr/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/faq.mdx b/website/src/lib/docs/sv/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/sv/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/files-and-stats.mdx b/website/src/lib/docs/sv/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/sv/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/sv/getting-started.mdx b/website/src/lib/docs/sv/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/sv/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/sv/gpx.mdx b/website/src/lib/docs/sv/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/sv/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/sv/home/funding.mdx b/website/src/lib/docs/sv/home/funding.mdx
new file mode 100755
index 0000000..9a152c7
--- /dev/null
+++ b/website/src/lib/docs/sv/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Hjälp till att hålla webbplatsen gratis (och annonsfri)
+
+Varje gång du lägger till eller flyttar en spårpunkt skickar vi en förfrågan till våra servrar om att hämta en rutt på vägnätet.
+Vi använder även API:er från <a href="https://mapbox.com" target="_blank">Mapbox</a> för att visa tilltalande kartor, hämta markhöjddata och låta dig söka efter platser.
+
+Tyvärr är detta dyrt.
+Om du tycker om att använda detta verktyg och finner det värdefullt, vänligen överväg att göra en liten donation för att hjälpa till att hålla webbplatsen gratis och annonsfri.
+
+Tack så mycket för din hjälp och ditt stöd! ❤️
diff --git a/website/src/lib/docs/sv/home/mapbox.mdx b/website/src/lib/docs/sv/home/mapbox.mdx
new file mode 100755
index 0000000..32c4fd4
--- /dev/null
+++ b/website/src/lib/docs/sv/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox är företaget som tillhandahåller några av de tilltalande kartorna på denna webbplats.
+De utvecklar också <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">kartmotorn</a> som används i **gpx.rnmkcy.eu**.
+
+Vi är lyckligt lottade och tacksamma över att få vara en del av deras <a href="https://mapbox.com/community" target="_blank">Community</a>-program, som stödjer ideella organisationer, utbildningsinstitutioner och i övrigt bidragande organisationer.
+Detta samarbete tillåter **gpx.rnmkcy.eu** att dra nytta av Mapbox-verktyg till reducerade priser, vilket i hög grad bidrar till projektets ekonomiska lönsamhet och gör det möjligt för oss att erbjuda bästa möjliga användarupplevelse.
diff --git a/website/src/lib/docs/sv/home/translation.mdx b/website/src/lib/docs/sv/home/translation.mdx
new file mode 100755
index 0000000..afffc27
--- /dev/null
+++ b/website/src/lib/docs/sv/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Översättning
+
+Webbplatsen översätts av volontärer med hjälp av en gemensam översättningsplattform.
+Du kan bidra genom att lägga till eller förbättra översättningar i vårt <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin-projekt</a>.
+
+Om du vill börja översätta till ett nytt språk, vänligen <a href="#contact">kontakta oss</a>.
+
+All hjälp är mycket uppskattad!
diff --git a/website/src/lib/docs/sv/integration.mdx b/website/src/lib/docs/sv/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/sv/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/sv/map-controls.mdx b/website/src/lib/docs/sv/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/sv/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/sv/menu.mdx b/website/src/lib/docs/sv/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/sv/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/menu/edit.mdx b/website/src/lib/docs/sv/menu/edit.mdx
new file mode 100755
index 0000000..af46a67
--- /dev/null
+++ b/website/src/lib/docs/sv/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Till skillnad från åtgärderna i Fil, kan åtgärderna i Redigera potentiellt ändra innehållet i de valda filerna.
+Dessutom, när den vertikala layouten av fillistan är aktiverad (se [Filer och statistik](../files-and-stats)), kan de också tillämpas på [spår, segment och punkter av intresse](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/sv/menu/file.mdx b/website/src/lib/docs/sv/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/sv/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/menu/settings.mdx b/website/src/lib/docs/sv/menu/settings.mdx
new file mode 100755
index 0000000..c56c72a
--- /dev/null
+++ b/website/src/lib/docs/sv/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+Du kan bidra genom att lägga till eller förbättra översättningar i vårt <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin-projekt</a>.
+Om du vill börja översätta till ett nytt språk, vänligen <a href="#contact">kontakta oss</a>.
+All hjälp är mycket uppskattad!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/sv/menu/view.mdx b/website/src/lib/docs/sv/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/sv/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/toolbar.mdx b/website/src/lib/docs/sv/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/sv/toolbar/clean.mdx b/website/src/lib/docs/sv/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/sv/toolbar/elevation.mdx b/website/src/lib/docs/sv/toolbar/elevation.mdx
new file mode 100755
index 0000000..32aa63d
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Höjd
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/toolbar/extract.mdx b/website/src/lib/docs/sv/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/toolbar/merge.mdx b/website/src/lib/docs/sv/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/sv/toolbar/minify.mdx b/website/src/lib/docs/sv/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/sv/toolbar/poi.mdx b/website/src/lib/docs/sv/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/sv/toolbar/routing.mdx b/website/src/lib/docs/sv/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/sv/toolbar/scissors.mdx b/website/src/lib/docs/sv/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/sv/toolbar/time.mdx b/website/src/lib/docs/sv/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/sv/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/faq.mdx b/website/src/lib/docs/vi/faq.mdx
new file mode 100755
index 0000000..6850365
--- /dev/null
+++ b/website/src/lib/docs/vi/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/files-and-stats.mdx b/website/src/lib/docs/vi/files-and-stats.mdx
new file mode 100755
index 0000000..cfccec0
--- /dev/null
+++ b/website/src/lib/docs/vi/files-and-stats.mdx
@@ -0,0 +1,82 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## File list
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### Vertical layout
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### Interactive statistics
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/vi/getting-started.mdx b/website/src/lib/docs/vi/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/vi/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/vi/gpx.mdx b/website/src/lib/docs/vi/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/vi/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/vi/home/funding.mdx b/website/src/lib/docs/vi/home/funding.mdx
new file mode 100755
index 0000000..a9edac4
--- /dev/null
+++ b/website/src/lib/docs/vi/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Hãy giúp cho website hoạt động hoàn toàn miễn phí (không quảng cáo)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/vi/home/mapbox.mdx b/website/src/lib/docs/vi/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/vi/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/vi/home/translation.mdx b/website/src/lib/docs/vi/home/translation.mdx
new file mode 100755
index 0000000..1299512
--- /dev/null
+++ b/website/src/lib/docs/vi/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+Any help is greatly appreciated!
diff --git a/website/src/lib/docs/vi/integration.mdx b/website/src/lib/docs/vi/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/vi/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/vi/map-controls.mdx b/website/src/lib/docs/vi/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/vi/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/vi/menu.mdx b/website/src/lib/docs/vi/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/vi/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/menu/edit.mdx b/website/src/lib/docs/vi/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/vi/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/vi/menu/file.mdx b/website/src/lib/docs/vi/menu/file.mdx
new file mode 100755
index 0000000..0ef9aae
--- /dev/null
+++ b/website/src/lib/docs/vi/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+Close all files.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/menu/settings.mdx b/website/src/lib/docs/vi/menu/settings.mdx
new file mode 100755
index 0000000..8c52972
--- /dev/null
+++ b/website/src/lib/docs/vi/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: Settings
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
+
+Change the units used to display distances in the interface.
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+More information about map layers can be found in the [map controls section](../map-controls).
diff --git a/website/src/lib/docs/vi/menu/view.mdx b/website/src/lib/docs/vi/menu/view.mdx
new file mode 100755
index 0000000..88aa507
--- /dev/null
+++ b/website/src/lib/docs/vi/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: View options
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/toolbar.mdx b/website/src/lib/docs/vi/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/vi/toolbar/clean.mdx b/website/src/lib/docs/vi/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/vi/toolbar/elevation.mdx b/website/src/lib/docs/vi/toolbar/elevation.mdx
new file mode 100755
index 0000000..8fb869d
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: Elevation
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/toolbar/extract.mdx b/website/src/lib/docs/vi/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/toolbar/merge.mdx b/website/src/lib/docs/vi/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/vi/toolbar/minify.mdx b/website/src/lib/docs/vi/toolbar/minify.mdx
new file mode 100755
index 0000000..11b5324
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: Minify
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool can be used to reduce the number of GPS points in a trace, which can be useful for decreasing its size.
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/vi/toolbar/poi.mdx b/website/src/lib/docs/vi/toolbar/poi.mdx
new file mode 100755
index 0000000..6cdc531
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: Points of interest
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### Creating a point of interest
+
+To create a point of interest, fill in the form shown below.
+You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### Editing a point of interest
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+If you only need to move the point of interest, you can drag it to the desired location.
diff --git a/website/src/lib/docs/vi/toolbar/routing.mdx b/website/src/lib/docs/vi/toolbar/routing.mdx
new file mode 100755
index 0000000..dfed41d
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: Route planning and editing
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/vi/toolbar/scissors.mdx b/website/src/lib/docs/vi/toolbar/scissors.mdx
new file mode 100755
index 0000000..dda7622
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: Crop and split
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## Crop
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## Split
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/vi/toolbar/time.mdx b/website/src/lib/docs/vi/toolbar/time.mdx
new file mode 100755
index 0000000..4b01611
--- /dev/null
+++ b/website/src/lib/docs/vi/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: Time
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to change or add timestamps to a trace.
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/faq.mdx b/website/src/lib/docs/zh/faq.mdx
new file mode 100755
index 0000000..d8769e7
--- /dev/null
+++ b/website/src/lib/docs/zh/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: 常见问题
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### 我需要捐赠才能使用网站吗？
+
+否
+The website is free to use and always will be (as long as it is financially sustainable).
+不过，我们感谢捐助并帮助保持网站的运行。
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.rnmkcy.eu** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/files-and-stats.mdx b/website/src/lib/docs/zh/files-and-stats.mdx
new file mode 100755
index 0000000..b755415
--- /dev/null
+++ b/website/src/lib/docs/zh/files-and-stats.mdx
@@ -0,0 +1,83 @@
+---
+title: Files and statistics
+---
+
+<script>
+    import { TriangleRight, BrickWall, Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+## 文件列表
+
+Once you have [opened](./menu/file) files, they will be shown as tabs in the file list located at the bottom of the map.
+You can reorder them by dragging and dropping the tabs.
+And when many files are open, you can scroll through the list of tabs to navigate between them.
+
+<DocsNote>
+
+When using a mouse, you need to hold <kbd>Shift</kbd> to scroll horizontally.
+
+</DocsNote>
+
+### File selection
+
+By clicking on a tab, you can switch between the files to inspect their statistics, and apply [edit actions](./menu/edit) and [tools](./toolbar) to them.
+By holding the <kbd>Ctrl/Cmd</kbd> key, you can add files to the selection or remove them, and by holding <kbd>Shift</kbd>, you can select a range of files.
+Most of the [edit actions](./menu/edit) and [tools](./toolbar) can be applied to multiple files at once.
+
+<DocsNote>
+
+You can also navigate through the files using the arrow keys on your keyboard, and use <kbd>Shift</kbd> to add files to the selection.
+
+</DocsNote>
+
+### Edit actions
+
+By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
+
+### 垂直布局
+
+As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+垂直文件列表对于您打开许多文件或有多个[轨迹、片段或兴趣点](../gpx) 的文件非常有用。
+Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+
+You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
+Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.
+
+<DocsNote>
+
+The size of the file list can be adjusted by dragging the separator between the map and the file list.
+
+</DocsNote>
+
+## Elevation profile and statistics
+
+At the bottom of the interface, you can find the elevation profile and statistics for the current selection.
+
+<DocsNote>
+
+The size of the elevation profile can be adjusted by dragging the separator between the map and the elevation profile.
+
+</DocsNote>
+
+### 交互式统计
+
+When hovering over the elevation profile, a tooltip will show statistics at the cursor position.
+
+To get the statistics for a specific section of the elevation profile, you can drag a selection rectangle on the profile.
+Click on the profile to reset the selection.
+
+You can also use the mouse wheel to zoom in and out on the elevation profile, and move left and right by dragging the profile while holding the <kbd>Shift</kbd> key.
+
+### Additional data
+
+Using the buttons on the right of the elevation profile, you can optionally color the elevation profile by:
+
+- **slope** <TriangleRight size="16" class="inline-block" style="margin-bottom: 2px" /> information computed from the elevation data, or
+- **surface** <BrickWall size="16" class="inline-block" style="margin-bottom: 2px" /> data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> tags.
+  This is only available for files created with **gpx.rnmkcy.eu**.
+
+If your selection includes it, you can also visualize: **speed** <Zap size="16" class="inline-block" style="margin-bottom: 2px" />, **heart rate** <HeartPulse size="16" class="inline-block" style="margin-bottom: 2px" />, **cadence** <Orbit size="16" class="inline-block" style="margin-bottom: 2px" />, **temperature** <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" />, and **power** <SquareActivity size="16" class="inline-block" style="margin-bottom: 2px" /> data on the elevation profile.
diff --git a/website/src/lib/docs/zh/getting-started.mdx b/website/src/lib/docs/zh/getting-started.mdx
new file mode 100755
index 0000000..059e906
--- /dev/null
+++ b/website/src/lib/docs/zh/getting-started.mdx
@@ -0,0 +1,37 @@
+---
+title: Getting started
+---
+
+<script lang="ts">
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# { title }
+
+Welcome to the official guide for **gpx.rnmkcy.eu**!
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
+
+<DocsImage src="getting-started/interface" alt="The gpx.rnmkcy.eu interface." />
+
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
+Before we dive into the details of each section, let's have a quick overview of the interface.
+
+## Menu
+
+At the top of the interface, you will find the [main menu](./menu).
+This is where you can access common actions such as opening, closing, and exporting files, undoing and redoing actions, and adjusting the application settings.
+
+## Files and statistics
+
+At the bottom of the interface, you will find the list of files currently open in the application.
+You can click on a file to select it and display its statistics below the list.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+
+## Toolbar
+
+On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
+
+## Map controls
+
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
diff --git a/website/src/lib/docs/zh/gpx.mdx b/website/src/lib/docs/zh/gpx.mdx
new file mode 100755
index 0000000..bef13ac
--- /dev/null
+++ b/website/src/lib/docs/zh/gpx.mdx
@@ -0,0 +1,34 @@
+---
+title: GPX file format
+---
+
+<script>
+    import { Waypoints, MapPin } from 'lucide-svelte';
+</script>
+
+# { title }
+
+The <a href="https://www.topografix.com/gpx.asp" target="_blank">GPX file format</a> is an open standard for exchanging GPS data between applications and GPS devices.
+It essentially consists of a series of GPS points encoding one or multiple GPS traces, and, optionally, some points of interest.
+
+GPX files may also contain metadata, of which the **name** and **description** fields are the most useful for users.
+
+### <Waypoints size="16" class="inline-block" style="margin-bottom: 2px" /> Tracks, segments, and GPS points
+
+As mentioned above, a GPX file can contain multiple GPS traces.
+These are organized in a hierarchical structure, with tracks at the top level.
+
+- A **track** is made of a sequence of disconnected segments.
+  Furthermore, it can contain metadata such as a **name**, a **description**, and **appearance properties**.
+- A **segment** is a sequence of GPS points that form a continuous path.
+- A **GPS point** is a location with a latitude, a longitude, and optionally a timestamp and an altitude.
+  Some devices also store additional information such as heart rate, cadence, temperature, and power.
+
+In most cases, GPX files contain a single track with a single segment.
+However, the hierarchy described above allows for more advanced use cases, such as planning multi-day trips with several variants for each day.
+
+### <MapPin size="16" class="inline-block" style="margin-bottom: 2px" /> Points of interest
+
+**Points of interest** (technically called _waypoints_) represent locations of interest to show either on a GPS device or on a digital map.
+
+In addition to its coordinates, a point of interest can have a **name** and a **description**.
diff --git a/website/src/lib/docs/zh/home/funding.mdx b/website/src/lib/docs/zh/home/funding.mdx
new file mode 100755
index 0000000..93c7014
--- /dev/null
+++ b/website/src/lib/docs/zh/home/funding.mdx
@@ -0,0 +1,13 @@
+<script>
+    import { HeartHandshake } from 'lucide-svelte';
+</script>
+
+## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+
+Each time you add or move GPS points, our servers calculate the best route on the road network.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+
+Unfortunately, this is expensive.
+If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.
+
+Thank you very much for your support! ❤️
diff --git a/website/src/lib/docs/zh/home/mapbox.mdx b/website/src/lib/docs/zh/home/mapbox.mdx
new file mode 100755
index 0000000..3f1f2d6
--- /dev/null
+++ b/website/src/lib/docs/zh/home/mapbox.mdx
@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.rnmkcy.eu**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.rnmkcy.eu** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.
diff --git a/website/src/lib/docs/zh/home/translation.mdx b/website/src/lib/docs/zh/home/translation.mdx
new file mode 100755
index 0000000..4516047
--- /dev/null
+++ b/website/src/lib/docs/zh/home/translation.mdx
@@ -0,0 +1,12 @@
+<script>
+    import { Languages } from 'lucide-svelte';
+</script>
+
+## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+
+The website is translated by volunteers using a collaborative translation platform.
+您可以在我们的 Crowdin 项目上添加或改进翻译，从而帮助我们
+
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+
+我们非常感谢任何帮助！
diff --git a/website/src/lib/docs/zh/integration.mdx b/website/src/lib/docs/zh/integration.mdx
new file mode 100755
index 0000000..eba50de
--- /dev/null
+++ b/website/src/lib/docs/zh/integration.mdx
@@ -0,0 +1,27 @@
+---
+title: Integration
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import EmbeddingPlayground from '$lib/components/embedding/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+You can use **gpx.rnmkcy.eu** to create maps showing your GPX files and embed them in your website.
+
+All you need is:
+
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+
+You can then play with the configurator below to customize your map and generate the corresponding HTML code.
+
+<DocsNote type="warning">
+
+You will need to set up <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">Cross-Origin Resource Sharing (CORS)</a> headers on your server to allow <b>gpx.rnmkcy.eu</b> to load your GPX files.
+
+</DocsNote>
+
+<EmbeddingPlayground />
diff --git a/website/src/lib/docs/zh/map-controls.mdx b/website/src/lib/docs/zh/map-controls.mdx
new file mode 100755
index 0000000..088e33c
--- /dev/null
+++ b/website/src/lib/docs/zh/map-controls.mdx
@@ -0,0 +1,70 @@
+---
+title: Map controls
+---
+
+<script>
+    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
+</script>
+
+# { title }
+
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
+
+The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
+
+### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
+
+You can use the search bar to look for an address and navigate to it on the map.
+
+### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
+
+The locate button centers the map on your current location.
+
+<DocsNote>
+
+This only works if you have allowed your browser and <b>gpx.rnmkcy.eu</b> to access your location.
+
+</DocsNote>
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
+
+This button can be used to enable street view mode on the map.
+Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
+
+- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
+- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
+
+The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.
+
+- **Basemaps** are background maps that present the main geographic features of the world.
+  Depending on their purpose, basemaps have different styles and levels of detail.
+  Only one basemap can be displayed at a time.
+- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary information.
+- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
+
+<div class="flex flex-col items-center">
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
+</div>
+
+A large collection of global and local basemaps and overlays is available in **gpx.rnmkcy.eu**, as well as a selection of point-of-interest categories.
+They can be enabled in the [map layer settings dialog](./menu/settings).
+
+In these settings, you can also manage the opacity of the overlays.
+
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.
diff --git a/website/src/lib/docs/zh/menu.mdx b/website/src/lib/docs/zh/menu.mdx
new file mode 100755
index 0000000..db6245d
--- /dev/null
+++ b/website/src/lib/docs/zh/menu.mdx
@@ -0,0 +1,17 @@
+---
+title: Menu
+---
+
+<script lang="ts">
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The main menu, located at the top of the interface, provides access to actions, options, and settings divided into several categories, explained separately in the following sections.
+
+<DocsNote>
+
+Most of the menu actions can also be performed using the keyboard shortcuts displayed in the menu.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/menu/edit.mdx b/website/src/lib/docs/zh/menu/edit.mdx
new file mode 100755
index 0000000..e4e6adc
--- /dev/null
+++ b/website/src/lib/docs/zh/menu/edit.mdx
@@ -0,0 +1,96 @@
+---
+title: Edit actions
+---
+
+<script lang="ts">
+    import { Undo2, Redo2, Info, PaintBucket, EyeOff, FileStack, ClipboardCopy, Scissors, ClipboardPaste, Trash2, Maximize, Plus } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
+Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Therefore, we will refer to the elements that can be modified by these actions as _file items_.
+Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
+
+### <Undo2 size="16" class="inline-block" style="margin-bottom: 2px" /><Redo2 size="16" class="inline-block" style="margin-bottom: 2px" /> Undo and redo
+
+Using these buttons, you can undo or redo the last actions you performed.
+This applies to all actions of the interface but not to view options, application settings, or map navigation.
+
+### <Info size="16" class="inline-block" style="margin-bottom: 2px" /> Info...
+
+Open the information dialog of the currently selected file item, where you can see and edit its name and description.
+
+### <PaintBucket size="16" class="inline-block" style="margin-bottom: 2px" /> Appearance...
+
+Open the appearance dialog, where you can change the color, opacity, and width of the selected file items on the map.
+
+### <EyeOff size="16" class="inline-block" style="margin-bottom: 2px" /> Hide/unhide
+
+Toggle the visibility of the selected file items on the map.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New track
+
+Create a new track in the selected file.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single file.
+
+</DocsNote>
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New segment
+
+Create a new segment in the selected track.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+Additionally, the selection must be a single track.
+
+</DocsNote>
+
+### <FileStack size="16" class="inline-block" style="margin-bottom: 2px" /> Select all
+
+Add all file items in the current hierarchy level to the selection.
+
+### <Maximize size="16" class="inline-block" style="margin-bottom: 2px" /> Center
+
+Center the map on the selected file items.
+
+### <ClipboardCopy size="16" class="inline-block" style="margin-bottom: 2px" /> Copy
+
+Copy the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Scissors size="16" class="inline-block" style="margin-bottom: 2px" /> Cut
+
+Cut the selected file items to the clipboard.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Paste
+
+Paste the file items from the clipboard to the current hierarchy level if they are compatible with it.
+
+<DocsNote>
+
+This action is only available when the vertical layout of the files list is enabled.
+
+</DocsNote>
+
+### <Trash2 size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+
+Delete the selected file items.
diff --git a/website/src/lib/docs/zh/menu/file.mdx b/website/src/lib/docs/zh/menu/file.mdx
new file mode 100755
index 0000000..1d90060
--- /dev/null
+++ b/website/src/lib/docs/zh/menu/file.mdx
@@ -0,0 +1,52 @@
+---
+title: File actions
+---
+
+<script lang="ts">
+    import { Plus, FolderOpen, Copy, FileX, Download } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+The file actions menu contains a set of pretty self-explanatory file operations.
+
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
+
+Create a new empty file.
+
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
+
+Open files from your computer. 
+
+<DocsNote>
+
+You can also drag and drop files directly from your file system into the window.
+
+</DocsNote>
+
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
+
+Create a copy of the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+
+Close the currently selected files.
+
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+
+关闭所有文件。
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> 导出...
+
+Open the export dialog to save the currently selected files to your computer.
+
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> 全部导出...
+
+Open the export dialog to save all files to your computer.
+
+<DocsNote type="warning">
+
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.rnmkcy.eu</b>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/menu/settings.mdx b/website/src/lib/docs/zh/menu/settings.mdx
new file mode 100755
index 0000000..739afa8
--- /dev/null
+++ b/website/src/lib/docs/zh/menu/settings.mdx
@@ -0,0 +1,50 @@
+---
+title: 设置
+---
+
+<script lang="ts">
+    import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> 距离单位
+
+更改界面中显示距离的单位。
+
+### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
+
+Change the units used to display velocities in the interface.
+You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
+
+### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
+
+Change the units used to display temperatures in the interface.
+
+### <Languages size="16" class="inline-block" style="margin-bottom: 2px" /> Language
+
+Change the language used in the interface.
+
+<DocsNote>
+
+您可以在我们的 Crowdin 项目上添加或改进翻译，从而帮助我们
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+我们非常感谢任何帮助！
+
+</DocsNote>
+
+### <Sun size="16" class="inline-block" style="margin-bottom: 2px" /> Theme
+
+Change the theme used in the interface.
+
+### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view source
+
+Change the source used for the [street view control](../map-controls).
+The default one is <a href="https://www.mapillary.com" target="_blank">Mapillary</a>, but you can also use <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>.
+Learn more about how to use the street view control in the [map controls section](../map-controls).
+
+### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers...
+
+Open a dialog where you can enable or disable map layers, add custom ones, change the opacity of overlays, and more.
+有关地图图层的更多信息，请参阅[地图控件部分](.../map-controls)。
diff --git a/website/src/lib/docs/zh/menu/view.mdx b/website/src/lib/docs/zh/menu/view.mdx
new file mode 100755
index 0000000..62d06d3
--- /dev/null
+++ b/website/src/lib/docs/zh/menu/view.mdx
@@ -0,0 +1,48 @@
+---
+title: 显示设置
+---
+
+<script lang="ts">
+    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+This menu provides options to rearrange the interface and the map view.
+
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
+
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
+
+### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+
+Switch between a vertical and a horizontal layout for the file list.
+[垂直文件列表](../files-and-stat) 对于您打开许多文件或有多个[轨迹、片段或兴趣点](../gpx) 的文件非常有用。
+
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
+
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
+
+### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
+
+Toggle the visibility of the map overlays selected through the [map layer control](../map-controls).
+
+### <Coins size="16" class="inline-block" style="margin-bottom: 2px" /> Distance markers
+
+Toggle the visibility of distance markers on the map.
+They are displayed for the current selection, like the [elevation profile](../files-and-stats).
+
+### <Milestone size="16" class="inline-block" style="margin-bottom: 2px" /> Direction arrows
+
+Toggle the visibility of direction arrows on the map.
+
+### <Box size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle 3D
+
+Enter or exit the 3D map view.
+
+<DocsNote>
+
+To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/toolbar.mdx b/website/src/lib/docs/zh/toolbar.mdx
new file mode 100755
index 0000000..2ad91c1
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar.mdx
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+---
+
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
+# { title }
+
+The toolbar is located on the left side of the map and is the heart of the application, as it provides access to the main features of **gpx.rnmkcy.eu**.
+Each tool is represented by an icon and can be activated by clicking on it.
+
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.
diff --git a/website/src/lib/docs/zh/toolbar/clean.mdx b/website/src/lib/docs/zh/toolbar/clean.mdx
new file mode 100755
index 0000000..e8b8ffc
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/clean.mdx
@@ -0,0 +1,18 @@
+---
+title: Clean
+---
+
+<script>
+    import { SquareDashedMousePointer } from 'lucide-svelte';
+    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
+</script>
+
+# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+When the clean tool is selected, dragging the map will create a rectangular selection.
+
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
+
+<div class="flex flex-row justify-center">
+    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/zh/toolbar/elevation.mdx b/website/src/lib/docs/zh/toolbar/elevation.mdx
new file mode 100755
index 0000000..014ce82
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/elevation.mdx
@@ -0,0 +1,24 @@
+---
+title: 高程
+---
+
+<script>
+    import { MountainSnow } from 'lucide-svelte';
+    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <MountainSnow size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to add elevation data to traces and [points of interest](../gpx), or to replace the existing data.
+
+<div class="flex flex-row justify-center">
+    <Elevation class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/toolbar/extract.mdx b/website/src/lib/docs/zh/toolbar/extract.mdx
new file mode 100755
index 0000000..737c451
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/extract.mdx
@@ -0,0 +1,26 @@
+---
+title: Extract
+---
+
+<script>
+    import { Ungroup } from 'lucide-svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+This tool allows you to extract [tracks (or segments)](../gpx) from files (or tracks) containing multiple of them.
+
+<div class="flex flex-row justify-center">
+    <Extract class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+Applying the tool to a file containing multiple tracks will create a new file for each of the tracks it contains.
+Similarly, applying the tool to a track containing multiple segments will create (in the same file) a new track for each of the segments it contains.
+
+<DocsNote>
+
+When extracting the tracks from a file containing <a href="../gpx">points of interest</a>, the tool will automatically assign each point of interest to the track it is closest to.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/toolbar/merge.mdx b/website/src/lib/docs/zh/toolbar/merge.mdx
new file mode 100755
index 0000000..11ca1f1
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/merge.mdx
@@ -0,0 +1,20 @@
+---
+title: Merge
+---
+
+<script>
+    import { Group } from 'lucide-svelte';
+    import Merge from '$lib/components/toolbar/tools/Merge.svelte';
+</script>
+
+# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+To use this tool, you need to [select](../files-and-stats) multiple files, [tracks, or segments](../gpx).
+
+- If your goal is to create a single continuous trace from your selection, use the **Connect the traces** option and validate.
+- The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
+  Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
+
+<div class="flex flex-row justify-center">
+    <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
diff --git a/website/src/lib/docs/zh/toolbar/minify.mdx b/website/src/lib/docs/zh/toolbar/minify.mdx
new file mode 100755
index 0000000..a43bcc6
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/minify.mdx
@@ -0,0 +1,26 @@
+---
+title: 最小化
+---
+
+<script>
+    import { Filter } from 'lucide-svelte';
+    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+此工具可用来减少轨迹中GPS点的数量，这对缩小其大小是有用的。
+
+You can adjust the tolerance of the simplification algorithm using the slider, and see the number of points that will be kept, as well as the simplified trace on the map.
+
+<div class="flex flex-row justify-center">
+    <Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+<DocsNote>
+
+The tolerance value represents the maximum distance allowed between the original trace and the simplified trace.
+You can read more about the algorithm used <a href="https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" target="_blank">here</a>.
+
+</DocsNote>
diff --git a/website/src/lib/docs/zh/toolbar/poi.mdx b/website/src/lib/docs/zh/toolbar/poi.mdx
new file mode 100755
index 0000000..1a598ca
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/poi.mdx
@@ -0,0 +1,27 @@
+---
+title: 兴趣点
+---
+
+<script>
+    import { MapPin } from 'lucide-svelte';
+    import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
+</script>
+
+# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map and display them on your GPS device.
+
+### 创建兴趣点
+
+To create a point of interest, fill in the form shown below.
+您可以通过点击地图或手动输入坐标来选择兴趣点的位置。
+Validate the form when you are done.
+
+<div class="flex flex-row justify-center">
+    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### 编辑兴趣点
+
+The form above can also be used to edit an existing point of interest after selecting it on the map.
+如果您只需要移动兴趣点，您可以将其拖动到所需位置。
diff --git a/website/src/lib/docs/zh/toolbar/routing.mdx b/website/src/lib/docs/zh/toolbar/routing.mdx
new file mode 100755
index 0000000..a6ec406
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/routing.mdx
@@ -0,0 +1,84 @@
+---
+title: 路线规划和编辑
+---
+
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## 设置
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+This setting can also be toggled by pressing <kbd>F5</kbd>.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+
+Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+
+</DocsNote>
+
+## 绘制和编辑路线
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor point.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+On touch devices, you can tap on the segment to insert a new anchor point.
+
+<DocsNote>
+
+When editing imported GPX files, an initial set of anchor points is created automatically.
+To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+This allows the route to be edited at different levels of detail.
+
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src="tools/routing" alt="Anchor points allow you to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+通过相同路线返回起始点.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.
diff --git a/website/src/lib/docs/zh/toolbar/scissors.mdx b/website/src/lib/docs/zh/toolbar/scissors.mdx
new file mode 100755
index 0000000..67183ca
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/scissors.mdx
@@ -0,0 +1,32 @@
+---
+title: 裁剪和拆分
+---
+
+<script>
+    import { ScissorsIcon } from 'lucide-svelte';
+    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+## 裁剪
+
+Using the slider, you can define the part of the selected trace that you want to keep.
+The start and end markers on the map and the [statistics and elevation profile](../files-and-stats) are updated in real time to reflect the selection.
+Alternatively, you can drag a selection rectangle directly on the elevation profile.
+Validate the selection when you are satisfied with the result.
+
+<div class="flex flex-row justify-center">
+    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+## 拆分
+
+To split the selected trace into two parts, click on one of the split markers displayed along the trace.
+To split at a specific point of your choice, hover over the trace on the map.
+Scissors will appear at the cursor position, showing that you can split the trace at that point.
+
+You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
+
+<DocsImage src="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/docs/zh/toolbar/time.mdx b/website/src/lib/docs/zh/toolbar/time.mdx
new file mode 100755
index 0000000..8c3c0e7
--- /dev/null
+++ b/website/src/lib/docs/zh/toolbar/time.mdx
@@ -0,0 +1,27 @@
+---
+title: 时间
+---
+
+<script>
+    import { CalendarClock } from 'lucide-svelte';
+    import Time from '$lib/components/toolbar/tools/Time.svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+此工具允许您更改或添加时间戳到轨迹。
+You simply need to use the form shown below and validate it when you are done.
+
+<div class="flex flex-row justify-center">
+    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
+</div>
+
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
+
+<DocsNote>
+
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
+
+</DocsNote>
diff --git a/website/src/lib/index.ts b/website/src/lib/index.ts
new file mode 100755
index 0000000..856f2b6
--- /dev/null
+++ b/website/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/website/src/lib/languages.ts b/website/src/lib/languages.ts
new file mode 100755
index 0000000..dbfc10a
--- /dev/null
+++ b/website/src/lib/languages.ts
@@ -0,0 +1,7 @@
+export const languages: Record<string, string> = {
+    'fr': 'English',
+    'es': 'Español',
+    'fr': 'Français',
+    'nl': 'Nederlands',
+    'pt-BR': 'Português (Brasil)',
+};
\ No newline at end of file
diff --git a/website/src/lib/sitemap.ts b/website/src/lib/sitemap.ts
new file mode 100755
index 0000000..a51dde3
--- /dev/null
+++ b/website/src/lib/sitemap.ts
@@ -0,0 +1,43 @@
+import fs from 'fs';
+import { glob } from 'glob';
+import { languages } from '$lib/languages';
+
+function getURLForLanguage(lang: string, path: string): string {
+    return `https://gpx.rnmkcy.eu${lang === 'fr' ? '' : `/${lang}`}${path}`;
+}
+
+function generateSitemap() {
+    const pages = glob.sync('**/*.html', { cwd: 'build' }).map((page) => `/${page}`);
+
+    let sitemap = '<?xml version="1.0" encoding="UTF-8"?>\n';
+    sitemap += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n';
+
+    pages.forEach((page) => {
+        const path = page.replace('/index.html', '').replace('.html', '');
+
+        const rootDir = path.split('/')[1];
+        if (path.includes('embed') || path.includes('404') || languages[path] || languages[rootDir]) {
+            // Skip localized pages
+            return;
+        }
+
+        Object.keys(languages).forEach((language) => {
+            sitemap += `<url>\n`;
+            sitemap += `  <loc>${getURLForLanguage(language, path)}</loc>\n`;
+
+            Object.keys(languages).forEach((alternate) => {
+                if (alternate === language) return;
+
+                sitemap += `  <xhtml:link rel="alternate" hreflang="${alternate}" href="${getURLForLanguage(alternate, path)}" />\n`;
+            });
+
+            sitemap += `</url>\n`;
+        });
+    });
+
+    sitemap += '</urlset>';
+
+    return sitemap;
+}
+
+fs.writeFileSync('build/sitemap.xml', generateSitemap());
\ No newline at end of file
diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
new file mode 100755
index 0000000..70d6111
--- /dev/null
+++ b/website/src/lib/stores.ts
@@ -0,0 +1,485 @@
+import { writable, get, type Writable, derived } from 'svelte/store';
+
+import mapboxgl from 'mapbox-gl';
+import { GPXFile, buildGPX, parseGPX, GPXStatistics, type Coordinates } from 'gpx';
+import { tick } from 'svelte';
+import { _ } from 'svelte-i18n';
+import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
+import { dbUtils, fileObservers, getFile, getStatistics, settings } from './db';
+import {
+    addSelectItem,
+    applyToOrderedSelectedItemsFromFile,
+    selectFile,
+    selectItem,
+    selection
+} from '$lib/components/file-list/Selection';
+import {
+    ListFileItem,
+    ListItem,
+    ListTrackItem,
+    ListTrackSegmentItem,
+    ListWaypointItem,
+    ListWaypointsItem
+} from '$lib/components/file-list/FileList';
+import type { RoutingControls } from '$lib/components/toolbar/tools/routing/RoutingControls';
+import { SplitType } from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
+
+const { fileOrder } = settings;
+
+export const map = writable<mapboxgl.Map | null>(null);
+export const embedding = writable(false);
+export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
+
+export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
+export const slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined> =
+    writable(undefined);
+
+export function updateGPXData() {
+    let statistics = new GPXStatistics();
+    applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+        let stats = getStatistics(fileId);
+        if (stats) {
+            let first = true;
+            items.forEach((item) => {
+                if (!(item instanceof ListWaypointItem || item instanceof ListWaypointsItem) || first) {
+                    statistics.mergeWith(stats.getStatisticsFor(item));
+                    first = false;
+                }
+            });
+        }
+    }, false);
+    gpxStatistics.set(statistics);
+}
+
+let unsubscribes: Map<string, () => void> = new Map();
+selection.subscribe(($selection) => {
+    // Maintain up-to-date statistics for the current selection
+    updateGPXData();
+
+    while (unsubscribes.size > 0) {
+        let [fileId, unsubscribe] = unsubscribes.entries().next().value;
+        unsubscribe();
+        unsubscribes.delete(fileId);
+    }
+
+    $selection.forEach((item) => {
+        let fileId = item.getFileId();
+        if (!unsubscribes.has(fileId)) {
+            let fileObserver = get(fileObservers).get(fileId);
+            if (fileObserver) {
+                let first = true;
+                unsubscribes.set(
+                    fileId,
+                    fileObserver.subscribe(() => {
+                        if (first) first = false;
+                        else updateGPXData();
+                    })
+                );
+            }
+        }
+    });
+});
+
+gpxStatistics.subscribe(() => {
+    slicedGPXStatistics.set(undefined);
+});
+
+const targetMapBounds = writable<{
+    bounds: mapboxgl.LngLatBounds;
+    ids: string[];
+    total: number;
+}>({
+    bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
+    ids: [],
+    total: 0,
+});
+
+derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
+    if (
+        $map === null ||
+        bounds.ids.length > 0 ||
+        (bounds.bounds.getSouth() === 90 &&
+            bounds.bounds.getWest() === 180 &&
+            bounds.bounds.getNorth() === -90 &&
+            bounds.bounds.getEast() === -180)
+    ) {
+        return;
+    }
+
+    let currentZoom = $map.getZoom();
+    let currentBounds = $map.getBounds();
+    if (bounds.total !== get(fileObservers).size &&
+        currentBounds &&
+        currentZoom > 2 // Extend current bounds only if the map is zoomed in
+    ) {
+        // There are other files on the map
+        if (
+            currentBounds.contains(bounds.bounds.getSouthEast()) &&
+            currentBounds.contains(bounds.bounds.getNorthWest())
+        ) {
+            return;
+        }
+
+        bounds.bounds.extend(currentBounds.getSouthWest());
+        bounds.bounds.extend(currentBounds.getNorthEast());
+    }
+
+    $map.fitBounds(bounds.bounds, { padding: 80, linear: true, easing: () => 1 });
+});
+
+export function initTargetMapBounds(ids: string[]) {
+    targetMapBounds.set({
+        bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
+        ids,
+        total: ids.length,
+    });
+}
+
+export function updateTargetMapBounds(id: string, bounds: { southWest: Coordinates; northEast: Coordinates }) {
+    if (get(targetMapBounds).ids.indexOf(id) === -1) {
+        return;
+    }
+
+    targetMapBounds.update((target) => {
+        target.ids = target.ids.filter((x) => x !== id);
+        if (
+            bounds.southWest.lat !== 90 ||
+            bounds.southWest.lon !== 180 ||
+            bounds.northEast.lat !== -90 ||
+            bounds.northEast.lon !== -180
+        ) {
+            // Avoid update for empty (new) files
+            target.bounds.extend(bounds.southWest);
+            target.bounds.extend(bounds.northEast);
+        }
+
+        return target;
+    });
+}
+
+export function centerMapOnSelection(
+) {
+    let selected = get(selection).getSelected();
+    let bounds = new mapboxgl.LngLatBounds();
+
+    if (selected.find((item) => item instanceof ListWaypointItem)) {
+        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+            let file = getFile(fileId);
+            if (file) {
+                items.forEach((item) => {
+                    if (item instanceof ListWaypointItem) {
+                        let waypoint = file.wpt[item.getWaypointIndex()];
+                        if (waypoint) {
+                            bounds.extend([waypoint.getLongitude(), waypoint.getLatitude()]);
+                        }
+                    }
+                });
+            }
+        });
+    } else {
+        let selectionBounds = get(gpxStatistics).global.bounds;
+        bounds.setNorthEast(selectionBounds.northEast);
+        bounds.setSouthWest(selectionBounds.southWest);
+    }
+
+    get(map)?.fitBounds(bounds, {
+        padding: 80,
+        easing: () => 1,
+        maxZoom: 15
+    });
+}
+
+export const gpxLayers: Map<string, GPXLayer> = new Map();
+export const routingControls: Map<string, RoutingControls> = new Map();
+
+export enum Tool {
+    ROUTING,
+    WAYPOINT,
+    SCISSORS,
+    TIME,
+    MERGE,
+    EXTRACT,
+    ELEVATION,
+    REDUCE,
+    CLEAN
+}
+export const currentTool = writable<Tool | null>(null);
+export const splitAs = writable(SplitType.FILES);
+export const streetViewEnabled = writable(false);
+
+export function newGPXFile() {
+    const newFileName = get(_)('menu.new_file');
+
+    let file = new GPXFile();
+
+    let maxNewFileNumber = 0;
+    get(fileObservers).forEach((f) => {
+        let file = get(f)?.file;
+        if (file && file.metadata.name && file.metadata.name.startsWith(newFileName)) {
+            let number = parseInt(file.metadata.name.split(' ').pop() ?? '0');
+            if (!isNaN(number) && number > maxNewFileNumber) {
+                maxNewFileNumber = number;
+            }
+        }
+    });
+
+    file.metadata.name = `${newFileName} ${maxNewFileNumber + 1}`;
+
+    return file;
+}
+
+export function createFile() {
+    let file = newGPXFile();
+
+    dbUtils.add(file);
+
+    selectFileWhenLoaded(file._data.id);
+    currentTool.set(Tool.ROUTING);
+}
+
+export function triggerFileInput() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.gpx';
+    input.multiple = true;
+    input.className = 'hidden';
+    input.onchange = () => {
+        if (input.files) {
+            loadFiles(input.files);
+        }
+    };
+    input.click();
+}
+
+export async function loadFiles(list: FileList | File[]) {
+    let files: GPXFile[] = [];
+    for (let i = 0; i < list.length; i++) {
+        let file = await loadFile(list[i]);
+        if (file) {
+            files.push(file);
+        }
+    }
+
+    let ids = dbUtils.addMultiple(files);
+
+    initTargetMapBounds(ids);
+    selectFileWhenLoaded(ids[0]);
+}
+
+export async function loadFile(file: File): Promise<GPXFile | null> {
+    let result = await new Promise<GPXFile | null>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            let data = reader.result?.toString() ?? null;
+            if (data) {
+                let gpx = parseGPX(data);
+                if (gpx.metadata === undefined) {
+                    gpx.metadata = {};
+                }
+                if (gpx.metadata.name === undefined || gpx.metadata.name.trim() === '') {
+                    gpx.metadata.name = file.name.split('.').slice(0, -1).join('.');
+                }
+                resolve(gpx);
+            } else {
+                resolve(null);
+            }
+        };
+        reader.readAsText(file);
+    });
+    return result;
+}
+
+export function selectFileWhenLoaded(fileId: string) {
+    const unsubscribe = fileObservers.subscribe((files) => {
+        if (files.has(fileId)) {
+            tick().then(() => {
+                selectFile(fileId);
+            });
+            unsubscribe();
+        }
+    });
+}
+
+export function updateSelectionFromKey(down: boolean, shift: boolean) {
+    let selected = get(selection).getSelected();
+    if (selected.length === 0) {
+        return;
+    }
+
+    let next: ListItem | undefined = undefined;
+    if (selected[0] instanceof ListFileItem) {
+        let order = get(fileOrder);
+        let limitIndex: number | undefined = undefined;
+        selected.forEach((item) => {
+            let index = order.indexOf(item.getFileId());
+            if (
+                limitIndex === undefined ||
+                (down && index > limitIndex) ||
+                (!down && index < limitIndex)
+            ) {
+                limitIndex = index;
+            }
+        });
+
+        if (limitIndex !== undefined) {
+            let nextIndex = down ? limitIndex + 1 : limitIndex - 1;
+
+            while (true) {
+                if (nextIndex < 0) {
+                    nextIndex = order.length - 1;
+                } else if (nextIndex >= order.length) {
+                    nextIndex = 0;
+                }
+
+                if (nextIndex === limitIndex) {
+                    break;
+                }
+
+                next = new ListFileItem(order[nextIndex]);
+                if (!get(selection).has(next)) {
+                    break;
+                }
+
+                nextIndex += down ? 1 : -1;
+            }
+        }
+    } else if (
+        selected[0] instanceof ListTrackItem &&
+        selected[selected.length - 1] instanceof ListTrackItem
+    ) {
+        let fileId = selected[0].getFileId();
+        let file = getFile(fileId);
+        if (file) {
+            let numberOfTracks = file.trk.length;
+            let trackIndex = down
+                ? selected[selected.length - 1].getTrackIndex()
+                : selected[0].getTrackIndex();
+            if (down && trackIndex < numberOfTracks - 1) {
+                next = new ListTrackItem(fileId, trackIndex + 1);
+            } else if (!down && trackIndex > 0) {
+                next = new ListTrackItem(fileId, trackIndex - 1);
+            }
+        }
+    } else if (
+        selected[0] instanceof ListTrackSegmentItem &&
+        selected[selected.length - 1] instanceof ListTrackSegmentItem
+    ) {
+        let fileId = selected[0].getFileId();
+        let file = getFile(fileId);
+        if (file) {
+            let trackIndex = selected[0].getTrackIndex();
+            let numberOfSegments = file.trk[trackIndex].trkseg.length;
+            let segmentIndex = down
+                ? selected[selected.length - 1].getSegmentIndex()
+                : selected[0].getSegmentIndex();
+            if (down && segmentIndex < numberOfSegments - 1) {
+                next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex + 1);
+            } else if (!down && segmentIndex > 0) {
+                next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex - 1);
+            }
+        }
+    } else if (
+        selected[0] instanceof ListWaypointItem &&
+        selected[selected.length - 1] instanceof ListWaypointItem
+    ) {
+        let fileId = selected[0].getFileId();
+        let file = getFile(fileId);
+        if (file) {
+            let numberOfWaypoints = file.wpt.length;
+            let waypointIndex = down
+                ? selected[selected.length - 1].getWaypointIndex()
+                : selected[0].getWaypointIndex();
+            if (down && waypointIndex < numberOfWaypoints - 1) {
+                next = new ListWaypointItem(fileId, waypointIndex + 1);
+            } else if (!down && waypointIndex > 0) {
+                next = new ListWaypointItem(fileId, waypointIndex - 1);
+            }
+        }
+    }
+
+    if (next && (!get(selection).has(next) || !shift)) {
+        if (shift) {
+            addSelectItem(next);
+        } else {
+            selectItem(next);
+        }
+    }
+}
+
+async function exportFiles(fileIds: string[], exclude: string[]) {
+    for (let fileId of fileIds) {
+        let file = getFile(fileId);
+        if (file) {
+            exportFile(file, exclude);
+            await new Promise((resolve) => setTimeout(resolve, 200));
+        }
+    }
+}
+
+export function exportSelectedFiles(exclude: string[]) {
+    let fileIds: string[] = [];
+    applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
+        fileIds.push(fileId);
+    });
+    exportFiles(fileIds, exclude);
+}
+
+export function exportAllFiles(exclude: string[]) {
+    exportFiles(get(fileOrder), exclude);
+}
+
+export function exportFile(file: GPXFile, exclude: string[]) {
+    let blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' });
+    let url = URL.createObjectURL(blob);
+    let a = document.createElement('a');
+    a.href = url;
+    a.download = file.metadata.name + '.gpx';
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+export const allHidden = writable(false);
+
+export function updateAllHidden() {
+    let hidden = true;
+    applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+        let file = getFile(fileId);
+        if (file) {
+            for (let item of items) {
+                if (!hidden) {
+                    return;
+                }
+
+                if (item instanceof ListFileItem) {
+                    hidden = hidden && file._data.hidden === true;
+                } else if (item instanceof ListTrackItem && item.getTrackIndex() < file.trk.length) {
+                    hidden = hidden && file.trk[item.getTrackIndex()]._data.hidden === true;
+                } else if (
+                    item instanceof ListTrackSegmentItem &&
+                    item.getTrackIndex() < file.trk.length &&
+                    item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length
+                ) {
+                    hidden =
+                        hidden &&
+                        file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()]._data.hidden === true;
+                } else if (item instanceof ListWaypointsItem) {
+                    hidden = hidden && file._data.hiddenWpt === true;
+                } else if (item instanceof ListWaypointItem && item.getWaypointIndex() < file.wpt.length) {
+                    hidden = hidden && file.wpt[item.getWaypointIndex()]._data.hidden === true;
+                }
+            }
+        }
+    });
+    allHidden.set(hidden);
+}
+selection.subscribe(updateAllHidden);
+
+export const editMetadata = writable(false);
+export const editStyle = writable(false);
+
+export enum ExportState {
+    NONE,
+    SELECTION,
+    ALL
+}
+export const exportState = writable<ExportState>(ExportState.NONE);
diff --git a/website/src/lib/units.ts b/website/src/lib/units.ts
new file mode 100755
index 0000000..5dc05a1
--- /dev/null
+++ b/website/src/lib/units.ts
@@ -0,0 +1,218 @@
+import { get } from 'svelte/store';
+import { settings } from '$lib/db';
+import { _ } from 'svelte-i18n';
+
+const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+export function kilometersToMiles(value: number) {
+	return value * 0.621371;
+}
+
+export function milesToKilometers(value: number) {
+	return value * 1.60934;
+}
+
+export function metersToFeet(value: number) {
+	return value * 3.28084;
+}
+
+export function kilometersToNauticalMiles(value: number) {
+	return value * 0.539957;
+}
+
+export function nauticalMilesToKilometers(value: number) {
+	return value * 1.852;
+}
+
+export function celsiusToFahrenheit(value: number) {
+	return value * 1.8 + 32;
+}
+
+export function distancePerHourToSecondsPerDistance(value: number) {
+	if (value === 0) {
+		return 0;
+	}
+	return 3600 / value;
+}
+
+export function secondsToHHMMSS(value: number) {
+	var hours = Math.floor(value / 3600);
+	var minutes = Math.floor(value / 60) % 60;
+	var seconds = Math.min(59, Math.round(value % 60));
+
+	return [hours, minutes, seconds]
+		.map((v) => (v < 10 ? '0' + v : v))
+		.filter((v, i) => v !== '00' || i > 0)
+		.join(':');
+}
+
+// Get a string representation of the value with units
+export function getDistanceWithUnits(value: number, convert: boolean = true) {
+	if (convert) {
+		return getConvertedDistance(value).toFixed(2) + ' ' + getDistanceUnits();
+	} else {
+		return value.toFixed(2) + ' ' + getDistanceUnits();
+	}
+}
+
+export function getVelocityWithUnits(value: number, convert: boolean = true) {
+	if (get(velocityUnits) === 'speed') {
+		if (convert) {
+			return getConvertedVelocity(value).toFixed(2) + ' ' + getVelocityUnits();
+		} else {
+			return value.toFixed(2) + ' ' + getVelocityUnits();
+		}
+	} else {
+		if (convert) {
+			return secondsToHHMMSS(getConvertedVelocity(value)) + ' ' + getVelocityUnits();
+		} else {
+			return secondsToHHMMSS(value) + ' ' + getVelocityUnits();
+		}
+	}
+}
+
+export function getElevationWithUnits(value: number, convert: boolean = true) {
+	if (convert) {
+		return getConvertedElevation(value).toFixed(0) + ' ' + getElevationUnits();
+	} else {
+		return value.toFixed(0) + ' ' + getElevationUnits();
+	}
+}
+
+export function getHeartRateWithUnits(value: number) {
+	return value.toFixed(0) + ' ' + getHeartRateUnits();
+}
+
+export function getCadenceWithUnits(value: number) {
+	return value.toFixed(0) + ' ' + getCadenceUnits();
+}
+
+export function getPowerWithUnits(value: number) {
+	return value.toFixed(0) + ' ' + getPowerUnits();
+}
+
+export function getTemperatureWithUnits(value: number, convert: boolean = true) {
+	if (convert) {
+		return getConvertedTemperature(value).toFixed(0) + ' ' + getTemperatureUnits();
+	} else {
+		return value.toFixed(0) + ' ' + getTemperatureUnits();
+	}
+}
+
+// Get the units
+export function getDistanceUnits(targetDistanceUnits = get(distanceUnits)) {
+	switch (targetDistanceUnits) {
+		case 'metric':
+			return get(_)('units.kilometers');
+		case 'imperial':
+			return get(_)('units.miles');
+		case 'nautical':
+			return get(_)('units.nautical_miles');
+	}
+}
+
+export function getVelocityUnits(
+	targetVelocityUnits = get(velocityUnits),
+	targetDistanceUnits = get(distanceUnits)
+) {
+	if (targetVelocityUnits === 'speed') {
+		switch (targetDistanceUnits) {
+			case 'metric':
+				return get(_)('units.kilometers_per_hour');
+			case 'imperial':
+				return get(_)('units.miles_per_hour');
+			case 'nautical':
+				return get(_)('units.knots');
+		}
+	} else {
+		switch (targetDistanceUnits) {
+			case 'metric':
+				return get(_)('units.minutes_per_kilometer');
+			case 'imperial':
+				return get(_)('units.minutes_per_mile');
+			case 'nautical':
+				return get(_)('units.minutes_per_nautical_mile');
+		}
+	}
+}
+
+export function getElevationUnits(targetDistanceUnits = get(distanceUnits)) {
+	switch (targetDistanceUnits) {
+		case 'metric':
+			return get(_)('units.meters');
+		case 'imperial':
+			return get(_)('units.feet');
+		case 'nautical':
+			// See https://github.com/gpxstudio/gpx.rnmkcy.eu/pull/66#issuecomment-2306568997
+			return get(_)('units.meters');
+	}
+}
+
+export function getHeartRateUnits() {
+	return get(_)('units.heartrate');
+}
+
+export function getCadenceUnits() {
+	return get(_)('units.cadence');
+}
+
+export function getPowerUnits() {
+	return get(_)('units.power');
+}
+
+export function getTemperatureUnits() {
+	return get(temperatureUnits) === 'celsius' ? get(_)('units.celsius') : get(_)('units.fahrenheit');
+}
+
+// Convert only the value
+export function getConvertedDistance(value: number, targetDistanceUnits = get(distanceUnits)) {
+	switch (targetDistanceUnits) {
+		case 'metric':
+			return value;
+		case 'imperial':
+			return kilometersToMiles(value);
+		case 'nautical':
+			return kilometersToNauticalMiles(value);
+	}
+}
+
+export function getConvertedElevation(value: number, targetDistanceUnits = get(distanceUnits)) {
+	switch (targetDistanceUnits) {
+		case 'metric':
+			return value;
+		case 'imperial':
+			return metersToFeet(value);
+		case 'nautical':
+			return value;
+	}
+}
+
+export function getConvertedVelocity(
+	value: number,
+	targetVelocityUnits = get(velocityUnits),
+	targetDistanceUnits = get(distanceUnits)
+) {
+	if (targetVelocityUnits === 'speed') {
+		switch (targetDistanceUnits) {
+			case 'metric':
+				return value;
+			case 'imperial':
+				return kilometersToMiles(value);
+			case 'nautical':
+				return kilometersToNauticalMiles(value);
+		}
+	} else {
+		switch (targetDistanceUnits) {
+			case 'metric':
+				return distancePerHourToSecondsPerDistance(value);
+			case 'imperial':
+				return distancePerHourToSecondsPerDistance(kilometersToMiles(value));
+			case 'nautical':
+				return distancePerHourToSecondsPerDistance(kilometersToNauticalMiles(value));
+		}
+	}
+}
+
+export function getConvertedTemperature(value: number) {
+	return get(temperatureUnits) === 'celsius' ? value : celsiusToFahrenheit(value);
+}
diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts
new file mode 100755
index 0000000..366f7e6
--- /dev/null
+++ b/website/src/lib/utils.ts
@@ -0,0 +1,218 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+import { get } from "svelte/store";
+import { map } from "./stores";
+import { base } from "$app/paths";
+import { languages } from "$lib/languages";
+import { locale } from "svelte-i18n";
+import { TrackPoint, Waypoint, type Coordinates, crossarcDistance, distance } from "gpx";
+import mapboxgl from "mapbox-gl";
+import tilebelt from "@mapbox/tilebelt";
+import { PUBLIC_MAPBOX_TOKEN } from "$env/static/public";
+import PNGReader from "png.js";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+
+export const flyAndScale = (
+    node: Element,
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 50 }
+): TransitionConfig => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+
+    const scaleConversion = (
+        valueA: number,
+        scaleA: [number, number],
+        scaleB: [number, number]
+    ) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+
+        return valueB;
+    };
+
+    const styleToString = (
+        style: Record<string, number | string | undefined>
+    ): string => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined) return str;
+            return str + `${key}:${style[key]};`;
+        }, "");
+    };
+
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};
+
+export function getClosestLinePoint(points: TrackPoint[], point: TrackPoint | Coordinates, details: any = {}): TrackPoint {
+    let closest = points[0];
+    let closestDist = Number.MAX_VALUE;
+    for (let i = 0; i < points.length - 1; i++) {
+        let dist = crossarcDistance(points[i], points[i + 1], point);
+        if (dist < closestDist) {
+            closestDist = dist;
+            if (distance(points[i], point) <= distance(points[i + 1], point)) {
+                closest = points[i];
+                details['before'] = true;
+                details['index'] = i;
+            } else {
+                closest = points[i + 1];
+                details['before'] = false;
+                details['index'] = i + 1;
+            }
+        }
+    }
+    details['distance'] = closestDist;
+    return closest;
+}
+
+export function getElevation(points: (TrackPoint | Waypoint | Coordinates)[], ELEVATION_ZOOM: number = 13, tileSize = 512): Promise<number[]> {
+    let coordinates = points.map((point) => (point instanceof TrackPoint || point instanceof Waypoint) ? point.getCoordinates() : point);
+    let bbox = new mapboxgl.LngLatBounds();
+    coordinates.forEach((coord) => bbox.extend(coord));
+
+    let tiles = coordinates.map((coord) => tilebelt.pointToTile(coord.lon, coord.lat, ELEVATION_ZOOM));
+    let uniqueTiles = Array.from(new Set(tiles.map((tile) => tile.join(',')))).map((tile) => tile.split(',').map((x) => parseInt(x)));
+    let pngs = new Map<string, any>();
+
+    let promises = uniqueTiles.map((tile) => fetch(`https://api.mapbox.com/v4/mapbox.mapbox-terrain-dem-v1/${ELEVATION_ZOOM}/${tile[0]}/${tile[1]}@2x.pngraw?access_token=${PUBLIC_MAPBOX_TOKEN}`, { cache: 'force-cache' }).then((response) => response.arrayBuffer()).then((buffer) => new Promise((resolve) => {
+        let png = new PNGReader(new Uint8Array(buffer));
+        png.parse((err, png) => {
+            if (err) {
+                resolve(false); // Also resolve so that Promise.all doesn't fail
+            } else {
+                pngs.set(tile.join(','), png);
+                resolve(true);
+            }
+        });
+    })));
+
+    return Promise.all(promises).then(() => coordinates.map((coord, index) => {
+        let tile = tiles[index];
+        let png = pngs.get(tile.join(','));
+
+        if (!png) {
+            return 0;
+        }
+
+        let tf = tilebelt.pointToTileFraction(coord.lon, coord.lat, ELEVATION_ZOOM);
+        let x = tileSize * (tf[0] - tile[0]);
+        let y = tileSize * (tf[1] - tile[1]);
+        let _x = Math.floor(x);
+        let _y = Math.floor(y);
+        let dx = x - _x;
+        let dy = y - _y;
+
+        const p00 = png.getPixel(_x, _y);
+        const p01 = png.getPixel(_x, _y + (_y + 1 == tileSize ? 0 : 1));
+        const p10 = png.getPixel(_x + (_x + 1 == tileSize ? 0 : 1), _y);
+        const p11 = png.getPixel(_x + (_x + 1 == tileSize ? 0 : 1), _y + (_y + 1 == tileSize ? 0 : 1));
+
+        let ele00 = -10000 + ((p00[0] * 256 * 256 + p00[1] * 256 + p00[2]) * 0.1);
+        let ele01 = -10000 + ((p01[0] * 256 * 256 + p01[1] * 256 + p01[2]) * 0.1);
+        let ele10 = -10000 + ((p10[0] * 256 * 256 + p10[1] * 256 + p10[2]) * 0.1);
+        let ele11 = -10000 + ((p11[0] * 256 * 256 + p11[1] * 256 + p11[2]) * 0.1);
+
+        return ele00 * (1 - dx) * (1 - dy) + ele01 * (1 - dx) * dy + ele10 * dx * (1 - dy) + ele11 * dx * dy;
+    }));
+}
+
+let previousCursors: string[] = [];
+export function setCursor(cursor: string) {
+    let m = get(map);
+    if (m) {
+        previousCursors.push(m.getCanvas().style.cursor);
+        m.getCanvas().style.cursor = cursor;
+    }
+}
+
+export function resetCursor() {
+    let m = get(map);
+    if (m) {
+        m.getCanvas().style.cursor = previousCursors.pop() ?? '';
+    }
+}
+
+export function setPointerCursor() {
+    setCursor('pointer');
+}
+
+export function setGrabbingCursor() {
+    setCursor('grabbing');
+}
+
+export function setCrosshairCursor() {
+    setCursor('crosshair');
+}
+
+export const scissorsCursor = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1"><path d="M 3.200 3.200 C 0.441 5.959, 2.384 9.516, 7 10.154 C 10.466 10.634, 10.187 13.359, 6.607 13.990 C 2.934 14.637, 1.078 17.314, 2.612 19.750 C 4.899 23.380, 10 21.935, 10 17.657 C 10 16.445, 12.405 13.128, 15.693 9.805 C 18.824 6.641, 21.066 3.732, 20.674 3.341 C 20.283 2.950, 18.212 4.340, 16.072 6.430 C 12.019 10.388, 10 10.458, 10 6.641 C 10 2.602, 5.882 0.518, 3.200 3.200 M 4.446 5.087 C 3.416 6.755, 5.733 8.667, 7.113 7.287 C 8.267 6.133, 7.545 4, 6 4 C 5.515 4, 4.816 4.489, 4.446 5.087 M 14 14.813 C 14 16.187, 19.935 21.398, 20.667 20.667 C 21.045 20.289, 20.065 18.634, 18.490 16.990 C 15.661 14.036, 14 13.231, 14 14.813 M 4.446 17.087 C 3.416 18.755, 5.733 20.667, 7.113 19.287 C 8.267 18.133, 7.545 16, 6 16 C 5.515 16, 4.816 16.489, 4.446 17.087" stroke="black" stroke-width="1.2" fill="white" fill-rule="evenodd"/></svg>') 12 12, auto`;
+
+export function setScissorsCursor() {
+    setCursor(scissorsCursor);
+}
+
+export function isMac() {
+    return navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
+}
+
+export function isSafari() {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function getURLForLanguage(lang: string | null | undefined, path: string): string {
+    let newPath = path.replace(base, '');
+    let languageInPath = newPath.split('/')[1];
+    if (!languages.hasOwnProperty(languageInPath)) {
+        languageInPath = 'fr';
+    }
+
+    if (lang === null || lang === undefined) {
+        lang = get(locale);
+        if (lang === null || lang === undefined) {
+            lang = 'fr';
+        }
+    }
+
+    if (languageInPath === 'fr') {
+        if (lang === 'fr') {
+            return `${base}${newPath}`;
+        } else {
+            return `${base}/${lang}${newPath}`;
+        }
+    } else {
+        if (lang === 'fr') {
+            newPath = newPath.replace(`/${languageInPath}`, '');
+            return newPath === '' ? `${base}/` : `${base}${newPath}`;
+        } else {
+            newPath = newPath.replace(`/${languageInPath}`, `/${lang}`);
+            return `${base}${newPath}`;
+        }
+    }
+}
\ No newline at end of file
diff --git a/website/src/locales/be.json b/website/src/locales/be.json
new file mode 100755
index 0000000..150e2af
--- /dev/null
+++ b/website/src/locales/be.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "help",
+        "404_title": "старонка не знойдзена",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "Стварыць новы файл",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Адкрыць...",
+        "duplicate": "Duplicate",
+        "close": "Закрыць",
+        "close_all": "Закрыць усе",
+        "copy": "Капіяваць",
+        "paste": "Уставіць",
+        "cut": "Выразаць",
+        "export": "Экспартаваць...",
+        "export_all": "Export all...",
+        "export_options": "Налады экспарту",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Спампаваць файл",
+        "download_files": "Спампаваць файлы",
+        "edit": "Рэдагаваць",
+        "undo": "Адрабіць",
+        "redo": "Redo",
+        "delete": "Выдаліць",
+        "select_all": "Абраць усё",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Налады",
+        "distance_units": "Distance units",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Тэма",
+        "system": "System",
+        "light": "Светлая",
+        "dark": "Цёмная",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/ca.json b/website/src/locales/ca.json
new file mode 100755
index 0000000..d81451f
--- /dev/null
+++ b/website/src/locales/ca.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "l'editor de fitxers GPX en línia",
+        "app_title": "app",
+        "embed_title": "l'editor de fitxers GPX en línia",
+        "help_title": "ajuda",
+        "404_title": "no s'ha trobat la pàgina",
+        "description": "Visualitza, edita i crea fitxers GPX en línia amb capacitats avançades de planificació de rutes i eines de processament de fitxers, mapes bonics i visualitzacions de dades detallades."
+    },
+    "menu": {
+        "new": "Nou",
+        "new_file": "Nou fitxer",
+        "new_track": "Nou itinerari",
+        "new_segment": "Nou segment",
+        "open": "Obrir...",
+        "duplicate": "Duplica el track",
+        "close": "Tancar",
+        "close_all": "Tancar tot",
+        "copy": "Copiar",
+        "paste": "Enganxar",
+        "cut": "Tallar",
+        "export": "Exportar...",
+        "export_all": "Exportar tot...",
+        "export_options": "Opcions d'exportació",
+        "support_message": "L'eina és d'ús gratuït, però no d'execució gratuïta. Penseu donar suport al lloc web si l'utilitzeu amb freqüència. Gràcies!",
+        "support_button": "Ajudeu a mantenir aquest lloc web gratuït",
+        "download_file": "Descarregar fitxer",
+        "download_files": "Descarregar fitxers",
+        "edit": "Editar",
+        "undo": "Desfer",
+        "redo": "Refer",
+        "delete": "Elimina el track",
+        "select_all": "Seleccionar-ho tot",
+        "view": "Vista",
+        "elevation_profile": "Perfil d’elevacions",
+        "vertical_file_view": "Llista de fitxers vertical",
+        "switch_basemap": "Canviar al mapa base anterior",
+        "toggle_overlays": "Intercanvia capes",
+        "toggle_3d": "Canvia a 3D",
+        "settings": "Configuració",
+        "distance_units": "Unitats de distancia",
+        "metric": "Mètric",
+        "imperial": "Imperial",
+        "nautical": "Nàutica",
+        "velocity_units": "Unitats de velocitat",
+        "temperature_units": "Unitat de temperatura",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Idioma",
+        "mode": "Tema",
+        "system": "Sistema",
+        "light": "Clar",
+        "dark": "Fosc",
+        "street_view_source": "Font de \"Street view\"",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Capes del mapa...",
+        "distance_markers": "Marcadors de distancia",
+        "direction_markers": "Fletxes de direcció",
+        "help": "Ajuda",
+        "more": "Més...",
+        "donate": "Donar",
+        "ctrl": "Ctrl",
+        "click": "Clic",
+        "drag": "Arrossega",
+        "metadata": {
+            "button": "Informació...",
+            "name": "Nom",
+            "description": "Descripció",
+            "save": "Desa"
+        },
+        "style": {
+            "button": "Aparença...",
+            "color": "Colors",
+            "opacity": "Opacitat",
+            "width": "Amplada"
+        },
+        "hide": "Amagar",
+        "unhide": "Veure",
+        "center": "Centrar",
+        "open_in": "Obrir amb"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planificar o editar una ruta",
+            "activity": "Activitat",
+            "use_routing": "Trobar una ruta",
+            "use_routing_tooltip": "Connectar entre els punts a través de camins o en línies rectes si està desactivat",
+            "allow_private": "Permet camins particulars",
+            "reverse": {
+                "button": "Inverteix el track",
+                "tooltip": "Invertir el sentit de la ruta"
+            },
+            "route_back_to_start": {
+                "button": "Tornar a l'inici",
+                "tooltip": "Connectar l'últim punt de la ruta amb el punt d'inici"
+            },
+            "round_trip": {
+                "button": "Ruta circular",
+                "tooltip": "Tronar al punt de sortida a través de la mateixa ruta"
+            },
+            "start_loop_here": "Comença el bucle aquí",
+            "help_no_file": "Sel·leccionar una traça fent servir l'eina o bé, clicar al mapa per començar a crear una nova ruta.",
+            "help": "Clicar al mapa per afegir un nou punt de pas o bé, morue els existents per modificar la ruta.",
+            "activities": {
+                "bike": "Bicicleta",
+                "racing_bike": "Bicicleta de carretera",
+                "gravel_bike": "Bicicleta gravel",
+                "mountain_bike": "Bicicleta de muntanya",
+                "foot": "Córrer/caminar",
+                "motorcycle": "Motocicleta",
+                "water": "Aigua",
+                "railway": "Línia de ferrocarril"
+            },
+            "surface": {
+                "unknown": "Desconegut",
+                "paved": "Pavimentat",
+                "unpaved": "No pavimentat",
+                "asphalt": "Asfalt",
+                "concrete": "Formigó",
+                "chipseal": "Camí asfaltat",
+                "cobblestone": "Llambordes",
+                "unhewn_cobblestone": "Llambordes grosses",
+                "paving_stones": "Camí de pedres",
+                "stepping_stones": "Empedrat",
+                "sett": "Establir",
+                "metal": "Metall",
+                "wood": "Fusta",
+                "compacted": "Grava compactada",
+                "fine_gravel": "Grava fina",
+                "gravel": "Grava",
+                "pebblestone": "Empedrat",
+                "rock": "Roques",
+                "dirt": "Terra",
+                "ground": "Terreny",
+                "earth": "Planeta Terra",
+                "snow": "Neu",
+                "ice": "Gel",
+                "salt": "Sal",
+                "mud": "Fang",
+                "sand": "Sorra",
+                "woodchips": "Estella forestal",
+                "grass": "Herba",
+                "grass_paver": "Gespa"
+            },
+            "error": {
+                "from": "El punt d'inici és massa lluny de la via més propera",
+                "via": "El punt és massa lluny de la via més propera",
+                "to": "El punt final és massa lluny de la via més propera",
+                "timeout": "El càlcul de la ruta tarda més del compte, prova d'afegir punts més propers entre si"
+            }
+        },
+        "scissors": {
+            "tooltip": "Retallar o dividir",
+            "crop": "Retallar",
+            "split_as": "Dividir la sala en",
+            "help_invalid_selection": "Seleccioneu una traça per retallar o dividir.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Gestionar dades de temps",
+            "start": "Inici",
+            "end": "Final",
+            "total_time": "Temps en moviment",
+            "pick_date": "Triar una data",
+            "artificial": "Crear dades de temps realistes",
+            "update": "Actualitzar dades de temps",
+            "help": "Utilitzar el formulari per establir noves dates de temps.",
+            "help_invalid_selection": "Triar una sola traçada per gestionar-ne les dades de temps."
+        },
+        "merge": {
+            "merge_traces": "Connectar les traçades",
+            "merge_contents": "Unir els continguts i mantenir les traçades desconnectades",
+            "merge_selection": "Combinar la selecció",
+            "tooltip": "Unir els elements",
+            "help_merge_traces": "Unir les traçades crearà una única traçada contínua.",
+            "help_cannot_merge_traces": "Has de sel·leccionar diverses traçades per tal d'unir-les.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Elimina el track",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Tipus de capa",
+            "basemap": "Mapa base",
+            "overlay": "Capa",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Mapes base",
+            "overlays": "Capes",
+            "custom": "Personalitza",
+            "world": "Món",
+            "countries": "Països",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgària",
+            "finland": "Finlàndia",
+            "france": "França",
+            "new_zealand": "Nova Zelanda",
+            "norway": "Noruega",
+            "spain": "Espanya",
+            "sweden": "Suècia",
+            "switzerland": "Suïssa",
+            "united_kingdom": "Regne Unit",
+            "united_states": "Estats Units",
+            "mapboxOutdoors": "Mapbox a l'aire lliure",
+            "mapboxSatellite": "Mapbox Satèl·lit",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Fleca",
+            "food-store": "Food Store",
+            "eat-and-drink": "Aliments i begudes",
+            "amenities": "Equipaments",
+            "toilets": "Lavabos",
+            "water": "Aigua",
+            "shower": "Dutxa",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Gasolinera",
+            "parking": "Aparcament",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Turisme",
+            "attraction": "Atracció",
+            "viewpoint": "Mirador",
+            "hotel": "Hotel",
+            "campsite": "Campament",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicicleta",
+            "bicycle-parking": "Aparcament de bicicletes",
+            "bicycle-rental": "Lloguer de bicicletes",
+            "bicycle-shop": "Botiga de bicicletes",
+            "public-transport": "Transport públic",
+            "railway-station": "Estació de tren",
+            "tram-stop": "Parada de tramvia",
+            "bus-stop": "Parada d'autobús",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blau",
+            "bluered": "Blue Red",
+            "gray": "Gris",
+            "hot": "Popular",
+            "purple": "Lila",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distancia",
+        "elevation": "Elevació",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Velocitat",
+        "pace": "Ritme",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Pendent",
+        "surface": "Superfície",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "peus",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campament",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Botiga local",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Aigua",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Gasolinera",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Aparcament",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Lavabos",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Dutxa",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel·lar",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "URL dels fitxers (separades per comes)",
+        "drive_ids": "ID del fitxer a Google Drive (separats per comes)",
+        "basemap": "Mapa base",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Vista prèvia",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/cs.json b/website/src/locales/cs.json
new file mode 100755
index 0000000..9870820
--- /dev/null
+++ b/website/src/locales/cs.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "online editor GPX souborů",
+        "app_title": "aplikace",
+        "embed_title": "online editor GPX souborů",
+        "help_title": "nápověda",
+        "404_title": "stránka nenalezena",
+        "description": "Zobrazujte, upravujte a vytvářejte GPX soubory online s pokročilými možnostmi plánování tras a nástroji ke zpracování souborů, krásnými mapami a podrobnými vizualizacemi dat."
+    },
+    "menu": {
+        "new": "Nový",
+        "new_file": "Nový soubor",
+        "new_track": "Nová trasa",
+        "new_segment": "Nový úsek",
+        "open": "Otevřít...",
+        "duplicate": "Duplikovat",
+        "close": "Zavřít",
+        "close_all": "Zavřít vše",
+        "copy": "Kopírovat",
+        "paste": "Vložit",
+        "cut": "Vyjmout",
+        "export": "Exportovat...",
+        "export_all": "Exportovat vše...",
+        "export_options": "Možnosti exportu",
+        "support_message": "Používání nástroje je zdarma, ale jeho provoz ne. Pokud stránky používáte často, zvažte prosím podpoření projektu. Děkujeme!",
+        "support_button": "Pomozte zachovat bezplatný přístup k webu",
+        "download_file": "Stáhnout soubor",
+        "download_files": "Stáhnout soubory",
+        "edit": "Upravit",
+        "undo": "Zpět",
+        "redo": "Opakovat",
+        "delete": "Smazat",
+        "select_all": "Vybrat vše",
+        "view": "Zobrazit",
+        "elevation_profile": "Profil převýšení",
+        "vertical_file_view": "Svislý seznam souborů",
+        "switch_basemap": "Přepnout na předchozí mapový podklad",
+        "toggle_overlays": "Přepnout překrytí",
+        "toggle_3d": "Přepnout 3D",
+        "settings": "Nastavení",
+        "distance_units": "Jednotky vzdálenosti",
+        "metric": "Metrické",
+        "imperial": "Imperiální",
+        "nautical": "Námořní",
+        "velocity_units": "Jednotky rychlosti",
+        "temperature_units": "Jednotky teploty",
+        "celsius": "Stupně Celsia",
+        "fahrenheit": "Stupně Fahrenheita",
+        "language": "Jazyk",
+        "mode": "Motiv",
+        "system": "Systém",
+        "light": "Světlý",
+        "dark": "Tmavý",
+        "street_view_source": "Zdroj panoramatického zobrazení",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Mapové vrstvy...",
+        "distance_markers": "Značky vzdálenosti",
+        "direction_markers": "Směrové šipky",
+        "help": "Nápověda",
+        "more": "Více...",
+        "donate": "Přispět",
+        "ctrl": "Ctrl",
+        "click": "Kliknout",
+        "drag": "Přetáhnout",
+        "metadata": {
+            "button": "Informace...",
+            "name": "Název",
+            "description": "Popis",
+            "save": "Uložit"
+        },
+        "style": {
+            "button": "Vzhled...",
+            "color": "Barva",
+            "opacity": "Průhlednost",
+            "width": "Šířka"
+        },
+        "hide": "Skrýt",
+        "unhide": "Zobrazit skryté",
+        "center": "Vycentrovat",
+        "open_in": "Otevřít v"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Naplánovat nebo upravit trasu",
+            "activity": "Aktivita",
+            "use_routing": "Plánování trasy",
+            "use_routing_tooltip": "Přichytávání kotevních bodů k silnicím (přímé čáry, pokud je vypnuto)",
+            "allow_private": "Povolit soukromé komunikace",
+            "reverse": {
+                "button": "Obrátit",
+                "tooltip": "Obrátit směr trasy"
+            },
+            "route_back_to_start": {
+                "button": "Zpět na začátek",
+                "tooltip": "Propojit poslední bod trasy s výchozím bodem"
+            },
+            "round_trip": {
+                "button": "Cesta tam a zpět",
+                "tooltip": "Vrátit se na výchozí bod stejnou trasou"
+            },
+            "start_loop_here": "Spustit cyklus zde",
+            "help_no_file": "Vyberte trasu pro použití nástroje pro plánování trasy nebo klikněte na mapu a začněte vytvářet novou trasu.",
+            "help": "Klikněte na mapu pro přidání nového kotevního bodu nebo přetáhněte existující bod pro změnu trasy.",
+            "activities": {
+                "bike": "Kolo",
+                "racing_bike": "Silniční kolo",
+                "gravel_bike": "Gravel kolo",
+                "mountain_bike": "Horské kolo",
+                "foot": "Chůze/běh",
+                "motorcycle": "Motocykl",
+                "water": "Voda",
+                "railway": "Železnice"
+            },
+            "surface": {
+                "unknown": "Neznámý",
+                "paved": "Dlážděné",
+                "unpaved": "Nezpevněné",
+                "asphalt": "Asfalt",
+                "concrete": "Beton",
+                "chipseal": "Chipseal",
+                "cobblestone": "Dlažební kostky",
+                "unhewn_cobblestone": "Hrubá dlažba",
+                "paving_stones": "Dlažba",
+                "stepping_stones": "Nášlapné kameny",
+                "sett": "Dlažební kostky",
+                "metal": "Kov",
+                "wood": "Dřevo",
+                "compacted": "Zhutněný štěrk",
+                "fine_gravel": "Jemný štěrk",
+                "gravel": "Štěrk",
+                "pebblestone": "Oblázek",
+                "rock": "Skála",
+                "dirt": "Hlína",
+                "ground": "Pozemek",
+                "earth": "Země",
+                "snow": "Sníh",
+                "ice": "Led",
+                "salt": "Sůl",
+                "mud": "Bláto",
+                "sand": "Písek",
+                "woodchips": "Dřevěné štěpky",
+                "grass": "Tráva",
+                "grass_paver": "Zatravňovací dlažba"
+            },
+            "error": {
+                "from": "Počáteční bod je příliš daleko od nejbližší cesty",
+                "via": "Průchozí bod je příliš daleko od nejbližší cesty",
+                "to": "Koncový bod je příliš daleko od nejbližší cesty",
+                "timeout": "Výpočet trasy trval příliš dlouho, zkuste přidat body blíže k sobě"
+            }
+        },
+        "scissors": {
+            "tooltip": "Oříznout nebo rozdělit",
+            "crop": "Oříznout",
+            "split_as": "Rozdělit trasu na",
+            "help_invalid_selection": "Vyberte trasu k oříznutí nebo rozdělení.",
+            "help": "Použijte posuvník k oříznutí trasy nebo ji rozdělte kliknutím na jednu z rozdělovacích značek nebo na trasu samotnou."
+        },
+        "time": {
+            "tooltip": "Správa časových dat",
+            "start": "Začátek",
+            "end": "Konec",
+            "total_time": "Doba v pohybu",
+            "pick_date": "Zvolte datum",
+            "artificial": "Vytvořit realistické časové údaje",
+            "update": "Aktualizace časových dat",
+            "help": "Použijte formulář pro nastavení nových časových dat.",
+            "help_invalid_selection": "Vyberte jednu trasu pro správu časových dat."
+        },
+        "merge": {
+            "merge_traces": "Připojit trasy",
+            "merge_contents": "Sloučit obsah a zachovat trasy oddělené",
+            "merge_selection": "Sloučit výběr",
+            "tooltip": "Sloučit položky",
+            "help_merge_traces": "Připojení vybraných tras vytvoří jednu spojitou trasu.",
+            "help_cannot_merge_traces": "Váš výběr musí obsahovat několik tras, které je chcete připojit.",
+            "help_merge_contents": "Slučování obsahu vybraných položek seskupí veškerý obsah do první položky.",
+            "help_cannot_merge_contents": "",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extrahovat obsah do oddělených položek",
+            "button": "Extrahovat",
+            "help": "Rozbalení obsahu vybraných položek vytvoří samostatnou položku pro každou část obsahu.",
+            "help_invalid_selection": "Váš výběr musí obsahovat položky s více trasami, které je chcete extrahovat."
+        },
+        "elevation": {
+            "button": "Požadavek na výšková data",
+            "help": "Požadavek na výšková data vymaže stávající data nadmořské výšky, pokud existují, a nahradí je daty z Mapboxu.",
+            "help_no_selection": "Vyberte položku souboru pro vyžádání výškových dat."
+        },
+        "waypoint": {
+            "tooltip": "Vytvořit a upravit body zájmu",
+            "icon": "Ikona",
+            "link": "Link",
+            "longitude": "Zeměpisná délka",
+            "latitude": "Zeměpisná šířka",
+            "create": "Vytvořit bod zájmu",
+            "add": "Přidat bod zájmu do souboru",
+            "help": "Vyplňte formulář pro vytvoření nového bodu zájmu nebo klikněte na existující bod zájmu pro jeho úpravu. Pro vyplnění souřadnic klikněte na mapu nebo přetáhněte bod zájmu pro jeho změnu.",
+            "help_no_selection": "Vyberte soubor pro vytvoření nebo úpravu bodů zájmu."
+        },
+        "reduce": {
+            "tooltip": "Snížit počet bodů GPS",
+            "tolerance": "Tolerance",
+            "number_of_points": "Počet bodů GPS",
+            "button": "Zjednodušit",
+            "help": "Pomocí posuvníku zvolte počet bodů, které chcete zachovat.",
+            "help_no_selection": "Vyberte trasu pro snížení počtu jejích GPS bodů."
+        },
+        "clean": {
+            "tooltip": "Vyčistit body GPS a body zájmu v obdélníkovém výběru",
+            "delete_trackpoints": "Odstranit body GPS",
+            "delete_waypoints": "Odstranit body zájmu",
+            "delete_inside": "Odstranit uvnitř výběru",
+            "delete_outside": "Odstranit mimo výběr",
+            "button": "Smazat",
+            "help": "Vyberte obdélníkovou oblast na mapě pro odstranění bodů GPS a bodů zájmu.",
+            "help_no_selection": "Vyberte trasu pro vyčištění bodů GPS a bodů zájmu."
+        }
+    },
+    "layers": {
+        "settings": "Nastavení vrstev",
+        "settings_help": "Vyberte vrstvy mapy, které chcete zobrazit v rozhraní, přidejte vlastní a upravte jejich nastavení.",
+        "selection": "Výběr vrstev",
+        "custom_layers": {
+            "title": "Vlastní vrstvy",
+            "new": "Nová vlastní vrstva",
+            "edit": "Upravit vlastní vrstvu",
+            "urls": "Adresy URL",
+            "url_placeholder": "WMTS, WMS nebo Mapbox style JSON",
+            "max_zoom": "Max. přiblížení",
+            "layer_type": "Typ vrstvy",
+            "basemap": "Základní mapa",
+            "overlay": "Překrytí",
+            "create": "Vytvořit vrstvu",
+            "update": "Aktualizovat vrstvu"
+        },
+        "opacity": "Průhlednost překryvu",
+        "label": {
+            "basemaps": "Základní mapy",
+            "overlays": "Překrytí",
+            "custom": "Vlastní",
+            "world": "Svět",
+            "countries": "Státy",
+            "belgium": "Belgie",
+            "bulgaria": "Bulharsko",
+            "finland": "Finsko",
+            "france": "Francie",
+            "new_zealand": "Nový Zéland",
+            "norway": "Norsko",
+            "spain": "Španělsko",
+            "sweden": "Švédsko",
+            "switzerland": "Švýcarsko",
+            "united_kingdom": "Velká Británie",
+            "united_states": "Spojené státy",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Rastrová",
+            "swisstopoVector": "swisstopo Vektorová",
+            "swisstopoSatellite": "swisstopo Satelitní",
+            "ignBe": "IGN Topografická",
+            "ignFrPlan": "IGN Plán",
+            "ignFrTopo": "IGN Topografická",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satelitní",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topografická",
+            "swedenSatellite": "Lantmäteriet Satelitní",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Vrstevnice",
+            "swisstopoHiking": "swisstopo Turistická",
+            "swisstopoHikingClosures": "swisstopo Turistické uzávěry",
+            "swisstopoCycling": "swisstopo Cyklistická",
+            "swisstopoCyclingClosures": "swisstopo Cyklistické uzávěry",
+            "swisstopoMountainBike": "swisstopo Horské kolo",
+            "swisstopoMountainBikeClosures": "swisstopo Uzávěry pro horská kola",
+            "swisstopoSkiTouring": "swisstopo Běžky",
+            "ignFrCadastre": "IGN Katastrální",
+            "ignSlope": "IGN Vrstevnice",
+            "ignSkiTouring": "IGN Běžky",
+            "waymarked_trails": "Turistické značení",
+            "waymarkedTrailsHiking": "Turistická",
+            "waymarkedTrailsCycling": "Cyklistická",
+            "waymarkedTrailsMTB": "Horské kolo",
+            "waymarkedTrailsSkating": "Kolečkové brusle",
+            "waymarkedTrailsHorseRiding": "Jízda na koni",
+            "waymarkedTrailsWinter": "Zimní",
+            "points_of_interest": "Body zájmu",
+            "food": "Jídlo",
+            "bakery": "Pekařství",
+            "food-store": "Obchod s potravinami",
+            "eat-and-drink": "Jídlo a pití",
+            "amenities": "Vybavení",
+            "toilets": "Toalety",
+            "water": "Voda",
+            "shower": "Sprcha",
+            "shelter": "Přístřeší",
+            "motorized": "Automobily a motocykly",
+            "fuel-station": "Čerpací stanice",
+            "parking": "Parkoviště",
+            "garage": "Autoopravny",
+            "barrier": "Zábrana",
+            "tourism": "Cestovní ruch",
+            "attraction": "Atrakce",
+            "viewpoint": "Vyhlídka",
+            "hotel": "Hotel",
+            "campsite": "Stanový kemp",
+            "hut": "Chata",
+            "picnic": "Místo pro piknik",
+            "summit": "Vrchol",
+            "pass": "Průsmyk",
+            "climbing": "Horolezectví",
+            "bicycle": "Jízdní kolo",
+            "bicycle-parking": "Parkoviště pro kola",
+            "bicycle-rental": "Půjčovna jízdních kol",
+            "bicycle-shop": "Prodejna jízdních kol",
+            "public-transport": "Veřejná doprava",
+            "railway-station": "Železniční stanice",
+            "tram-stop": "Zastávka tramvaje",
+            "bus-stop": "Autobusová zastávka",
+            "ferry": "Trajekt"
+        },
+        "color": {
+            "blue": "Modrá",
+            "bluered": "Modrá Červená",
+            "gray": "Šedá",
+            "hot": "Horké",
+            "purple": "Fialová",
+            "orange": "Oranžová"
+        }
+    },
+    "chart": {
+        "show_slope": "Zobrazit sklon svahu",
+        "show_surface": "Zobrazit údaje o povrchu",
+        "show_speed": "Zobrazit údaje o rychlosti",
+        "show_pace": "Zobrazit údaje o tempu",
+        "show_heartrate": "Zobrazit údaje o tepové frekvenci",
+        "show_cadence": "Zobrazit údaje o kadenci",
+        "show_temperature": "Zobrazit údaje o teplotě",
+        "show_power": "Zobrazit údaje o energii"
+    },
+    "quantities": {
+        "distance": "Vzdálenost",
+        "elevation": "Nadmořská výška",
+        "elevation_gain_loss": "Stoupání a klesání",
+        "temperature": "Teplota",
+        "speed": "Rychlost",
+        "pace": "Tempo",
+        "heartrate": "Tepová frekvence",
+        "cadence": "Kadence",
+        "power": "Energie",
+        "slope": "Sklon",
+        "surface": "Povrch",
+        "time": "Čas",
+        "moving": "V pohybu",
+        "total": "Celkem"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "stop",
+        "kilometers": "km",
+        "miles": "mil",
+        "nautical_miles": "NM",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "ot/min",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Soubor",
+        "files": "Soubory",
+        "track": "Stopa",
+        "tracks": "Stopy",
+        "segment": "Segment",
+        "segments": "Úseky",
+        "waypoint": "Bod zájmu",
+        "waypoints": "Body zájmu",
+        "symbol": {
+            "alert": "Upozornění",
+            "anchor": "Kotva",
+            "bank": "Banka",
+            "beach": "Pláž",
+            "bike_trail": "Cyklistický trail",
+            "binoculars": "Dalekohled",
+            "bridge": "Most",
+            "building": "Budova",
+            "campground": "Stanový kemp",
+            "car": "Auto",
+            "car_repair": "Autoopravna",
+            "convenience_store": "Smýšené zboží",
+            "crossing": "Křížení",
+            "department_store": "Obchodní dům",
+            "drinking_water": "Voda",
+            "exit": "Sjezd",
+            "lodge": "Chata",
+            "lodging": "Ubytování",
+            "forest": "Les",
+            "gas_station": "Čerpací stanice",
+            "ground_transportation": "Pozemní doprava",
+            "hotel": "Hotel",
+            "house": "Dům",
+            "information": "Informace",
+            "park": "Park",
+            "parking_area": "Parkoviště",
+            "pharmacy": "Lékárna",
+            "picnic_area": "Místo pro piknik",
+            "restaurant": "Restaurace",
+            "restricted_area": "Nepřístupná oblast",
+            "restroom": "Toalety",
+            "road": "Silnice",
+            "scenic_area": "Oblast s výhledem",
+            "shelter": "Přístřeší",
+            "shopping_center": "Nákupní centrum",
+            "shower": "Sprcha",
+            "summit": "Vrchol",
+            "telephone": "Telefon",
+            "tunnel": "Tunel",
+            "water_source": "Vodní zdroj"
+        }
+    },
+    "homepage": {
+        "website": "Webová stránka",
+        "home": "Domů",
+        "app": "Aplikace",
+        "contact": "Kontakt",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "E-mail",
+        "contribute": "Zapojte se",
+        "supported_by": "podporuje",
+        "support_button": "Podpořte gpx.rnmkcy.eu na Ko-fi",
+        "route_planning": "Plánování trasy",
+        "route_planning_description": "Intuitivní rozhraní pro vytváření itinerářů přizpůsobených jakémukoli sportu založené na OpenStreetMap datech.",
+        "file_processing": "Pokročilé zpracování souborů",
+        "file_processing_description": "Sada nástrojů pro provádění všech běžných úkolů zpracování souborů, které mohou být aplikovány na více souborů najednou.",
+        "maps": "Globální a místní mapy",
+        "maps_description": "Široká nabídka mapových podkladů, překryvů a bodů zájmu pro naplánování vašeho příštího dobrodružství v přírodě nebo vizualizaci vašich nejnovějších úspěchů.",
+        "data_visualization": "Vizualizace dat",
+        "data_visualization_description": "Interaktivní výškový profil s podrobnými statistikami pro analýzu zaznamenaných činností a budoucích cílů.",
+        "identity": "Zdarma, bez reklam a open source",
+        "identity_description": "Webová stránka je zdarma k použití, bez reklam a zdrojový kód je veřejně dostupný na GitHubu. To je možné jen díky neuvěřitelné podpoře komunity."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Hledat",
+            "clear": "Vyčistit",
+            "cancel": "Storno",
+            "recent": "Nedávná hledání",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Oblíbené",
+            "remove_favorite": "Odstranit toto hledání z oblíbených",
+            "to_select": "vybrat",
+            "to_navigate": "to navigate",
+            "to_close": "zavřít",
+            "no_results": "Žádné výsledky pro",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Vytvořte si vlastní mapu",
+        "mapbox_token": "Přístupový token Mapbox",
+        "file_urls": "URL souborů (oddělené čárkami)",
+        "drive_ids": "ID souborů Google Drive (oddělené čárkami)",
+        "basemap": "Základní mapa",
+        "height": "Výška",
+        "fill_by": "Vyplnit",
+        "none": "Nic",
+        "show_controls": "Zobrazit ovládací prvky",
+        "manual_camera": "Ruční pohled",
+        "manual_camera_description": "Pro úpravu pohledu můžete přesunout mapu níže.",
+        "latitude": "Zeměpisná šířka",
+        "longitude": "Zeměpisná délka",
+        "zoom": "Přiblížení",
+        "pitch": "Náklon",
+        "bearing": "Směr",
+        "preview": "Náhled",
+        "code": "Kód pro integraci"
+    },
+    "webgl2_required": "Pro zobrazení mapy je vyžadováno WebGL 2.",
+    "enable_webgl2": "Zjistěte, jak ve vašem prohlížeči povolit WebGL 2",
+    "page_not_found": "stránka nenalezena"
+}
\ No newline at end of file
diff --git a/website/src/locales/da.json b/website/src/locales/da.json
new file mode 100755
index 0000000..7524ba0
--- /dev/null
+++ b/website/src/locales/da.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "help",
+        "404_title": "page not found",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Duplicate",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "Export...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Delete",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Settings",
+        "distance_units": "Distance units",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/de.json b/website/src/locales/de.json
new file mode 100755
index 0000000..b3479de
--- /dev/null
+++ b/website/src/locales/de.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "der online GPX Datei Editor",
+        "app_title": "app",
+        "embed_title": "der online GPX Datei Editor",
+        "help_title": "hilfe",
+        "404_title": "Seite nicht gefunden",
+        "description": "GPX-Dateien online anzeigen, bearbeiten und erstellen mit erweiterten Routenplanungs- und Dateiverarbeitungswerkzeugen, schönen Karten und detaillierten Datenvisualisierungen."
+    },
+    "menu": {
+        "new": "Neu",
+        "new_file": "Neue Datei",
+        "new_track": "Neue Route",
+        "new_segment": "Neues Segment",
+        "open": "Öffnen...",
+        "duplicate": "Duplizieren",
+        "close": "Schließen",
+        "close_all": "Alle schließen",
+        "copy": "Kopieren",
+        "paste": "Einfügen",
+        "cut": "Ausschneiden",
+        "export": "Exportieren...",
+        "export_all": "Alle exportieren...",
+        "export_options": "Export Einstellungen",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Helfen Sie die Website kostenlos zu halten",
+        "download_file": "Datei herunterladen",
+        "download_files": "Dateien herunterladen",
+        "edit": "Bearbeiten",
+        "undo": "Rückgängig",
+        "redo": "Wiederholen",
+        "delete": "Löschen",
+        "select_all": "Alle auswählen",
+        "view": "Ansicht",
+        "elevation_profile": "Höhenprofil",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "3D umschalten",
+        "settings": "Einstellungen",
+        "distance_units": "Entfernungseinheiten",
+        "metric": "Metrisch",
+        "imperial": "Imperial",
+        "nautical": "Nautisch",
+        "velocity_units": "Geschwindigkeitseinheiten",
+        "temperature_units": "Temperatureinheiten",
+        "celsius": "Grad Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Sprache",
+        "mode": "Design",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Entfernungsmarkierungen",
+        "direction_markers": "Direction arrows",
+        "help": "Hilfe",
+        "more": "More...",
+        "donate": "Spenden",
+        "ctrl": "Strg",
+        "click": "Klick",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Bezeichnung",
+            "description": "Beschreibung",
+            "save": "Speichern"
+        },
+        "style": {
+            "button": "Darstellung...",
+            "color": "Farbe",
+            "opacity": "Transparenz",
+            "width": "Breite"
+        },
+        "hide": "Verbergen",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Aktivität",
+            "use_routing": "Routenführung",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Umkehren",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Schleife hier starten",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Rad",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel Bike",
+                "mountain_bike": "Mountainbike",
+                "foot": "Laufen/Wandern",
+                "motorcycle": "Moped",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Gepflastert",
+                "unpaved": "Unbefestigt",
+                "asphalt": "Asphalt",
+                "concrete": "Beton",
+                "chipseal": "Chipseal",
+                "cobblestone": "Kopfsteinpflaster",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metall",
+                "wood": "Holz",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Schotter",
+                "pebblestone": "Kieselsteine",
+                "rock": "Fels",
+                "dirt": "Dreck",
+                "ground": "Boden",
+                "earth": "Erde",
+                "snow": "Schnee",
+                "ice": "Eis",
+                "salt": "Salz",
+                "mud": "Matsch",
+                "sand": "Sand",
+                "woodchips": "Holzhäcksel",
+                "grass": "Gras",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Zeit in Bewegung",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Auswahl zusammenführen",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Löschen",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Ebenenart",
+            "basemap": "Basiskarte",
+            "overlay": "Einblendung",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basiskarte",
+            "overlays": "Ebenen",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgarien",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellit",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Fahrradgeschäft",
+            "public-transport": "Öffentliche Verkehrsmittel",
+            "railway-station": "Bahnhof",
+            "tram-stop": "Straßenbahnhaltestelle",
+            "bus-stop": "Bushaltestelle",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blau",
+            "bluered": "Blue Red",
+            "gray": "Grau",
+            "hot": "Heiß",
+            "purple": "Lila",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distanz",
+        "elevation": "Anstieg",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperatur",
+        "speed": "Geschwindigkeit",
+        "pace": "Tempo",
+        "heartrate": "Heart rate",
+        "cadence": "Trittfrequenz",
+        "power": "Leistung",
+        "slope": "Gefälle",
+        "surface": "Oberfläche",
+        "time": "Zeit",
+        "moving": "Moving",
+        "total": "Gesamt"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Strecke",
+        "tracks": "Strecken",
+        "segment": "Abschnitt",
+        "segments": "Abschnitte",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Abbrechen",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "Datei URLs (getrennt durch Kommas)",
+        "drive_ids": "Google Drive Datei IDs (getrennt durch Kommas)",
+        "basemap": "Basiskarte",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Vorschau",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/el.json b/website/src/locales/el.json
new file mode 100755
index 0000000..551feec
--- /dev/null
+++ b/website/src/locales/el.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "βοήθεια",
+        "404_title": "page not found",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Δημιουργία Αντιγράφου",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "Export...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Διαγραφή",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Settings",
+        "distance_units": "Μονάδες απόστασης",
+        "metric": "Μονάδες Μέτρησης",
+        "imperial": "Αγγλοσαξωνικό Σύστημα",
+        "nautical": "Nautical",
+        "velocity_units": "Μονάδες ταχύτητας",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Δείκτες απόστασης",
+        "direction_markers": "Direction arrows",
+        "help": "Βοήθεια",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Δραστηριότητα",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Αντίστροφη",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Ποδήλατο",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Ποδήλατο βουνού",
+                "foot": "Τρέξιμο/πεζοπορία",
+                "motorcycle": "Μοτοσικλέτα",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Ασφαλτοστρωμένο",
+                "unpaved": "Μη ασφαλτοστρωμένο",
+                "asphalt": "Άσφαλτος",
+                "concrete": "Τσιμέντο",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Μέταλλο",
+                "wood": "Ξύλο",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Χαλίκι",
+                "pebblestone": "Pebblestone",
+                "rock": "Βράχος",
+                "dirt": "Βρωμιά",
+                "ground": "Χώμα",
+                "earth": "Γη",
+                "snow": "Χιόνι",
+                "ice": "Πάγος",
+                "salt": "Αλάτι",
+                "mud": "Λάσπη",
+                "sand": "Άμμος",
+                "woodchips": "Woodchips",
+                "grass": "Γρασίδι",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Διάρκεια κίνησης",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Διαγραφή",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Βασικός Χάρτης",
+            "overlay": "Επικαλύψεις",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Βουλγαρία",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Μπλέ",
+            "bluered": "Blue Red",
+            "gray": "Γκρίζο",
+            "hot": "Ζεστό",
+            "purple": "Μωβ",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Απόσταση",
+        "elevation": "Υψόμετρο",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Ταχύτητα",
+        "pace": "Ρυθμός",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Πλαγιά",
+        "surface": "Επιφάνεια",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Σύνολο"
+    },
+    "units": {
+        "meters": "μέτρα",
+        "feet": "πόδια",
+        "kilometers": "χλμ",
+        "miles": "μίλια",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Διαδρομή",
+        "tracks": "Διαδρομές",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Ακύρωση",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "Υπερσύνδεσμοι URL Αρχείων (διαχωρισμένοι με κόμμα)",
+        "drive_ids": "Αναγνωριστικά αρχείων Google Drive ID (διαχωρισμένα με κόμματα)",
+        "basemap": "Βασικός Χάρτης",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Προεπισκόπηση",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
new file mode 100755
index 0000000..7524ba0
--- /dev/null
+++ b/website/src/locales/en.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "help",
+        "404_title": "page not found",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Duplicate",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "Export...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Delete",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Settings",
+        "distance_units": "Distance units",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/es.json b/website/src/locales/es.json
new file mode 100755
index 0000000..a553723
--- /dev/null
+++ b/website/src/locales/es.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "el editor online de archivos GPX",
+        "app_title": "app",
+        "embed_title": "el editor online de archivos GPX",
+        "help_title": "ayuda",
+        "404_title": "página no encontrada",
+        "description": "Ver, editar y crear archivos GPX online con capacidades de planificación avanzada de rutas y herramientas de procesamiento de archivos, hermosos mapas y visualizaciones detalladas de datos."
+    },
+    "menu": {
+        "new": "Nuevo",
+        "new_file": "Nuevo archivo",
+        "new_track": "Nueva pista",
+        "new_segment": "Nuevo segmento",
+        "open": "Abrir...",
+        "duplicate": "Duplicar track",
+        "close": "Cerrar",
+        "close_all": "Cerrar todo",
+        "copy": "Copiar",
+        "paste": "Pegar",
+        "cut": "Cortar",
+        "export": "Exportar...",
+        "export_all": "Exportar todo...",
+        "export_options": "Opciones de exportación",
+        "support_message": "El uso de la herramienta es gratuito, pero no así su ejecución. Por favor, considere apoyar este sitio web si lo usa a menudo. ¡Gracias!",
+        "support_button": "Ayude a mantener gratuito este sitio web",
+        "download_file": "Descargar archivo",
+        "download_files": "Descargar archivos",
+        "edit": "Editar",
+        "undo": "Deshacer",
+        "redo": "Rehacer",
+        "delete": "Eliminar track",
+        "select_all": "Seleccionar todo",
+        "view": "Vista",
+        "elevation_profile": "Perfil de altura",
+        "vertical_file_view": "Lista vertical de archivos",
+        "switch_basemap": "Cambiar al mapa base anterior",
+        "toggle_overlays": "Alternar capas",
+        "toggle_3d": "Alternar 3D",
+        "settings": "Configuración",
+        "distance_units": "Unidades de distancia",
+        "metric": "Métrico",
+        "imperial": "Imperial",
+        "nautical": "Náutico",
+        "velocity_units": "Unidades de velocidad",
+        "temperature_units": "Unidades de temperatura",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Idioma",
+        "mode": "Tema",
+        "system": "Sistema",
+        "light": "Claro",
+        "dark": "Oscuro",
+        "street_view_source": "Fuente de vista de calle",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Capas de mapa...",
+        "distance_markers": "Indicadores de distancia",
+        "direction_markers": "Flechas de dirección",
+        "help": "Ayuda",
+        "more": "Más...",
+        "donate": "Donar",
+        "ctrl": "Ctrl",
+        "click": "Clic",
+        "drag": "Arrastrar",
+        "metadata": {
+            "button": "Info...",
+            "name": "Nombre",
+            "description": "Descripción",
+            "save": "Guardar"
+        },
+        "style": {
+            "button": "Apariencia...",
+            "color": "Color",
+            "opacity": "Opacidad",
+            "width": "Anchura"
+        },
+        "hide": "Ocultar",
+        "unhide": "Mostrar",
+        "center": "Centrar",
+        "open_in": "Abrir en"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planificar o editar una ruta",
+            "activity": "Actividad",
+            "use_routing": "Ruteo",
+            "use_routing_tooltip": "Conectar puntos de anclaje a través de la red viaria o en línea recta si está desactivado",
+            "allow_private": "Permitir caminos privados",
+            "reverse": {
+                "button": "Invertir track",
+                "tooltip": "Invertir la dirección de la ruta"
+            },
+            "route_back_to_start": {
+                "button": "Volver al inicio",
+                "tooltip": "Conectar el último punto de la ruta con el punto de inicio"
+            },
+            "round_trip": {
+                "button": "Ida y vuelta",
+                "tooltip": "Volver al punto de inicio por la misma ruta"
+            },
+            "start_loop_here": "Iniciar bucle aquí",
+            "help_no_file": "Seleccione un rastro para utilizar la herramienta de enrutamiento o haga clic en el mapa para empezar a crear una nueva ruta.",
+            "help": "Haga clic en el mapa para añadir un nuevo punto ancla o arrastre los existentes para cambiar la ruta.",
+            "activities": {
+                "bike": "En bicicleta",
+                "racing_bike": "Bicicleta de carretera",
+                "gravel_bike": "Bicicleta gravel",
+                "mountain_bike": "Bicicleta de montaña",
+                "foot": "Correr/Caminar",
+                "motorcycle": "Motocicleta",
+                "water": "Agua",
+                "railway": "Ferrocarril"
+            },
+            "surface": {
+                "unknown": "Desconocido",
+                "paved": "Pavimentado",
+                "unpaved": "Sin pavimento",
+                "asphalt": "Asfalto",
+                "concrete": "Hormigón",
+                "chipseal": "Pavimento delgado",
+                "cobblestone": "Adoquinado",
+                "unhewn_cobblestone": "Adoquín sin labrar",
+                "paving_stones": "Adoquines",
+                "stepping_stones": "Peldaños",
+                "sett": "Adoquín",
+                "metal": "Metal",
+                "wood": "Madera",
+                "compacted": "Grava compacta",
+                "fine_gravel": "Grava fina",
+                "gravel": "Grava",
+                "pebblestone": "Canto rodado",
+                "rock": "Piedra",
+                "dirt": "Tierra",
+                "ground": "Tierra",
+                "earth": "Tierra natural",
+                "snow": "Nevado",
+                "ice": "Helado",
+                "salt": "Salado",
+                "mud": "Barro",
+                "sand": "Arena",
+                "woodchips": "Virutas de madera",
+                "grass": "Hierba",
+                "grass_paver": "Pavimento con césped"
+            },
+            "error": {
+                "from": "El punto de inicio está demasiado lejos de la carretera más cercana",
+                "via": "El punto de paso está demasiado lejos de la carretera más cercana",
+                "to": "El punto final está demasiado lejos de la carretera más cercana",
+                "timeout": "Calcular la ruta llevó demasiado tiempo, intente añadir puntos más cercanos entre ellos"
+            }
+        },
+        "scissors": {
+            "tooltip": "Recortar o dividir",
+            "crop": "Recortar",
+            "split_as": "Dividir el rastro en",
+            "help_invalid_selection": "Seleccione un rastro para recortar o dividir.",
+            "help": "Use el control deslizante para recortar el trazado o dividirlo haciendo clic en uno de los marcadores o en el propio trazado."
+        },
+        "time": {
+            "tooltip": "Gestionar datos de tiempo",
+            "start": "Inicio",
+            "end": "Fin",
+            "total_time": "Tiempo en movimiento",
+            "pick_date": "Seleccione una fecha",
+            "artificial": "Crear datos de tiempo realistas",
+            "update": "Actualizar datos de tiempo",
+            "help": "Use el formulario para establecer nuevos datos de tiempo.",
+            "help_invalid_selection": "Seleccione un único trazado para gestionar sus datos de tiempo."
+        },
+        "merge": {
+            "merge_traces": "Conectar los trazados",
+            "merge_contents": "Combinar los contenidos y mantener los trazados desconectados",
+            "merge_selection": "Combinar selección",
+            "tooltip": "Combinar elementos",
+            "help_merge_traces": "Conectar los trazados seleccionados creará un único trazado continuo.",
+            "help_cannot_merge_traces": "Su selección debe contener varios trazados para conectarlos.",
+            "help_merge_contents": "Combinar el contenido de los elementos seleccionados los agrupará dentro del primer elemento.",
+            "help_cannot_merge_contents": "Su selección debe contener varios elementos para combinar sus contenidos.",
+            "selection_tip": "Consejo: use {KEYBOARD_SHORTCUT} para añadir elementos a la selección."
+        },
+        "extract": {
+            "tooltip": "Extraer contenidos en elementos separados",
+            "button": "Extraer",
+            "help": "Extraer los contenidos de los elementos seleccionados creará un elemento separado para cada uno.",
+            "help_invalid_selection": "Su selección debe contener elementos con múltiples trazados para extraerlos."
+        },
+        "elevation": {
+            "button": "Solicitar datos de desnivel",
+            "help": "La solicitud de datos de desnivel borrará los datos de desnivel existentes, si los hay, y los reemplazará con datos de Mapbox.",
+            "help_no_selection": "Seleccione un elemento del archivo para solicitar datos de desnivel."
+        },
+        "waypoint": {
+            "tooltip": "Crear y editar puntos de interés",
+            "icon": "Icono",
+            "link": "Enlace",
+            "longitude": "Longitud",
+            "latitude": "Latitud",
+            "create": "Crear punto de interés",
+            "add": "Añadir punto de interés al archivo",
+            "help": "Rellene el formulario para crear un nuevo punto de interés o haga clic en uno existente para editarlo. Haga clic en el mapa para rellenar las coordenadas o arrastre los puntos de interés para moverlos.",
+            "help_no_selection": "Seleccione un archivo para crear o editar puntos de interés."
+        },
+        "reduce": {
+            "tooltip": "Reducir la cantidad de puntos GPS",
+            "tolerance": "Tolerancia",
+            "number_of_points": "Cantidad de puntos GPS",
+            "button": "Minimizar",
+            "help": "Use la barra deslizante para elegir la cantidad de puntos GPS a conservar.",
+            "help_no_selection": "Seleccione un rastro para reducir su cantidad de puntos GPS."
+        },
+        "clean": {
+            "tooltip": "Limpiar puntos GPS y puntos de interés con una selección rectangular",
+            "delete_trackpoints": "Eliminar puntos GPS",
+            "delete_waypoints": "Eliminar puntos de interés",
+            "delete_inside": "Eliminar interior de la selección",
+            "delete_outside": "Eliminar exterior de la selección",
+            "button": "Eliminar track",
+            "help": "Seleccione un área rectangular en el mapa para eliminar puntos GPS y puntos de interés.",
+            "help_no_selection": "Seleccione un rastro para limpiar puntos GPS y puntos de interés."
+        }
+    },
+    "layers": {
+        "settings": "Ajustes de capa",
+        "settings_help": "Seleccione las capas del mapa que desea mostrar en la interfaz, añada capas personalizadas y cambie sus ajustes.",
+        "selection": "Selección de capa",
+        "custom_layers": {
+            "title": "Capas personalizadas",
+            "new": "Nueva capa personalizada",
+            "edit": "Editar capa personalizada",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS o JSON estilo Mapbox",
+            "max_zoom": "Zoom máximo",
+            "layer_type": "Tipo de capa",
+            "basemap": "Mapa base",
+            "overlay": "Superponer",
+            "create": "Crear capa",
+            "update": "Actualizar capa"
+        },
+        "opacity": "Opacidad de la capa superpuesta",
+        "label": {
+            "basemaps": "Mapas base",
+            "overlays": "Capas",
+            "custom": "Personalizar",
+            "world": "Mundo",
+            "countries": "Países",
+            "belgium": "Bélgica",
+            "bulgaria": "Bulgaria",
+            "finland": "Finlandia",
+            "france": "Francia",
+            "new_zealand": "Nueva Zelanda",
+            "norway": "Noruega",
+            "spain": "España",
+            "sweden": "Suecia",
+            "switzerland": "Suiza",
+            "united_kingdom": "Reino Unido",
+            "united_states": "Estados Unidos",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satélite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satélite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Encuesta Ordnance",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Satélite Lantmat",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "Gravel bikerouter.de",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Senderismo",
+            "swisstopoHikingClosures": "swisstopo Rutas Senderismo",
+            "swisstopoCycling": "swisstopo Ciclismo",
+            "swisstopoCyclingClosures": "swisstopo Rutas Ciclismo",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo Rutas MTB",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Pendiente",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Caminos marcados",
+            "waymarkedTrailsHiking": "Senderismo",
+            "waymarkedTrailsCycling": "Ciclismo",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Patín",
+            "waymarkedTrailsHorseRiding": "Equitación",
+            "waymarkedTrailsWinter": "Invierno",
+            "points_of_interest": "Puntos de interés",
+            "food": "Comida",
+            "bakery": "Panadería",
+            "food-store": "Tienda de alimentación",
+            "eat-and-drink": "Comida y bebida",
+            "amenities": "Servicios",
+            "toilets": "Baños",
+            "water": "Agua",
+            "shower": "Ducha",
+            "shelter": "Refugio",
+            "motorized": "Coches y motos",
+            "fuel-station": "Gasolinera",
+            "parking": "Aparcamiento",
+            "garage": "Taller",
+            "barrier": "Barrera",
+            "tourism": "Turismo",
+            "attraction": "Atracción",
+            "viewpoint": "Mirador",
+            "hotel": "Hotel",
+            "campsite": "Camping",
+            "hut": "Cabaña",
+            "picnic": "Zona de picnic",
+            "summit": "Cima",
+            "pass": "Paso",
+            "climbing": "Escalada",
+            "bicycle": "Bicicleta",
+            "bicycle-parking": "Aparcamiento de bicicletas",
+            "bicycle-rental": "Alquiler de bicicletas",
+            "bicycle-shop": "Tienda de bicicletas",
+            "public-transport": "Transporte público",
+            "railway-station": "Estación de tren",
+            "tram-stop": "Parada de tranvía",
+            "bus-stop": "Parada de autobús",
+            "ferry": "Ferri"
+        },
+        "color": {
+            "blue": "Azul",
+            "bluered": "Azul Rojo",
+            "gray": "Gris",
+            "hot": "Destacado",
+            "purple": "Morado",
+            "orange": "Naranja"
+        }
+    },
+    "chart": {
+        "show_slope": "Mostrar datos de pendiente",
+        "show_surface": "Mostrar datos de superficie",
+        "show_speed": "Mostrar datos de velocidad",
+        "show_pace": "Mostrar datos de ritmo",
+        "show_heartrate": "Mostrar datos de ritmo cardíaco",
+        "show_cadence": "Mostrar datos de cadencia",
+        "show_temperature": "Mostrar datos de temperatura",
+        "show_power": "Mostrar datos de potencia"
+    },
+    "quantities": {
+        "distance": "Distancia",
+        "elevation": "Altitud",
+        "elevation_gain_loss": "Ganancia y pérdida de desnivel",
+        "temperature": "Temperatura",
+        "speed": "Velocidad",
+        "pace": "Ritmo",
+        "heartrate": "Ritmo cardíaco",
+        "cadence": "Cadencia",
+        "power": "Potencia",
+        "slope": "Pendiente",
+        "surface": "Superficie",
+        "time": "Tiempo",
+        "moving": "Movimiento",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "ºC",
+        "fahrenheit": "ºF",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "millas/h",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/milla",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "ppm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Archivo",
+        "files": "Archivos",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segmento",
+        "segments": "Segmentos",
+        "waypoint": "Punto de interés",
+        "waypoints": "Puntos de interés",
+        "symbol": {
+            "alert": "Alerta",
+            "anchor": "Ancla",
+            "bank": "Banco",
+            "beach": "Playa",
+            "bike_trail": "Sendero de bicicleta",
+            "binoculars": "Prismáticos",
+            "bridge": "Puente",
+            "building": "Edificio",
+            "campground": "Camping",
+            "car": "Coche",
+            "car_repair": "Taller",
+            "convenience_store": "Tienda de 24 horas",
+            "crossing": "Cruce",
+            "department_store": "Grandes Almacenes",
+            "drinking_water": "Agua",
+            "exit": "Salida",
+            "lodge": "Cabaña",
+            "lodging": "Alojamiento",
+            "forest": "Bosque",
+            "gas_station": "Gasolinera",
+            "ground_transportation": "Transporte Terrestre",
+            "hotel": "Hotel",
+            "house": "Casa",
+            "information": "Información",
+            "park": "Parque",
+            "parking_area": "Aparcamiento",
+            "pharmacy": "Farmacia",
+            "picnic_area": "Zona de picnic",
+            "restaurant": "Restaurante",
+            "restricted_area": "Área Restringida",
+            "restroom": "Baños",
+            "road": "Carretera",
+            "scenic_area": "Zona Pintoresca",
+            "shelter": "Refugio",
+            "shopping_center": "Centro Comercial",
+            "shower": "Ducha",
+            "summit": "Cima",
+            "telephone": "Teléfono",
+            "tunnel": "Túnel",
+            "water_source": "Fuente de Agua"
+        }
+    },
+    "homepage": {
+        "website": "Sitio web",
+        "home": "Inicio",
+        "app": "App",
+        "contact": "Contacto",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribuir",
+        "supported_by": "con el apoyo de",
+        "support_button": "Apoye gpx.rnmkcy.eu en Ko-fi",
+        "route_planning": "Planificación de ruta",
+        "route_planning_description": "Una interfaz intuitiva para crear itinerarios adaptados a cada deporte, basada en datos de OpenStreetMap.",
+        "file_processing": "Procesamiento avanzado de archivos",
+        "file_processing_description": "Un conjunto de herramientas para realizar todas las tareas comunes de procesamiento de archivos y que se pueden aplicar a varios archivos a la vez.",
+        "maps": "Mapas globales y locales",
+        "maps_description": "Una gran colección de mapas base, capas y puntos de interés para ayudarle a fabricar su próxima aventura al aire libre o visualizar su último logro.",
+        "data_visualization": "Visualización de datos",
+        "data_visualization_description": "Un perfil de elevación interactivo con estadísticas detalladas para analizar actividades registradas y futuros objetivos.",
+        "identity": "Gratis, libre de anuncios y open source",
+        "identity_description": "Este sitio web es de uso gratuito, sin anuncios y el código fuente está disponible públicamente en GitHub. Esto solo es posible gracias al increíble apoyo de la comunidad."
+    },
+    "docs": {
+        "translate": "Mejorar la traducción en Crowdin",
+        "answer_not_found": "¿No ha encontrado lo que buscaba?",
+        "ask_on_reddit": "Pregunte a la comunidad en Reddit",
+        "search": {
+            "search": "Buscar",
+            "clear": "Limpiar",
+            "cancel": "Cancelar",
+            "recent": "Búsquedas recientes",
+            "no_recent": "No hay búsquedas recientes",
+            "save": "Guardar esta búsqueda",
+            "remove": "Eliminar esta búsqueda del historial",
+            "favorites": "Favoritos",
+            "remove_favorite": "Eliminar esta búsqueda de favoritos",
+            "to_select": "para seleccionar",
+            "to_navigate": "para navegar",
+            "to_close": "para cerrar",
+            "no_results": "No hay resultados para",
+            "no_results_suggestion": "Intente buscar"
+        }
+    },
+    "embedding": {
+        "title": "Crear su propio mapa",
+        "mapbox_token": "Token de acceso Mapbox",
+        "file_urls": "URLs de archivo (separados por comas)",
+        "drive_ids": "IDs de archivo de Google Drive (separados por comas)",
+        "basemap": "Mapa base",
+        "height": "Altura",
+        "fill_by": "Rellenar por",
+        "none": "Ninguno",
+        "show_controls": "Mostrar controles",
+        "manual_camera": "Cámara manual",
+        "manual_camera_description": "Puedes mover el mapa para ajustar la posición de la cámara.",
+        "latitude": "Latitud",
+        "longitude": "Longitud",
+        "zoom": "Zoom",
+        "pitch": "Inclinación",
+        "bearing": "Rumbo",
+        "preview": "Vista previa",
+        "code": "Código de integración"
+    },
+    "webgl2_required": "Se requiere WebGL 2 para visualizar el mapa.",
+    "enable_webgl2": "Aprenda cómo activar WebGL 2 en su navegador",
+    "page_not_found": "página no encontrada"
+}
\ No newline at end of file
diff --git a/website/src/locales/fi.json b/website/src/locales/fi.json
new file mode 100755
index 0000000..dd81717
--- /dev/null
+++ b/website/src/locales/fi.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "GPX-tiedostojen muokkaus verkossa",
+        "app_title": "app",
+        "embed_title": "GPX-tiedostojen muokkaus verkossa",
+        "help_title": "apua",
+        "404_title": "sivua ei löydy",
+        "description": "Katsele, muokkaa ja luo GPX-tiedostoja verkossa edistyneitä reittisuunnittelutyökaluja, näyttäviä karttoja ja yksityiskohtaisia esityksiä hyödyntäen."
+    },
+    "menu": {
+        "new": "Uusi",
+        "new_file": "Uusi tiedosto",
+        "new_track": "Uusi reitti",
+        "new_segment": "Uusi osio",
+        "open": "Avaa...",
+        "duplicate": "Monista",
+        "close": "Sulje",
+        "close_all": "Sulje kaikki",
+        "copy": "Kopioi",
+        "paste": "Liitä",
+        "cut": "Leikkaa",
+        "export": "Vie...",
+        "export_all": "Vie kaikki...",
+        "export_options": "Vientiasetukset",
+        "support_message": "Sovelluksen käyttö on ilmaista, mutta ylläpito maksaa. Harkitse sivuston tukemista, mikäli käytät sitä usein. Kiitos!",
+        "support_button": "Auta pitämään sivusto maksuttomana",
+        "download_file": "Lataa tiedosto",
+        "download_files": "Lataa tiedostot",
+        "edit": "Muokkaa",
+        "undo": "Peru",
+        "redo": "Tee uudelleen",
+        "delete": "Poista",
+        "select_all": "Valitse kaikki",
+        "view": "Näkymä",
+        "elevation_profile": "Korkeusprofiili",
+        "vertical_file_view": "Pystysuuntainen tiedostoluettelo",
+        "switch_basemap": "Vaihda edelliseen taustakarttaan",
+        "toggle_overlays": "Peiteaineistot päälle/pois",
+        "toggle_3d": "3D päälle/pois",
+        "settings": "Asetukset",
+        "distance_units": "Mittayksikkö",
+        "metric": "Metri",
+        "imperial": "Maili",
+        "nautical": "Merimaili",
+        "velocity_units": "Nopeusyksikkö",
+        "temperature_units": "Lämpötilayksikkö",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Kieli",
+        "mode": "Teema",
+        "system": "Järjestelmä",
+        "light": "Vaalea",
+        "dark": "Tumma",
+        "street_view_source": "Katunäkymäkuvapalvelu",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Karttatasot...",
+        "distance_markers": "Etäisyysmerkit",
+        "direction_markers": "Suuntanuolet",
+        "help": "Apua",
+        "more": "Lisää...",
+        "donate": "Tue",
+        "ctrl": "Ctrl",
+        "click": "Klikkaa",
+        "drag": "Raahaa",
+        "metadata": {
+            "button": "Tiedot...",
+            "name": "Nimi",
+            "description": "Kuvaus",
+            "save": "Tallenna"
+        },
+        "style": {
+            "button": "Ulkoasu...",
+            "color": "Väri",
+            "opacity": "Läpinäkyvyys",
+            "width": "Paksuus"
+        },
+        "hide": "Piilota",
+        "unhide": "Näytä",
+        "center": "Keskitä",
+        "open_in": "Avaa"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Suunnittele tai muokkaa reittiä",
+            "activity": "Liikkumistapa",
+            "use_routing": "Reititys",
+            "use_routing_tooltip": "Yhdistä suunnitelmapisteet tiestöä käyttäen. Muutoin yhdistä linnuntietä.",
+            "allow_private": "Käytä yksityisteitä",
+            "reverse": {
+                "button": "Vaihda suunta",
+                "tooltip": "Vaihda reitin alku- ja päätepisteet"
+            },
+            "route_back_to_start": {
+                "button": "Reititä lähtöpisteeseen",
+                "tooltip": "Yhdistä reitin lähtö- ja päätepisteet"
+            },
+            "round_trip": {
+                "button": "Meno-paluu",
+                "tooltip": "Palaa alkuun samaa reittiä"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Valitse muokattava reitti tai lisää uuden reitin alkupiste klikkaamalla karttaa.",
+            "help": "Lisää suunnitelmapiste klikkaamalla karttaa. Muuta reittiä raahaamalla suunnitelmapisteitä.",
+            "activities": {
+                "bike": "Polkupyörä",
+                "racing_bike": "Maantiepyörä",
+                "gravel_bike": "Gravelpyörä",
+                "mountain_bike": "Maastopyörä",
+                "foot": "Juoksu/kävely",
+                "motorcycle": "Moottoripyörä",
+                "water": "Vesireitti",
+                "railway": "Rautatie"
+            },
+            "surface": {
+                "unknown": "Tuntematon",
+                "paved": "Päällystetty",
+                "unpaved": "Päällystämätön",
+                "asphalt": "Asfaltti",
+                "concrete": "Betoni",
+                "chipseal": "Öljysora",
+                "cobblestone": "Mukulakivi",
+                "unhewn_cobblestone": "Luonnonmukainen mukulakivi",
+                "paving_stones": "Katukivetys",
+                "stepping_stones": "Astinkivet",
+                "sett": "Kivetys",
+                "metal": "Metalli",
+                "wood": "Puu",
+                "compacted": "Pakkautunut sora",
+                "fine_gravel": "Hieno sora",
+                "gravel": "Sora",
+                "pebblestone": "Pikkukivi",
+                "rock": "Kivi",
+                "dirt": "Maa",
+                "ground": "Maa",
+                "earth": "Maa",
+                "snow": "Lumi",
+                "ice": "Jää",
+                "salt": "Suola",
+                "mud": "Muta",
+                "sand": "Hiekka",
+                "woodchips": "Hake",
+                "grass": "Nurmi",
+                "grass_paver": "Nurmikivi"
+            },
+            "error": {
+                "from": "Aloituspiste on liian kaukana lähimmästä tiestä",
+                "via": "Reittipiste on liian kaukana lähimmästä tiestä",
+                "to": "Päätepiste on liian kaukana lähimmästä tiestä",
+                "timeout": "Reitin laskenta kesti liian kauan. Tihennä reittipisteitä"
+            }
+        },
+        "scissors": {
+            "tooltip": "Rajaa tai katkaise",
+            "crop": "Rajaa",
+            "split_as": "Pilkottujen reittien muoto",
+            "help_invalid_selection": "Valitse rajattava/pilkottava reitti.",
+            "help": "Rajaa reittiä säätimellä tai pilko reitti klikkaamalla reittipisteitä tai reittiä."
+        },
+        "time": {
+            "tooltip": "Muokkaa aikaleimoja",
+            "start": "Alku",
+            "end": "Loppu",
+            "total_time": "Kesto",
+            "pick_date": "Valitse päivä",
+            "artificial": "Luo todenmukaiset aikaleimat",
+            "update": "Päivitä aikaleimat",
+            "help": "Muuta aikaleimoja täyttämällä lomake.",
+            "help_invalid_selection": "Valitse reitti muuttaaksesi sen aikaleimoja."
+        },
+        "merge": {
+            "merge_traces": "Yhdistä reitit",
+            "merge_contents": "Yhdistä reitit samaan tiedostoon",
+            "merge_selection": "Yhdistä valitut",
+            "tooltip": "Yhdistä tiedostot",
+            "help_merge_traces": "Yhdistäminen luo valituista reiteistä yhden yhtenäisen reitin.",
+            "help_cannot_merge_traces": "Valitse useampia reittejä yhdistääksesi ne.",
+            "help_merge_contents": "Valittujen tiedostojen yhdistäminen kokoaa reitit ensimmäisenä valittuun tiedostoon.",
+            "help_cannot_merge_contents": "Valitse useampi tiedosto yhdistääksesi ne.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Pura tiedosto osiin",
+            "button": "Pura",
+            "help": "Erota valittujen tiedostojen osat omiksi tiedostoiksi.",
+            "help_invalid_selection": "Valitse tiedosto, joka sisältää useita reittejä."
+        },
+        "elevation": {
+            "button": "Hae korkeustiedot",
+            "help": "Tietojen haku korvaa aiemmat korkeustiedot Mapboxin tiedoilla.",
+            "help_no_selection": "Valitse tiedosto, jolle haet korkeustietoja."
+        },
+        "waypoint": {
+            "tooltip": "Lisää ja muokkaa kohdepisteitä",
+            "icon": "Kuvake",
+            "link": "Link",
+            "longitude": "Pituusaste",
+            "latitude": "Leveysaste",
+            "create": "Lisää kohdepiste",
+            "add": "Lisää kohdepiste tiedostoon",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Harvenna GPS pisteiden määrää",
+            "tolerance": "Poikkeamaraja",
+            "number_of_points": "GPS pisteiden määrä",
+            "button": "Harvenna",
+            "help": "Aseta reittiviivan yksityiskohtaisuus säätimellä.",
+            "help_no_selection": "Valitse harvennettava reitti."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Poista reittipisteitä",
+            "delete_waypoints": "Poista kohdepisteitä",
+            "delete_inside": "Poista valitut",
+            "delete_outside": "Poista valinnan ulkopuoliset",
+            "button": "Poista",
+            "help": "Poista reittipisteitä ja kohdepisteitä suorakulmaiselta alueelta.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Valitse näytettävät karttatasot ja lisää tai muokkaa omia karttatasoja.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Omat karttatasot",
+            "new": "Lisää oma karttataso",
+            "edit": "Muokkaa omaa karttatasoa",
+            "urls": "URL(t)",
+            "url_placeholder": "WMTS, WMS tai Mapbox style JSON",
+            "max_zoom": "Enimmäissuurennus",
+            "layer_type": "Tason tyyppi",
+            "basemap": "Taustakartta",
+            "overlay": "Peitataso",
+            "create": "Lisää karttataso",
+            "update": "Päivitä karttataso"
+        },
+        "opacity": "Peitetason läpinäkyvyys",
+        "label": {
+            "basemaps": "Taustakartat",
+            "overlays": "Peitetasot",
+            "custom": "Omat tasot",
+            "world": "Maailmanlaajuiset",
+            "countries": "Kansalliset",
+            "belgium": "Belgia",
+            "bulgaria": "Bulgaria",
+            "finland": "Suomi",
+            "france": "Ranska",
+            "new_zealand": "Uusi-Seelanti",
+            "norway": "Norja",
+            "spain": "Espanja",
+            "sweden": "Ruotsi",
+            "switzerland": "Sveitsi",
+            "united_kingdom": "Iso-Britannia",
+            "united_states": "Yhdysvallat",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satelliittikuva",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Ilmakuva",
+            "ignBe": "IGN Maastokartta",
+            "ignFrPlan": "IGN Taustakartta",
+            "ignFrTopo": "IGN Maastokartta",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Ilmakuva",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Maastokartta",
+            "swedenSatellite": "Lantmäteriet Ilmakuva",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Rinnekaltevuus",
+            "swisstopoHiking": "swisstopo Retkeilyreitit",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Pyöräilyreitit",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo Maastopyöräily",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Patikointi",
+            "waymarkedTrailsCycling": "Pyöräily",
+            "waymarkedTrailsMTB": "Maastopyöräily",
+            "waymarkedTrailsSkating": "Luistelu",
+            "waymarkedTrailsHorseRiding": "Ratsastus",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Kohdepisteet",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Nähtävyydet",
+            "viewpoint": "Näköalapaikka",
+            "hotel": "Hotellit",
+            "campsite": "Retkeilyalueet",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Pyörävuokraamot",
+            "bicycle-shop": "Pyöräliikkeet",
+            "public-transport": "Julkinen liikenne",
+            "railway-station": "Rautatieasemat",
+            "tram-stop": "Raitiovaunupysäkit",
+            "bus-stop": "Linja-autopysäkit",
+            "ferry": "Lautat"
+        },
+        "color": {
+            "blue": "Sininen",
+            "bluered": "Blue Red",
+            "gray": "Harmaa",
+            "hot": "Hot",
+            "purple": "Violetti",
+            "orange": "Oranssi"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Näytä syketiedot",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Näytä lämpötilatiedot",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Korkeus",
+        "elevation_gain_loss": "Nousu- ja laskusumma",
+        "temperature": "Lämpötila",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Syke",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Kaltevuus",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "M",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Tiedosto",
+        "files": "Tiedostot",
+        "track": "Reitti",
+        "tracks": "Reitit",
+        "segment": "Osio",
+        "segments": "Osiot",
+        "waypoint": "Kohdepiste",
+        "waypoints": "Kohdepisteet",
+        "symbol": {
+            "alert": "Varoitus",
+            "anchor": "Ankkuri",
+            "bank": "Pankki",
+            "beach": "Uimaranta",
+            "bike_trail": "Pyöräreitti",
+            "binoculars": "Kiikarit",
+            "bridge": "Silta",
+            "building": "Rakennus",
+            "campground": "Leirintäalue",
+            "car": "Auto",
+            "car_repair": "Huoltamo",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Maja",
+            "lodging": "Majoitus",
+            "forest": "Metsä",
+            "gas_station": "Huoltoasema",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotelli",
+            "house": "Talo",
+            "information": "Information",
+            "park": "Puisto",
+            "parking_area": "Pysäköinti",
+            "pharmacy": "Apteekki",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Ravintola",
+            "restricted_area": "Kielletty alue",
+            "restroom": "WC",
+            "road": "Tie",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Suihku",
+            "summit": "Huippu",
+            "telephone": "Puhelin",
+            "tunnel": "Tunneli",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Verkkosivusto",
+        "home": "Home",
+        "app": "App",
+        "contact": "Yhteystiedot",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Sähköposti",
+        "contribute": "Osallistu",
+        "supported_by": "tukijat:",
+        "support_button": "Tue gpx.rnmkcy.euta Ko-fi:ssa",
+        "route_planning": "Reittisuunnittelu",
+        "route_planning_description": "Käyttäjäystävällinen, OpenStreetMap-aineistoon pohjautuva reittisuunnittelutyökalu.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "Korkeusprofiili ja -tiedot suunnittelun ja analysoinnin tueksi.",
+        "identity": "Maksuton, mainokseton ja avoin",
+        "identity_description": "Sovellus on ilmainen, mainokseton, ja sen lähdekoodi on saatavilla Githubissa mahtavan yhteisön tuen ansiosta."
+    },
+    "docs": {
+        "translate": "Paranna käännöstä Crowdinissa",
+        "answer_not_found": "Etkö löytänyt hakemaasi?",
+        "ask_on_reddit": "Kysy yhteisöltä Redditissä",
+        "search": {
+            "search": "Haku",
+            "clear": "Tyhjennä",
+            "cancel": "Peruuta",
+            "recent": "Viimeisimmät haut",
+            "no_recent": "Ei aiempia hakuja",
+            "save": "Tallenna haku",
+            "remove": "Poista haku historiasta",
+            "favorites": "Suosikit",
+            "remove_favorite": "Poista haku suosikeista",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Luo oma kartta",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive tiedostotunnisteet (pilkkuerotetut)",
+        "basemap": "Taustakartta",
+        "height": "Korkeus",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/fr.json b/website/src/locales/fr.json
new file mode 100755
index 0000000..2c84c90
--- /dev/null
+++ b/website/src/locales/fr.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "l'éditeur de fichiers GPX en ligne",
+        "app_title": "application",
+        "embed_title": "l'éditeur de fichiers GPX en ligne",
+        "help_title": "aide",
+        "404_title": "page introuvable",
+        "description": "Affichez, éditez et créez des fichiers GPX en ligne avec des outils avancés de planification et de traitement de fichiers, de magnifiques cartes et des visualisations de données détaillées."
+    },
+    "menu": {
+        "new": "Nouveau",
+        "new_file": "Nouveau fichier",
+        "new_track": "Nouvelle piste",
+        "new_segment": "Nouveau segment",
+        "open": "Ouvrir...",
+        "duplicate": "Dupliquer",
+        "close": "Fermer",
+        "close_all": "Fermer tout",
+        "copy": "Copier",
+        "paste": "Coller",
+        "cut": "Couper",
+        "export": "Exporter...",
+        "export_all": "Exporter tout...",
+        "export_options": "Options d'exportation",
+        "support_message": "L'outil est gratuit à utiliser, mais pas à faire fonctionner. N'hésitez pas à soutenir le site si vous l'utilisez fréquemment. Merci !",
+        "support_button": "Aider à garder le site gratuit",
+        "download_file": "Télécharger le fichier",
+        "download_files": "Télécharger les fichiers",
+        "edit": "Édition",
+        "undo": "Annuler",
+        "redo": "Rétablir",
+        "delete": "Supprimer",
+        "select_all": "Sélectionner tout",
+        "view": "Affichage",
+        "elevation_profile": "Profil altimétrique",
+        "vertical_file_view": "Liste de fichiers verticale",
+        "switch_basemap": "Basculer au fond de carte précédent",
+        "toggle_overlays": "Afficher/cacher les surcouches",
+        "toggle_3d": "Activer/désactiver la 3D",
+        "settings": "Réglages",
+        "distance_units": "Unités de distance",
+        "metric": "Métrique",
+        "imperial": "Impérial",
+        "nautical": "Nautique",
+        "velocity_units": "Unités de vitesse",
+        "temperature_units": "Unités de température",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Langue",
+        "mode": "Thème",
+        "system": "Système",
+        "light": "Clair",
+        "dark": "Sombre",
+        "street_view_source": "Source d'imagerie de rue",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Imagerie de rue",
+        "layers": "Couches de la carte...",
+        "distance_markers": "Marqueurs de distance",
+        "direction_markers": "Flèches de direction",
+        "help": "Aide",
+        "more": "Plus...",
+        "donate": "Faire un don",
+        "ctrl": "Ctrl",
+        "click": "Clic",
+        "drag": "Glisser",
+        "metadata": {
+            "button": "Infos...",
+            "name": "Nom",
+            "description": "Description",
+            "save": "Sauver"
+        },
+        "style": {
+            "button": "Apparence...",
+            "color": "Couleur ",
+            "opacity": "Opacité",
+            "width": "Epaisseur"
+        },
+        "hide": "Cacher",
+        "unhide": "Afficher",
+        "center": "Centrer",
+        "open_in": "Ouvrir dans"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planifier ou modifier un itinéraire",
+            "activity": "Activité",
+            "use_routing": "Routage",
+            "use_routing_tooltip": "Connecter les points d'ancrage via le réseau routier ou en ligne droite si désactivé",
+            "allow_private": "Autoriser les routes privées",
+            "reverse": {
+                "button": "Inverser",
+                "tooltip": "Inverser le sens de l'itinéraire"
+            },
+            "route_back_to_start": {
+                "button": "Retour au départ",
+                "tooltip": "Connectez le dernier point de l'itinéraire au point de départ"
+            },
+            "round_trip": {
+                "button": "Aller-retour",
+                "tooltip": "Revenir au point de départ par le même itinéraire"
+            },
+            "start_loop_here": "Démarrer la boucle ici",
+            "help_no_file": "Sélectionnez une trace pour utiliser l'outil de routage, ou cliquez sur la carte pour commencer à créer un nouvel itinéraire.",
+            "help": "Cliquez sur la carte pour ajouter un nouveau point d'ancrage, ou faites glisser ceux existants pour changer l'itinéraire.",
+            "activities": {
+                "bike": "Vélo",
+                "racing_bike": "Vélo de route",
+                "gravel_bike": "Vélo gravel",
+                "mountain_bike": "VTT",
+                "foot": "Course à pied/randonnée",
+                "motorcycle": "Moto",
+                "water": "Cours d'eau",
+                "railway": "Chemins de fer"
+            },
+            "surface": {
+                "unknown": "Inconnu",
+                "paved": "Revêtement",
+                "unpaved": "Sans revêtement",
+                "asphalt": "Asphalte",
+                "concrete": "Béton",
+                "chipseal": "Enduit superficiel routier",
+                "cobblestone": "Pavés",
+                "unhewn_cobblestone": "Pavé non taillé",
+                "paving_stones": "Pavage en pierres",
+                "stepping_stones": "Pierres de gué",
+                "sett": "Pavés",
+                "metal": "Métal",
+                "wood": "Bois",
+                "compacted": "Gravier compact",
+                "fine_gravel": "Gravier fin",
+                "gravel": "Gravier",
+                "pebblestone": "Galets",
+                "rock": "Roche",
+                "dirt": "Sol en érosion",
+                "ground": "Sol",
+                "earth": "Terre",
+                "snow": "Neige",
+                "ice": "Glace",
+                "salt": "Sel",
+                "mud": "Boue",
+                "sand": "Sable",
+                "woodchips": "Plaquette forestière",
+                "grass": "Herbe",
+                "grass_paver": "Mélange d'herbe et de pavés"
+            },
+            "error": {
+                "from": "Le point de départ est trop éloigné de la route la plus proche",
+                "via": "Le point de passage est trop éloigné de la route la plus proche",
+                "to": "Le point d'arrivée est trop éloigné de la route la plus proche",
+                "timeout": "Le calcul de l'itinéraire a pris trop de temps, essayez d'ajouter des points plus rapprochés"
+            }
+        },
+        "scissors": {
+            "tooltip": "Rogner ou diviser",
+            "crop": "Rogner",
+            "split_as": "Diviser la trace en",
+            "help_invalid_selection": "Sélectionnez une trace à rogner ou diviser.",
+            "help": "Utilisez le curseur pour rogner la trace, ou divisez-la en cliquant sur l'un des marqueurs de séparation ou sur la trace elle-même."
+        },
+        "time": {
+            "tooltip": "Gérer les données temporelles",
+            "start": "Début",
+            "end": "Fin",
+            "total_time": "Temps en mouvement",
+            "pick_date": "Choisir une date",
+            "artificial": "Créer des données de temps réalistes",
+            "update": "Mettre à jour les données temporelles",
+            "help": "Utilisez le formulaire pour définir de nouvelles données temporelles.",
+            "help_invalid_selection": "Sélectionnez une seule trace pour gérer ses données temporelles."
+        },
+        "merge": {
+            "merge_traces": "Connecter les traces",
+            "merge_contents": "Fusionner les contenus et garder les traces déconnectées",
+            "merge_selection": "Fusionner la sélection",
+            "tooltip": "Fusionner les éléments",
+            "help_merge_traces": "Connecter les traces sélectionnées créera une seule trace continue.",
+            "help_cannot_merge_traces": "Votre sélection doit contenir plusieurs traces pour pouvoir les connecter.",
+            "help_merge_contents": "Fusionner le contenu des éléments sélectionnés regroupera l'ensemble du contenu à l'intérieur du premier élément.",
+            "help_cannot_merge_contents": "Votre sélection doit contenir plusieurs éléments pour fusionner leur contenu.",
+            "selection_tip": "Astuce : utilisez {KEYBOARD_SHORTCUT} pour ajouter des éléments à la sélection."
+        },
+        "extract": {
+            "tooltip": "Extraire le contenu vers des éléments séparés",
+            "button": "Extraire",
+            "help": "Extraire le contenu des éléments sélectionnés créera un élément séparé pour chaque élément de leur contenu.",
+            "help_invalid_selection": "Votre sélection doit contenir des éléments avec plusieurs traces pour les extraire."
+        },
+        "elevation": {
+            "button": "Ajouter des données d'altitude",
+            "help": "Ajouter des données d'altitude effacera les données d'altitude existantes, le cas échéant, et les remplacera par des données de Mapbox.",
+            "help_no_selection": "Sélectionnez un élément de fichier pour ajouter des données d'altitude."
+        },
+        "waypoint": {
+            "tooltip": "Créer et modifier des points d'intérêt",
+            "icon": "Icône",
+            "link": "Lien",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Créer le point d'intérêt",
+            "add": "Ajouter le point d'intérêt au fichier",
+            "help": "Remplissez le formulaire pour créer un nouveau point d'intérêt, ou cliquez sur un point existant pour le modifier. Cliquez sur la carte pour remplir les coordonnées, ou faites glisser les points d'intérêt pour les déplacer.",
+            "help_no_selection": "Sélectionnez un fichier pour créer ou éditer des points d'intérêt."
+        },
+        "reduce": {
+            "tooltip": "Réduire le nombre de points GPS",
+            "tolerance": "Tolérance",
+            "number_of_points": "Nombre de points GPS",
+            "button": "Minifier",
+            "help": "Utilisez le curseur pour choisir le nombre de points GPS à garder.",
+            "help_no_selection": "Sélectionnez une trace pour réduire le nombre de ses points GPS."
+        },
+        "clean": {
+            "tooltip": "Nettoyer les points GPS et les points d'intérêt avec une sélection rectangulaire",
+            "delete_trackpoints": "Supprimer les points GPS",
+            "delete_waypoints": "Supprimer les points d'intérêt",
+            "delete_inside": "Supprimer à l'intérieur de la sélection",
+            "delete_outside": "Supprimer en dehors de la sélection",
+            "button": "Supprimer",
+            "help": "Sélectionnez une zone rectangulaire sur la carte pour supprimer les points GPS et les points d'intérêt.",
+            "help_no_selection": "Sélectionnez une trace pour nettoyer les points GPS et les points d'intérêt."
+        }
+    },
+    "layers": {
+        "settings": "Réglages des couches",
+        "settings_help": "Sélectionnez les couches de carte que vous voulez afficher dans l'interface, ajoutez des couches personnalisées, et ajustez leurs paramètres.",
+        "selection": "Sélection des couches",
+        "custom_layers": {
+            "title": "Couches personnalisées",
+            "new": "Nouvelle couche personnalisée",
+            "edit": "Modifier la couche personnalisée",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS ou Mapbox style JSON",
+            "max_zoom": "Zoom max",
+            "layer_type": "Type de couche",
+            "basemap": "Fond de carte",
+            "overlay": "Surcouche",
+            "create": "Créer la couche",
+            "update": "Mettre à jour la couche"
+        },
+        "opacity": "Opacité de la surcouche",
+        "label": {
+            "basemaps": "Fonds de carte",
+            "overlays": "Surcouches",
+            "custom": "Personnalisé",
+            "world": "Monde",
+            "countries": "Pays",
+            "belgium": "Belgique",
+            "bulgaria": "Bulgarie",
+            "finland": "Finlande",
+            "france": "France",
+            "new_zealand": "Nouvelle-Zélande",
+            "norway": "Norvège",
+            "spain": "Espagne",
+            "sweden": "Suède",
+            "switzerland": "Suisse",
+            "united_kingdom": "Royaume-Uni",
+            "united_states": "États-Unis",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vectorielle",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Pente",
+            "swisstopoHiking": "swisstopo Randonnée",
+            "swisstopoHikingClosures": "swisstopo Fermetures de randonnée",
+            "swisstopoCycling": "swisstopo Vélo",
+            "swisstopoCyclingClosures": "swisstopo Fermetures vélo",
+            "swisstopoMountainBike": "swisstopo VTT",
+            "swisstopoMountainBikeClosures": "swisstopo Fermetures VTT",
+            "swisstopoSkiTouring": "swisstopo Ski de randonnée",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Pente",
+            "ignSkiTouring": "IGN Ski de randonnée",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Randonnée",
+            "waymarkedTrailsCycling": "Vélo",
+            "waymarkedTrailsMTB": "VTT",
+            "waymarkedTrailsSkating": "Patinage",
+            "waymarkedTrailsHorseRiding": "Equitation",
+            "waymarkedTrailsWinter": "Hiver",
+            "points_of_interest": "Points d'intérêt",
+            "food": "Alimentation",
+            "bakery": "Boulangerie",
+            "food-store": "Magasin d'alimentation",
+            "eat-and-drink": "Nourriture et boissons",
+            "amenities": "Commodités",
+            "toilets": "Toilettes",
+            "water": "Cours d'eau",
+            "shower": "Douche",
+            "shelter": "Abri",
+            "motorized": "Voitures et motos",
+            "fuel-station": "Station-service",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrière",
+            "tourism": "Tourisme",
+            "attraction": "Attraction",
+            "viewpoint": "Point de vue",
+            "hotel": "Hôtel",
+            "campsite": "Camping",
+            "hut": "Refuge",
+            "picnic": "Aire de pique-nique",
+            "summit": "Sommet",
+            "pass": "Col",
+            "climbing": "Escalade",
+            "bicycle": "Vélo",
+            "bicycle-parking": "Parking vélo",
+            "bicycle-rental": "Location de vélos",
+            "bicycle-shop": "Magasin de vélos",
+            "public-transport": "Transports en commun",
+            "railway-station": "Gare",
+            "tram-stop": "Arrêt de tram",
+            "bus-stop": "Arrêt de bus",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Bleu",
+            "bluered": "Bleu rouge",
+            "gray": "Gris",
+            "hot": "Vif",
+            "purple": "Violet",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Afficher les données de pente",
+        "show_surface": "Afficher les données de surface",
+        "show_speed": "Afficher les données de vitesse",
+        "show_pace": "Afficher les données d'allure",
+        "show_heartrate": "Afficher les données de fréquence cardiaque",
+        "show_cadence": "Afficher les données de cadence",
+        "show_temperature": "Afficher les données de température",
+        "show_power": "Afficher les données de puissance"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Altitude",
+        "elevation_gain_loss": "Dénivelé positif et négatif",
+        "temperature": "Température",
+        "speed": "Vitesse",
+        "pace": "Allure",
+        "heartrate": "Fréquence cardiaque",
+        "cadence": "Cadence",
+        "power": "Puissance",
+        "slope": "Pente",
+        "surface": "Surface",
+        "time": "Temps",
+        "moving": "En mouvement",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mi/h",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Fichier",
+        "files": "Fichiers",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point d'intérêt",
+        "waypoints": "Points d'intérêt",
+        "symbol": {
+            "alert": "Avertissement",
+            "anchor": "Ancre",
+            "bank": "Banque",
+            "beach": "Plage",
+            "bike_trail": "Piste cyclable",
+            "binoculars": "Jumelles",
+            "bridge": "Pont",
+            "building": "Bâtiment",
+            "campground": "Camping",
+            "car": "Voiture",
+            "car_repair": "Garage",
+            "convenience_store": "Épicerie",
+            "crossing": "Croisement",
+            "department_store": "Grand magasin",
+            "drinking_water": "Cours d'eau",
+            "exit": "Sortie",
+            "lodge": "Refuge",
+            "lodging": "Hébergement",
+            "forest": "Forêt",
+            "gas_station": "Station-service",
+            "ground_transportation": "Transport",
+            "hotel": "Hôtel",
+            "house": "Maison",
+            "information": "Information",
+            "park": "Parc",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacie",
+            "picnic_area": "Aire de pique-nique",
+            "restaurant": "Restaurant",
+            "restricted_area": "Accès restreint",
+            "restroom": "Toilettes",
+            "road": "Route",
+            "scenic_area": "Zone scénique",
+            "shelter": "Abri",
+            "shopping_center": "Centre commercial",
+            "shower": "Douche",
+            "summit": "Sommet",
+            "telephone": "Téléphone",
+            "tunnel": "Tunnel",
+            "water_source": "Source d'eau"
+        }
+    },
+    "homepage": {
+        "website": "Site",
+        "home": "Accueil",
+        "app": "Application",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribuer",
+        "supported_by": "soutenu par",
+        "support_button": "Soutenir gpx.rnmkcy.eu sur Ko-fi",
+        "route_planning": "Planification d’itinéraire",
+        "route_planning_description": "Une interface intuitive pour créer des itinéraires adaptés à chaque sport, basés sur les données d'OpenStreetMap.",
+        "file_processing": "Traitement de fichiers avancé",
+        "file_processing_description": "Une suite d'outils pour effectuer toutes les tâches courantes de traitement de fichiers, et qui peuvent être appliqués à plusieurs fichiers à la fois.",
+        "maps": "Cartes mondiales et locales",
+        "maps_description": "Une vaste collection de fonds de carte, de surcouches et de points d'intérêt pour vous aider à planifier votre prochaine aventure en plein air ou à visualiser vos dernières expéditions.",
+        "data_visualization": "Visualisation de données",
+        "data_visualization_description": "Un profil altimétrique interactif avec des statistiques détaillées pour analyser les activités enregistrées et les objectifs futurs.",
+        "identity": "Gratuit, sans pub et open source",
+        "identity_description": "Le site Web est gratuit, sans publicité, et le code source est disponible publiquement sur GitHub. Cela est possible uniquement grâce au soutien incroyable de la communauté."
+    },
+    "docs": {
+        "translate": "Améliorer la traduction sur Crowdin",
+        "answer_not_found": "Vous n'avez pas trouvé ce que vous cherchiez ?",
+        "ask_on_reddit": "Posez votre question à la communauté sur Reddit",
+        "search": {
+            "search": "Rechercher",
+            "clear": "Effacer",
+            "cancel": "Annuler",
+            "recent": "Recherches récentes",
+            "no_recent": "Aucune recherche récente",
+            "save": "Enregistrer cette recherche",
+            "remove": "Supprimer cette recherche de l'historique",
+            "favorites": "Favoris",
+            "remove_favorite": "Retirer cette recherche des favoris",
+            "to_select": "pour sélectionner",
+            "to_navigate": "pour naviguer",
+            "to_close": "pour fermer",
+            "no_results": "Aucun résultat pour",
+            "no_results_suggestion": "Essayez plutôt"
+        }
+    },
+    "embedding": {
+        "title": "Créez votre propre carte",
+        "mapbox_token": "Jeton d'accès Mapbox",
+        "file_urls": "URLs des fichiers (séparées par des virgules)",
+        "drive_ids": "IDs des fichiers Google Drive (séparés par des virgules)",
+        "basemap": "Fond de carte",
+        "height": "Hauteur",
+        "fill_by": "Remplir selon",
+        "none": "Aucun",
+        "show_controls": "Afficher les commandes",
+        "manual_camera": "Caméra manuelle",
+        "manual_camera_description": "Vous pouvez déplacer la carte ci-dessous pour régler la position de la caméra.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Inclinaison",
+        "bearing": "Orientation",
+        "preview": "Aperçu",
+        "code": "Code d'intégration"
+    },
+    "webgl2_required": "WebGL 2 est requis pour afficher la carte.",
+    "enable_webgl2": "Découvrir comment activer WebGL 2 dans votre navigateur",
+    "page_not_found": "page introuvable"
+}
\ No newline at end of file
diff --git a/website/src/locales/he.json b/website/src/locales/he.json
new file mode 100755
index 0000000..a3b9d6e
--- /dev/null
+++ b/website/src/locales/he.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "עזרה",
+        "404_title": "דף לא נמצא",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Duplicate",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "ייצא...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "עזור לשמור על האתר חינמי",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Delete",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "הגדרות",
+        "distance_units": "Distance units",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "שפה",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "אופני כביש",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "בחר תאריך",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "הקטן",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "קמ\"ש",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "ללא",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/hu.json b/website/src/locales/hu.json
new file mode 100755
index 0000000..2faea3d
--- /dev/null
+++ b/website/src/locales/hu.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "az online GPX szerkesztő",
+        "app_title": "app",
+        "embed_title": "az online GPX szerkesztő",
+        "help_title": "súgó",
+        "404_title": "az oldal nem található",
+        "description": "GPX-fájlok online megtekintése, szerkesztése és létrehozása fejlett útvonaltervezési képességekkel és fájlfeldolgozó eszközökkel, gyönyörű térképekkel és részletes adatmegjelenítésekkel."
+    },
+    "menu": {
+        "new": "Új",
+        "new_file": "Új fájl",
+        "new_track": "Új nyomvonal",
+        "new_segment": "Új szegmens",
+        "open": "Megnyitás...",
+        "duplicate": "Duplikálás",
+        "close": "Bezár",
+        "close_all": "Összes bezárása",
+        "copy": "Másolás",
+        "paste": "Beillesztés",
+        "cut": "Kivágás",
+        "export": "Exportálás...",
+        "export_all": "Az összes exportálása...",
+        "export_options": "Exportálási beállítások",
+        "support_message": "Ennek az eszköznek a használata ingyenes, de a fenntartása pénzbe kerül. Kérjük, fontold meg az oldal támogatását amennyiben gyakran használod. Köszönjük!",
+        "support_button": "Segíts megőrizni a weboldal ingyenességét",
+        "download_file": "Fájl letöltése",
+        "download_files": "Fájlok letöltése",
+        "edit": "Szerkesztés",
+        "undo": "Visszavonás",
+        "redo": "Újra",
+        "delete": "Törlés",
+        "select_all": "Összes kijelölése",
+        "view": "Nézet",
+        "elevation_profile": "Magassági profil",
+        "vertical_file_view": "Függoleges fájl lista",
+        "switch_basemap": "Váltás az előző alaptérképre",
+        "toggle_overlays": "Átfedés váltása",
+        "toggle_3d": "3D nézet bekapcsolása",
+        "settings": "Beállítások",
+        "distance_units": "Távolságmérés mértékegységei",
+        "metric": "Metrikus",
+        "imperial": "Angolszász",
+        "nautical": "Tengeri",
+        "velocity_units": "Sebesség mérés mértékegységei",
+        "temperature_units": "Hőmérséklet mértékegysége",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Nyelv",
+        "mode": "Kinézet",
+        "system": "Rendszer",
+        "light": "Világos",
+        "dark": "Sötét",
+        "street_view_source": "Utcakép nézet forrása",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Térképrétegek...",
+        "distance_markers": "Távolsági km szakaszok mutatása",
+        "direction_markers": "Menetirány mutatása",
+        "help": "Súgó",
+        "more": "Továbbiak...",
+        "donate": "Támogatás",
+        "ctrl": "Ctrl",
+        "click": "Kattints",
+        "drag": "Húzza",
+        "metadata": {
+            "button": "Infó...",
+            "name": "Név",
+            "description": "Leírás",
+            "save": "Mentés"
+        },
+        "style": {
+            "button": "Megjelenés...",
+            "color": "Szín",
+            "opacity": "Átlátszóság",
+            "width": "Szélesség"
+        },
+        "hide": "Elrejtés",
+        "unhide": "Felfedés",
+        "center": "Középre",
+        "open_in": "Megnyitás itt"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Útvonal tervezése vagy szerkesztése",
+            "activity": "Tevékenység",
+            "use_routing": "Útvonal választása",
+            "use_routing_tooltip": "Útvonal követés kikapcsolava egyenes vonal rajzolása",
+            "allow_private": "Magánutak engedélyezése",
+            "reverse": {
+                "button": "Út menetirány váltás",
+                "tooltip": "Útvonal irányát megfordítása"
+            },
+            "route_back_to_start": {
+                "button": "Vissza a starthoz",
+                "tooltip": "Kapcsolja össze az útvonal utolsó pontját a kiindulási ponttal"
+            },
+            "round_trip": {
+                "button": "Körút",
+                "tooltip": "Ugyanezen az útvonalon vissza a kiindulóponthoz"
+            },
+            "start_loop_here": "Rajt áthelyezése ide",
+            "help_no_file": "Válasszon egy nyomkövetést az útválasztó eszköz használatához, vagy kattintson a térképre egy új útvonal létrehozásához.",
+            "help": "Kattintson a térképre új rögzítési pont hozzáadásához, vagy húzza a meglévőket az útvonal módosításához.",
+            "activities": {
+                "bike": "Kerékpár",
+                "racing_bike": "Országúti kerékpár",
+                "gravel_bike": "Terep kerékpár",
+                "mountain_bike": "Hegyi kerékpár",
+                "foot": "Futás/Túrázás",
+                "motorcycle": "Motorkerékpár",
+                "water": "Víz",
+                "railway": "Vasút"
+            },
+            "surface": {
+                "unknown": "Ismeretlen",
+                "paved": "Szilárd burkolatú",
+                "unpaved": "Földes",
+                "asphalt": "Aszfalt",
+                "concrete": "Beton",
+                "chipseal": "Törmelékes",
+                "cobblestone": "Macskaköves",
+                "unhewn_cobblestone": "Vágatlan nagy kavics",
+                "paving_stones": "Térkő",
+                "stepping_stones": "Szikla lépcső",
+                "sett": "Kőlap",
+                "metal": "Fém",
+                "wood": "Fa",
+                "compacted": "Tömörített zúzott kő",
+                "fine_gravel": "Murva",
+                "gravel": "Kavics",
+                "pebblestone": "Kavicsos kő",
+                "rock": "Szikla",
+                "dirt": "Piszok",
+                "ground": "Föld",
+                "earth": "Föld",
+                "snow": "Hó",
+                "ice": "Jég",
+                "salt": "Só",
+                "mud": "Sár",
+                "sand": "Homok",
+                "woodchips": "Faforgács",
+                "grass": "Fű",
+                "grass_paver": "Gyephézagos térkő"
+            },
+            "error": {
+                "from": "A kiindulási pont túl messze van a legközelebbi úttól",
+                "via": "A köztes pont túl messze van a legközelebbi úttól",
+                "to": "A végpont túl messze van a legközelebbi úttól",
+                "timeout": "Az útvonal kiszámítása túl sokáig tartott. Próbáljon meg közelebbi pontokat adni egymáshoz"
+            }
+        },
+        "scissors": {
+            "tooltip": "Vágja vagy hasítsa fel",
+            "crop": "Vágás",
+            "split_as": "Bontsd szét az útvonalat",
+            "help_invalid_selection": "Válassza ki a körbevágni vagy felosztani kívánt útvonalat.",
+            "help": "Használja a csúszkát az útvonal kivágásához, vagy ossza fel az egyik jelölőre vagy magára az útvonalra kattintva."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Rajt",
+            "end": "End",
+            "total_time": "Mozgási idő",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Egyesítés kijelőlés",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Törlés",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS vagy Mapbox stílus JSON",
+            "max_zoom": "Max nagyítás",
+            "layer_type": "Réteg típus",
+            "basemap": "Alap térkép",
+            "overlay": "Térkép rétegek",
+            "create": "Réteg létrehozása",
+            "update": "Réteg feltöltése"
+        },
+        "opacity": "Átfedés átlátszósága",
+        "label": {
+            "basemaps": "Alaptérkép",
+            "overlays": "Térkép rétegek",
+            "custom": "Egyedi beállítások",
+            "world": "Világ",
+            "countries": "Országok",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgária",
+            "finland": "Finn",
+            "france": "Francia",
+            "new_zealand": "Új Zéland",
+            "norway": "Norvégia",
+            "spain": "Spanyol",
+            "sweden": "Svéd",
+            "switzerland": "Svájc",
+            "united_kingdom": "Anglia",
+            "united_states": "Amerika",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "Túraútvonal jelzések",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raszter",
+            "swisstopoVector": "swisstopo Vektor",
+            "swisstopoSatellite": "swisstopo Műhold",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Terv",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Műhold",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Hadifelmérés",
+            "norwayTopo": "Norvégia topográfiai térképe 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Műhold",
+            "finlandTopo": "Lantmäteriverket Tereptérkép",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "kerékpár és terepkerékpár út",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Lejtő",
+            "swisstopoHiking": "swisstopo Túra",
+            "swisstopoHikingClosures": "swisstopo túralezárások",
+            "swisstopoCycling": "swisstopo Kerékpár",
+            "swisstopoCyclingClosures": "swisstopo kerékpár túralezárások",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB lezárások",
+            "swisstopoSkiTouring": "swisstopo Sítura",
+            "ignFrCadastre": "IGN Kataszter",
+            "ignSlope": "IGN lejtés",
+            "ignSkiTouring": "IGN Sítúra",
+            "waymarked_trails": "Jelzett túraútvonalak",
+            "waymarkedTrailsHiking": "Túrázás",
+            "waymarkedTrailsCycling": "Kerékpározás",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Korcsolyázás",
+            "waymarkedTrailsHorseRiding": "Lovaglás",
+            "waymarkedTrailsWinter": "Tél",
+            "points_of_interest": "Nevezetes helyek",
+            "food": "Étel",
+            "bakery": "Pékség",
+            "food-store": "Élelmiszerbolt",
+            "eat-and-drink": "Étel és Ital",
+            "amenities": "Felszereltség",
+            "toilets": "Wc",
+            "water": "Víz",
+            "shower": "Zuhanyozó",
+            "shelter": "Menedék",
+            "motorized": "Autók és Motorok",
+            "fuel-station": "Benzinkút",
+            "parking": "Parkoló",
+            "garage": "Garázs",
+            "barrier": "Akadály",
+            "tourism": "Idegenforgalmi iroda",
+            "attraction": "Látnivaló",
+            "viewpoint": "Kilátó",
+            "hotel": "Hotel",
+            "campsite": "Kemping",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Kerékpár",
+            "bicycle-parking": "Kerékpár parkoló",
+            "bicycle-rental": "Kerékpár bérélés",
+            "bicycle-shop": "Kerékpár üzlet",
+            "public-transport": "Tömegközlekedés",
+            "railway-station": "Vasútállomás",
+            "tram-stop": "Villamos megálló",
+            "bus-stop": "Buszmegálló",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Kék",
+            "bluered": "Blue Red",
+            "gray": "Szürke",
+            "hot": "Legérdekesebb",
+            "purple": "Lila",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Távolság",
+        "elevation": "Emelkedés",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Hőmérséklet",
+        "speed": "Sebesség",
+        "pace": "Tempó",
+        "heartrate": "Heart rate",
+        "cadence": "Lépés/Pedál ütem",
+        "power": "Erő",
+        "slope": "Erőkifejtési szintkép színekkel",
+        "surface": "Szintkép",
+        "time": "Idő",
+        "moving": "Moving",
+        "total": "Összes"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Útvonal",
+        "tracks": "Útvonalak",
+        "segment": "Szegmens",
+        "segments": "Szakaszok",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Kemping",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Kisbolt",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Szálláshely",
+            "forest": "Erdő",
+            "gas_station": "Benzinkút",
+            "ground_transportation": "Szállítás",
+            "hotel": "Hotel",
+            "house": "Ház",
+            "information": "Információ",
+            "park": "Park",
+            "parking_area": "Parkoló",
+            "pharmacy": "Gyógyszertár",
+            "picnic_area": "Piknikező hely",
+            "restaurant": "Étterem",
+            "restricted_area": "Tiltott terület",
+            "restroom": "Wc",
+            "road": "Út",
+            "scenic_area": "Festői Terület",
+            "shelter": "Menedék",
+            "shopping_center": "Pláza",
+            "shower": "Zuhanyozó",
+            "summit": "Csúcs",
+            "telephone": "Telefon",
+            "tunnel": "Alagút",
+            "water_source": "Vízforrás"
+        }
+    },
+    "homepage": {
+        "website": "Honlap",
+        "home": "Kezdőlap",
+        "app": "App",
+        "contact": "Kapcsolat",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Hozzájárulás",
+        "supported_by": "támogatók",
+        "support_button": "A gpx.rnmkcy.eu támogatása a Ko-fi-n",
+        "route_planning": "Útvonal tervezés",
+        "route_planning_description": "Intuitív kezelőfelület az egyes sportágakra szabott útvonalak létrehozásához, OpenStreetMap adatok alapján.",
+        "file_processing": "Fejlett olajfeldolgozás",
+        "file_processing_description": "Eszközkészlet az összes gyakori fájlfeldolgozási feladat elvégzéséhez, és amely egyszerre több fájlra is alkalmazható.",
+        "maps": "Globális és helyi térképek",
+        "maps_description": "Alaptérképek, lefedések és érdekességek nagy gyűjteménye, amelyek segítenek megtervezni a következő szabadtéri kalandot, vagy megjeleníteni legújabb eredményeit.",
+        "data_visualization": "Adatvizualizáció",
+        "data_visualization_description": "Interaktív magassági profil részletes statisztikákkal a rögzített tevékenységek és a jövőbeni célok elemzéséhez.",
+        "identity": "Ingyenes, reklámmentes és nyílt forráskódú",
+        "identity_description": "A webhely ingyenesen használható, hirdetések nélkül, a forráskód pedig nyilvánosan elérhető a GitHubon. Ez csak a közösség hihetetlen támogatásának köszönhetően lehetséges."
+    },
+    "docs": {
+        "translate": "Javítsd ki a fordítást Crowdinon",
+        "answer_not_found": "Nem találtad, amit kerestél?",
+        "ask_on_reddit": "Kérdezze meg a közösséget a Redditen",
+        "search": {
+            "search": "Keresés",
+            "clear": "Törlés",
+            "cancel": "Mégsem",
+            "recent": "Legutóbbi keresések",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "kiválasztás",
+            "to_navigate": "navigálás",
+            "to_close": "bezárni",
+            "no_results": "Nincs találat a következőre",
+            "no_results_suggestion": "Próbálja meg a következőt"
+        }
+    },
+    "embedding": {
+        "title": "Készítse el saját térképét",
+        "mapbox_token": "Mapbox hozzáférési token",
+        "file_urls": "Fájl elérési URL-ek (vesszővel elválasztva)",
+        "drive_ids": "Google Drive ID-ik (a fájlazonosítók vesszővel elválasztva)",
+        "basemap": "Alap térkép",
+        "height": "Magasság",
+        "fill_by": "Töltse ki",
+        "none": "Nincs",
+        "show_controls": "Vezérlők megjelenítése",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Előnézet",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/it.json b/website/src/locales/it.json
new file mode 100755
index 0000000..317b569
--- /dev/null
+++ b/website/src/locales/it.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "l'editor di file GPX online",
+        "app_title": "app",
+        "embed_title": "l'editor di file GPX online",
+        "help_title": "aiuto",
+        "404_title": "pagina non trovata",
+        "description": "Visualizza, modifica e genera file GPX online con avanzate funzionalità di pianificazione del percorso e strumenti di elaborazione dei file, mappe eleganti e visualizzazione dettagliata dei dati."
+    },
+    "menu": {
+        "new": "Nuova",
+        "new_file": "Nuovo file",
+        "new_track": "Nuova traccia",
+        "new_segment": "Nuovo segmento",
+        "open": "Apri...",
+        "duplicate": "Duplica",
+        "close": "Chiudi",
+        "close_all": "Chiudi tutto",
+        "copy": "Copia",
+        "paste": "Incolla",
+        "cut": "Taglia",
+        "export": "Esporta...",
+        "export_all": "Esporta tutto...",
+        "export_options": "Esporta opzioni",
+        "support_message": "Lo strumento è gratuito nell'utilizzo, ma non nel funzionamento. Si prega di considerare il supportare al sito web se lo si utilizza frequentemente. Grazie!",
+        "support_button": "Aiutaci a mantenere il sito gratuito",
+        "download_file": "Scarica il file",
+        "download_files": "Scarica file",
+        "edit": "Modifica",
+        "undo": "Annulla",
+        "redo": "Ripeti",
+        "delete": "Elimina",
+        "select_all": "Seleziona tutto",
+        "view": "Visualizza",
+        "elevation_profile": "Profilo altimetrico",
+        "vertical_file_view": "Elenco file verticale",
+        "switch_basemap": "Passa alla mappa di base precedente",
+        "toggle_overlays": "Attiva le sovrapposizioni",
+        "toggle_3d": "Attiva/disattiva 3D",
+        "settings": "Impostazioni",
+        "distance_units": "Unità distanza",
+        "metric": "Metrico",
+        "imperial": "Imperiale",
+        "nautical": "Nautica",
+        "velocity_units": "Unità velocità",
+        "temperature_units": "Unità di temperatura",
+        "celsius": "Centigradi",
+        "fahrenheit": "Fahrenheit",
+        "language": "Lingua",
+        "mode": "Tema",
+        "system": "Sistema",
+        "light": "Chiaro",
+        "dark": "Scuro",
+        "street_view_source": "Sorgente della vista stradale",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street View",
+        "layers": "Livelli della mappa...",
+        "distance_markers": "Indicatori di distanza",
+        "direction_markers": "Frecce di direzione",
+        "help": "Aiuto",
+        "more": "Altro...",
+        "donate": "Dona",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Trascina",
+        "metadata": {
+            "button": "Informazioni...",
+            "name": "Nome",
+            "description": "Descrizione",
+            "save": "Salva"
+        },
+        "style": {
+            "button": "Aspetto...",
+            "color": "Colore",
+            "opacity": "Opacità",
+            "width": "Larghezza"
+        },
+        "hide": "Nascondi",
+        "unhide": "Mostra",
+        "center": "Centro",
+        "open_in": "Apri con"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Pianifica o modifica un percorso",
+            "activity": "Attività",
+            "use_routing": "Instradamento",
+            "use_routing_tooltip": "Collega i punti di ancoraggio tramite la rete stradale o in linea retta se disabilitato",
+            "allow_private": "Consenti strade private",
+            "reverse": {
+                "button": "Inverti la traccia",
+                "tooltip": "Invertire la direzione del percorso"
+            },
+            "route_back_to_start": {
+                "button": "Torna all'inizio",
+                "tooltip": "Connettere ultimo punto della traccia col punto d'inizio"
+            },
+            "round_trip": {
+                "button": "Andata e ritorno",
+                "tooltip": "Ritornare al punto di partenza tramite lo stesso percorso"
+            },
+            "start_loop_here": "Avviare il ciclo qui",
+            "help_no_file": "Clicca sulla mappa per aggiungere un nuovo punto di ancoraggio, o spostane uno esistente per cambiare il percorso.",
+            "help": "Clicca sulla mappa per aggiungere un nuovo punto di ancoraggio, o spostane uno esistente per cambiare il percorso.",
+            "activities": {
+                "bike": "Bicicletta",
+                "racing_bike": "Bici da strada",
+                "gravel_bike": "Bici gravel",
+                "mountain_bike": "Mountain bike",
+                "foot": "Corsa/escursione",
+                "motorcycle": "Moto",
+                "water": "Acqua",
+                "railway": "Ferrovia"
+            },
+            "surface": {
+                "unknown": "Sconosciuto",
+                "paved": "Pavimentato",
+                "unpaved": "Non asfaltato",
+                "asphalt": "Asfalto",
+                "concrete": "Calcestruzzo",
+                "chipseal": "Chipseal",
+                "cobblestone": "Acciottolato",
+                "unhewn_cobblestone": "Ciottolame",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Pavé",
+                "metal": "Metallo",
+                "wood": "Legno",
+                "compacted": "Ghiaia compatta",
+                "fine_gravel": "Ghiaia fine",
+                "gravel": "Ghiaia",
+                "pebblestone": "Ciottoli",
+                "rock": "Roccia",
+                "dirt": "Terra",
+                "ground": "Terreno",
+                "earth": "Terra",
+                "snow": "Neve",
+                "ice": "Ghiaccio",
+                "salt": "Sale",
+                "mud": "Fango",
+                "sand": "Sabbia",
+                "woodchips": "Cippato",
+                "grass": "Erba",
+                "grass_paver": "Pavimentazione erbosa"
+            },
+            "error": {
+                "from": "Il punto di partenza è troppo lontano dalla strada più vicina",
+                "via": "The via point is too far from the nearest road",
+                "to": "Il punto di arrivo è troppo lontano dalla strada più vicina",
+                "timeout": "Il calcolo del percorso ha richiesto troppo tempo, prova ad aggiungere punti più vicini"
+            }
+        },
+        "scissors": {
+            "tooltip": "Ritaglia o dividi",
+            "crop": "Ritaglia",
+            "split_as": "Dividi la traccia in",
+            "help_invalid_selection": "Seleziona una traccia da ritagliare o dividere.",
+            "help": "Utilizzare il cursore per ritagliare la traccia, o dividerla facendo clic su uno dei marcatori divisi o sulla traccia stessa."
+        },
+        "time": {
+            "tooltip": "Gestisci i tempi",
+            "start": "Partenza",
+            "end": "Fine",
+            "total_time": "Tempo in movimento",
+            "pick_date": "Seleziona una data",
+            "artificial": "Crea tempi realistici",
+            "update": "Aggiorna i dati del tempo",
+            "help": "Usa il modulo per impostare nuovi tempi.",
+            "help_invalid_selection": "Seleziona una traccia singola per gestire i suoi dati temporali."
+        },
+        "merge": {
+            "merge_traces": "Collega le tracce",
+            "merge_contents": "Unisci i contenuti e mantieni le tracce disconnesse",
+            "merge_selection": "Selezione unione",
+            "tooltip": "Unisci gli elementi insieme",
+            "help_merge_traces": "Collegando le tracce selezionate si creerà una singola traccia continua.",
+            "help_cannot_merge_traces": "La tua selezione deve contenere diverse tracce per collegarle.",
+            "help_merge_contents": "Unendo il contenuto degli elementi selezionati si raggrupperà tutti i contenuti all'interno del primo elemento.",
+            "help_cannot_merge_contents": "La selezione deve contenere diversi elementi per unire il loro contenuto.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Estrae i contenuti per separare gli elementi",
+            "button": "Estrai",
+            "help": "L'estrazione del contenuto degli elementi selezionati creerà un elemento separato per ciascuno dei loro contenuti.",
+            "help_invalid_selection": "La tua selezione deve contenere elementi con tracce multiple per estrarli."
+        },
+        "elevation": {
+            "button": "Richiedi dati elevazione",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Crea e modifica punti di interesse",
+            "icon": "Icona",
+            "link": "Collegamento",
+            "longitude": "Longitudine",
+            "latitude": "Latitudine",
+            "create": "Creare un punto di interesse",
+            "add": "Aggiungi punto di interesse al file",
+            "help": "Compila il modulo per creare un nuovo punto di interesse, oppure fai clic su uno esistente per modificarlo. Fare clic sulla mappa per inserire le coordinate o trascinare i punti di interesse per spostarli.",
+            "help_no_selection": "Selezionare un file per creare o modificare punti di interesse."
+        },
+        "reduce": {
+            "tooltip": "Riduci il numero di punti della traccia",
+            "tolerance": "Tolleranza",
+            "number_of_points": "Numero di punti GPS",
+            "button": "Minimizza",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Selezionare una traccia per ridurre il numero dei suoi punti GPS."
+        },
+        "clean": {
+            "tooltip": "Pulire i punti GPS e i punti di interesse con una selezione rettangolare",
+            "delete_trackpoints": "Eliminare punti GPS",
+            "delete_waypoints": "Cancella punti d'interesse",
+            "delete_inside": "Elimina all'interno della selezione",
+            "delete_outside": "Elimina fuori dalla selezione",
+            "button": "Elimina",
+            "help": "Selezionare un'area rettangolare sulla mappa per rimuovere i punti GPS e i punti di interesse.",
+            "help_no_selection": "Seleziona una traccia per pulire i punti GPS e i punti di interesse."
+        }
+    },
+    "layers": {
+        "settings": "Impostazioni del livello",
+        "settings_help": "Selezionare i livelli di mappa che si desidera mostrare nell'interfaccia, aggiungere quelli personalizzati e regolare le impostazioni.",
+        "selection": "Selezione del livello",
+        "custom_layers": {
+            "title": "Livelli personalizzati",
+            "new": "Nuovo livello personalizzato",
+            "edit": "Modifica livello personalizzato",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Zoom massimo",
+            "layer_type": "Tipo del layer",
+            "basemap": "Mappa Base",
+            "overlay": "Sovrapposizione",
+            "create": "Crea Livello",
+            "update": "Aggiorna livello"
+        },
+        "opacity": "Opacità di sovrapposizione",
+        "label": {
+            "basemaps": "Mappe di base",
+            "overlays": "Sovrapposizioni",
+            "custom": "Personalizzato",
+            "world": "Mondo",
+            "countries": "Paesi",
+            "belgium": "Belgio",
+            "bulgaria": "Bulgaria",
+            "finland": "Finlandia",
+            "france": "Francia",
+            "new_zealand": "Nuova Zelanda",
+            "norway": "Norvegia",
+            "spain": "Spagna",
+            "sweden": "Svezia",
+            "switzerland": "Svizzera",
+            "united_kingdom": "United Kingdom",
+            "united_states": "Stati Uniti",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "Satellitare IGN",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Sondaggio Ordnance",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "Pendenza IGN",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Escursionismo",
+            "waymarkedTrailsCycling": "Ciclismo",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Pattinaggio",
+            "waymarkedTrailsHorseRiding": "Equitazione",
+            "waymarkedTrailsWinter": "Inverno",
+            "points_of_interest": "Punti di interesse",
+            "food": "Cibo",
+            "bakery": "Panificio",
+            "food-store": "Negozi di alimentari",
+            "eat-and-drink": "Mangiare e bere",
+            "amenities": "Servizi",
+            "toilets": "Servizi igienici",
+            "water": "Acqua",
+            "shower": "Doccia",
+            "shelter": "Riparo",
+            "motorized": "Auto e Motocicli",
+            "fuel-station": "Stazione di Rifornimento",
+            "parking": "Parcheggio",
+            "garage": "Garage",
+            "barrier": "Barriera",
+            "tourism": "Turismo",
+            "attraction": "Attrazione",
+            "viewpoint": "Punto di vista",
+            "hotel": "Hotel",
+            "campsite": "Campeggio",
+            "hut": "Hut",
+            "picnic": "Area Picnic",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Arrampicata",
+            "bicycle": "Bicicletta",
+            "bicycle-parking": "Parcheggio per biciclette",
+            "bicycle-rental": "Noleggio biciclette",
+            "bicycle-shop": "Negozio di biciclette",
+            "public-transport": "Trasporto pubblico",
+            "railway-station": "Stazione ferroviaria",
+            "tram-stop": "Fermata del tram",
+            "bus-stop": "Fermata dell'autobus",
+            "ferry": "Traghetto"
+        },
+        "color": {
+            "blue": "Blu",
+            "bluered": "Blu-Rosso",
+            "gray": "Grigio",
+            "hot": "Caldo",
+            "purple": "Viola",
+            "orange": "Arancione"
+        }
+    },
+    "chart": {
+        "show_slope": "Mostra dati pendenza",
+        "show_surface": "Mostra dati di superficie",
+        "show_speed": "Mostra dati velocità",
+        "show_pace": "Mostra i dati del ritmo",
+        "show_heartrate": "Mostra i dati della frequenza cardiaca",
+        "show_cadence": "Mostra i dati di cadenza",
+        "show_temperature": "Mostra dati di temperatura",
+        "show_power": "Mostra dati di potenza"
+    },
+    "quantities": {
+        "distance": "Distanza",
+        "elevation": "Dislivello",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperatura",
+        "speed": "Velocità",
+        "pace": "Passo",
+        "heartrate": "Battito cardiaco",
+        "cadence": "Cadenza",
+        "power": "Potenza",
+        "slope": "Pendenza",
+        "surface": "Superficie",
+        "time": "Dati temporali",
+        "moving": "Movimento",
+        "total": "Totale"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "giri/min",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "File",
+        "track": "Traccia",
+        "tracks": "Tracce",
+        "segment": "Segmento",
+        "segments": "Segmenti",
+        "waypoint": "Punto di interesse",
+        "waypoints": "Punti di interesse",
+        "symbol": {
+            "alert": "Avviso",
+            "anchor": "Ancora",
+            "bank": "Banca",
+            "beach": "Spiaggia",
+            "bike_trail": "Sentiero Per Bici",
+            "binoculars": "Binocolo",
+            "bridge": "Ponte",
+            "building": "Edificio",
+            "campground": "Campeggio",
+            "car": "Auto",
+            "car_repair": "Garage",
+            "convenience_store": "Negozio di alimentari",
+            "crossing": "Incrocio",
+            "department_store": "Grande magazzino",
+            "drinking_water": "Acqua",
+            "exit": "Uscita",
+            "lodge": "Rifugio",
+            "lodging": "Alloggio",
+            "forest": "Foresta",
+            "gas_station": "Stazione di Rifornimento",
+            "ground_transportation": "Trasporto via terra",
+            "hotel": "Hotel",
+            "house": "Casa",
+            "information": "Informazioni",
+            "park": "Parco",
+            "parking_area": "Parcheggio",
+            "pharmacy": "Farmacia",
+            "picnic_area": "Area Picnic",
+            "restaurant": "Ristorante",
+            "restricted_area": "Area Riservata",
+            "restroom": "Servizi igienici",
+            "road": "Strada",
+            "scenic_area": "Zona panoramica",
+            "shelter": "Rifugio",
+            "shopping_center": "Centro commerciale",
+            "shower": "Doccia",
+            "summit": "Cima",
+            "telephone": "Telefono",
+            "tunnel": "Tunnel",
+            "water_source": "Fonte d'acqua"
+        }
+    },
+    "homepage": {
+        "website": "Sito web",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contatto",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribuire",
+        "supported_by": "supportato da",
+        "support_button": "Supporto di gpx.rnmkcy.eu su Ko-fi",
+        "route_planning": "Pianificazione del percorso",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Elaborazione avanzata dei file",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Mappe globali e locali",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Visualizzazione dei dati",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Gratuito, senza pubblicità e open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Migliora la traduzione su Crowdin",
+        "answer_not_found": "Non hai trovato quello che cercavi?",
+        "ask_on_reddit": "Chiedi alla comunità su Reddit",
+        "search": {
+            "search": "Cerca",
+            "clear": "Cancella",
+            "cancel": "Annulla",
+            "recent": "Ricerche recenti",
+            "no_recent": "Nessuna ricerca recente",
+            "save": "Salva questa ricerca",
+            "remove": "Rimuovi questa ricerca dalla cronologia",
+            "favorites": "Preferiti",
+            "remove_favorite": "Rimuovi questa ricerca dai preferiti",
+            "to_select": "da selezionare",
+            "to_navigate": "navigare",
+            "to_close": "chiudere",
+            "no_results": "Nessun risultato trovato",
+            "no_results_suggestion": "Prova a cercare"
+        }
+    },
+    "embedding": {
+        "title": "Crea la tua mappa",
+        "mapbox_token": "Token di accesso a Mapbox",
+        "file_urls": "URL dei file (separati da virgole)",
+        "drive_ids": "ID dei file in Google Drive (separati da virgole)",
+        "basemap": "Mappa Base",
+        "height": "Altezza",
+        "fill_by": "Fill by",
+        "none": "Nessuno",
+        "show_controls": "Visualizza controlli",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitudine",
+        "longitude": "Longitudine",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Anteprima",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 è necessario per visualizzare la mappa.",
+    "enable_webgl2": "Scopri come abilitare WebGL 2 nel tuo browser",
+    "page_not_found": "pagina non trovata"
+}
\ No newline at end of file
diff --git a/website/src/locales/ko.json b/website/src/locales/ko.json
new file mode 100755
index 0000000..d30b70b
--- /dev/null
+++ b/website/src/locales/ko.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "온라인 GPX 파일 편집기",
+        "app_title": "앱",
+        "embed_title": "온라인 GPX 파일 편집기",
+        "help_title": "도움말",
+        "404_title": "페이지를 찾을 수 없음",
+        "description": "고급 경로 계획과 파일 처리 도구를 이용하여 온라인에서 GPX 파일을 확인하고, 편집하고, 생성하세요. 아름다운 지도와 정밀한 데이터 시각화도 지원합니다."
+    },
+    "menu": {
+        "new": "새 파일",
+        "new_file": "새 파일",
+        "new_track": "새 트랙",
+        "new_segment": "새 세그먼트",
+        "open": "열기...",
+        "duplicate": "복제",
+        "close": "닫기",
+        "close_all": "모두 닫기",
+        "copy": "복사",
+        "paste": "붙여넣기",
+        "cut": "잘라내기",
+        "export": "내보내기...",
+        "export_all": "모두 내보내기...",
+        "export_options": "내보내기 설정",
+        "support_message": "이 편집기는 무료로 제공되지만, 운영에는 비용이 필요합니다. 자주 사용하신다면 웹사이트에 대한 지원을 고려해 주세요. 감사합니다!",
+        "support_button": "웹사이트가 무료로 유지될 수 있도록 도와주세요",
+        "download_file": "파일 다운로드",
+        "download_files": "파일 다운로드",
+        "edit": "편집",
+        "undo": "실행 취소",
+        "redo": "다시 실행",
+        "delete": "삭제",
+        "select_all": "전체 선택",
+        "view": "보기",
+        "elevation_profile": "고도 정보",
+        "vertical_file_view": "수직 파일 목록",
+        "switch_basemap": "이전 배경 지도로 전환",
+        "toggle_overlays": "오버레이 전환",
+        "toggle_3d": "3D 전환",
+        "settings": "설정",
+        "distance_units": "거리 단위",
+        "metric": "미터법",
+        "imperial": "야드/파운드법",
+        "nautical": "Nautical",
+        "velocity_units": "속도 단위",
+        "temperature_units": "온도 단위",
+        "celsius": "섭씨",
+        "fahrenheit": "화씨",
+        "language": "언어",
+        "mode": "테마",
+        "system": "시스템",
+        "light": "밝은 테마",
+        "dark": "어두운 테마",
+        "street_view_source": "스트리트 뷰 출처",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "지도 레이어...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "방향 화살표",
+        "help": "도움말",
+        "more": "More...",
+        "donate": "후원",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "정보...",
+            "name": "이름",
+            "description": "Description",
+            "save": "저장"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "투명도",
+            "width": "Width"
+        },
+        "hide": "숨기기",
+        "unhide": "표시",
+        "center": "중앙",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "자전거",
+                "racing_bike": "로드 바이크",
+                "gravel_bike": "그래블 바이크",
+                "mountain_bike": "산악 자전거",
+                "foot": "달리기/등산",
+                "motorcycle": "오토바이",
+                "water": "수역",
+                "railway": "철로"
+            },
+            "surface": {
+                "unknown": "알 수 없음",
+                "paved": "포장 도로",
+                "unpaved": "비포장 도로",
+                "asphalt": "아스팔트",
+                "concrete": "콘크리트",
+                "chipseal": "칩씰",
+                "cobblestone": "조약돌",
+                "unhewn_cobblestone": "거친 조약돌",
+                "paving_stones": "포장석",
+                "stepping_stones": "디딤돌",
+                "sett": "정형 자갈",
+                "metal": "금속",
+                "wood": "목재",
+                "compacted": "다진 자갈",
+                "fine_gravel": "고운 자갈",
+                "gravel": "자갈",
+                "pebblestone": "조약돌",
+                "rock": "암석",
+                "dirt": "흙길",
+                "ground": "지면",
+                "earth": "자연 지면",
+                "snow": "눈",
+                "ice": "얼음",
+                "salt": "소금",
+                "mud": "진흙",
+                "sand": "모래",
+                "woodchips": "목재 칩",
+                "grass": "잔디",
+                "grass_paver": "잔디 포장"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "잘라내기/분할",
+            "crop": "잘라내기",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "시간 정보 설정",
+            "start": "시작",
+            "end": "종료",
+            "total_time": "이동 시간",
+            "pick_date": "날짜 선택",
+            "artificial": "현실적인 시간 정보 생성",
+            "update": "시간 정보 수정",
+            "help": "새로운 시간 정보를 설정하기 위해 양식을 이용하세요.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "아이콘",
+            "link": "링크",
+            "longitude": "경도",
+            "latitude": "위도",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "GPS 포인트 줄이기",
+            "tolerance": "허용 오차",
+            "number_of_points": "GPS 포인트 개수",
+            "button": "단순화",
+            "help": "슬라이더를 이용하여 유지할 GPS 포인트 수를 설정하세요.",
+            "help_no_selection": "GPS 포인트 수를 줄일 경로를 선택하세요."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "선택 영역 안쪽 삭제",
+            "delete_outside": "선택 영역 바깥쪽 삭제",
+            "button": "삭제",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "레이어 설정",
+        "settings_help": "인터페이스에 표시할 지도 레이어를 선택하고, 사용자 지정 레이어를 추가하여 설정을 조정하세요.",
+        "selection": "레이어 선택",
+        "custom_layers": {
+            "title": "사용자 정의 레이어",
+            "new": "사용자 정의 레이어 생성",
+            "edit": "사용자 정의 레이어 편집",
+            "urls": "URL",
+            "url_placeholder": "WMTS, WMS 또는 Mapbox 스타일 JSON",
+            "max_zoom": "최대 확대 정도",
+            "layer_type": "레이어 유형",
+            "basemap": "배경 지도",
+            "overlay": "오버레이",
+            "create": "레이어 생성",
+            "update": "레이어 갱신"
+        },
+        "opacity": "오버레이 투명도",
+        "label": {
+            "basemaps": "배경 지도",
+            "overlays": "오버레이",
+            "custom": "사용자 정의",
+            "world": "세계",
+            "countries": "국가",
+            "belgium": "벨기에",
+            "bulgaria": "불가리아",
+            "finland": "핀란드",
+            "france": "프랑스",
+            "new_zealand": "뉴질랜드",
+            "norway": "노르웨이",
+            "spain": "스페인",
+            "sweden": "스웨덴",
+            "switzerland": "스위스",
+            "united_kingdom": "영국",
+            "united_states": "미국",
+            "mapboxOutdoors": "Mapbox 아웃도어",
+            "mapboxSatellite": "Mapbox 위성",
+            "openStreetMap": "오픈스트리트맵",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo 래스터",
+            "swisstopoVector": "swisstopo 벡터",
+            "swisstopoSatellite": "swisstopo 위성",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN 위성",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "하이킹",
+            "waymarkedTrailsCycling": "자전거 타기",
+            "waymarkedTrailsMTB": "산악 자전거",
+            "waymarkedTrailsSkating": "스케이팅",
+            "waymarkedTrailsHorseRiding": "승마",
+            "waymarkedTrailsWinter": "동계",
+            "points_of_interest": "관심 지점",
+            "food": "음식",
+            "bakery": "제과점",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "편의 시설",
+            "toilets": "화장실",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "대피소",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "주유소",
+            "parking": "주차장",
+            "garage": "차고",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "호텔",
+            "campsite": "야영지",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "정상",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "자전거",
+            "bicycle-parking": "자전거 주차장",
+            "bicycle-rental": "자전거 대여소",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "대중교통",
+            "railway-station": "철도역",
+            "tram-stop": "트램 정류장",
+            "bus-stop": "버스 정류장",
+            "ferry": "페리"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "경사 정보 표시",
+        "show_surface": "지면 정보 표시",
+        "show_speed": "속도 정보 표시",
+        "show_pace": "페이스 정보 표시",
+        "show_heartrate": "심박수 정보 표시",
+        "show_cadence": "케이던스 정보 표시",
+        "show_temperature": "온도 정보 표시",
+        "show_power": "파워 정보 표시"
+    },
+    "quantities": {
+        "distance": "거리",
+        "elevation": "고도",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "온도",
+        "speed": "속도",
+        "pace": "페이스",
+        "heartrate": "심박수",
+        "cadence": "케이던스",
+        "power": "파워",
+        "slope": "경사",
+        "surface": "표면",
+        "time": "시간",
+        "moving": "이동 중",
+        "total": "전체"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "파일",
+        "files": "파일",
+        "track": "경로",
+        "tracks": "경로",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "은행",
+            "beach": "해변",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "다리",
+            "building": "건물",
+            "campground": "야영지",
+            "car": "Car",
+            "car_repair": "차고",
+            "convenience_store": "편의점",
+            "crossing": "Crossing",
+            "department_store": "백화점",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "숲",
+            "gas_station": "주유소",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "호텔",
+            "house": "주택",
+            "information": "Information",
+            "park": "공원",
+            "parking_area": "주차장",
+            "pharmacy": "약국",
+            "picnic_area": "Picnic Area",
+            "restaurant": "식당",
+            "restricted_area": "제한 구역",
+            "restroom": "화장실",
+            "road": "도로",
+            "scenic_area": "Scenic Area",
+            "shelter": "대피소",
+            "shopping_center": "쇼핑 센터",
+            "shower": "Shower",
+            "summit": "정상",
+            "telephone": "전화",
+            "tunnel": "터널",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "웹 사이트",
+        "home": "홈",
+        "app": "앱",
+        "contact": "문의",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "이메일",
+        "contribute": "기여",
+        "supported_by": "supported by",
+        "support_button": "Ko-fi에서 gpx.rnmkcy.eu 후원",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "데이터 시각화",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "없음",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "위도",
+        "longitude": "경도",
+        "zoom": "확대/축소",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "미리 보기",
+        "code": "Integration code"
+    },
+    "webgl2_required": "지도를 표시하려면 WebGL 2가 필요합니다.",
+    "enable_webgl2": "브라우저에서 WebGL 2를 활성화하는 법을 확인하세요 ",
+    "page_not_found": "페이지를 찾을 수 없음"
+}
\ No newline at end of file
diff --git a/website/src/locales/lt.json b/website/src/locales/lt.json
new file mode 100755
index 0000000..52ba981
--- /dev/null
+++ b/website/src/locales/lt.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "internetinis GPX failų redaktorius",
+        "app_title": "programa",
+        "embed_title": "internetinis GPX failų redaktorius",
+        "help_title": "pagalba",
+        "404_title": "puslapis nerastas",
+        "description": "Peržiūrėkite, redaguokite ir kurkite GPX failus internete naudodami išplėstines maršruto planavimo galimybes ir failų apdorojimo įrankius, gražius žemėlapius ir išsamias duomenų vizualizacijas."
+    },
+    "menu": {
+        "new": "Naujas",
+        "new_file": "Naujas failas",
+        "new_track": "Nauja trasa",
+        "new_segment": "Naujas segmentas",
+        "open": "Atverti...",
+        "duplicate": "Dubliuoti",
+        "close": "Užverti",
+        "close_all": "Užverti visus",
+        "copy": "Kopijuoti",
+        "paste": "Įklijuoti",
+        "cut": "Iškirpti",
+        "export": "Eksportuoti...",
+        "export_all": "Eksportuoti visus...",
+        "export_options": "Eksportavimo parametrai",
+        "support_message": "Įrankį galima naudoti nemokamai, bet kainuoja pateikimas jums. Jei svetainę naudojate dažnai, apsvarstykite galimybę ją paremti. Dėkojame!",
+        "support_button": "Padėti svetainę išlaikyti nemokamą",
+        "download_file": "Atsisiųsti failą",
+        "download_files": "Atsisiųsti failus",
+        "edit": "Keisti",
+        "undo": "Atšaukti",
+        "redo": "Pakartoti",
+        "delete": "Ištrinti",
+        "select_all": "Pasirinkti viską",
+        "view": "Rodyti",
+        "elevation_profile": "Aukščio profilis",
+        "vertical_file_view": "Failų sąrašas verikaliai",
+        "switch_basemap": "Grįžti į ankstesnį bazinį žemėlapį",
+        "toggle_overlays": "Kaitalioti sluoksnius",
+        "toggle_3d": "Kaitalioti rodymą 3D",
+        "settings": "Nustatymai",
+        "distance_units": "Atstumo vienetai",
+        "metric": "Metriniai",
+        "imperial": "Imperiniai",
+        "nautical": "Nautical",
+        "velocity_units": "Greičio matavimo vienetai",
+        "temperature_units": "Temperatūros vienetas",
+        "celsius": "Celsijus",
+        "fahrenheit": "Farenheitas",
+        "language": "Kalba",
+        "mode": "Tema",
+        "system": "Sistema",
+        "light": "Šviesi",
+        "dark": "Tamsi",
+        "street_view_source": "Gatvės vaizdo šaltinis",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Žemėlapio sluoksniai...",
+        "distance_markers": "Atstumų žymės",
+        "direction_markers": "Krypties rodyklės",
+        "help": "Pagalba",
+        "more": "Daugiau...",
+        "donate": "Paremti",
+        "ctrl": "Ctrl",
+        "click": "Spustelėjimas",
+        "drag": "Vilkti",
+        "metadata": {
+            "button": "Informacija...",
+            "name": "Pavadinimas",
+            "description": "Aprašymas",
+            "save": "Išsaugoti"
+        },
+        "style": {
+            "button": "Išvaizda...",
+            "color": "Spalva",
+            "opacity": "Permatomumas",
+            "width": "Plotis"
+        },
+        "hide": "Slėpti",
+        "unhide": "Rodyti",
+        "center": "Center",
+        "open_in": "Atverti naudojant"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planuoti ar keisti maršrutą",
+            "activity": "Veikla",
+            "use_routing": "Maršrutas",
+            "use_routing_tooltip": "Sujunkite pagrindinius taškus kelių tinklu arba tiesia linija, jei išjungta",
+            "allow_private": "Naudoti privačius kelius",
+            "reverse": {
+                "button": "Apgręžti",
+                "tooltip": "Pakeisti maršruto kryptį"
+            },
+            "route_back_to_start": {
+                "button": "Grįžti į pradžią",
+                "tooltip": "Sujungti galutinį maršruto tašką su pradžios tašku"
+            },
+            "round_trip": {
+                "button": "Į abi puses",
+                "tooltip": "Grįžti į pradžią tuo pačiu maršrutu"
+            },
+            "start_loop_here": "Čia pradėti kilpą",
+            "help_no_file": "Pasirinkite maršrutą, jei norite naudoti maršruto planavimo įrankį, arba spustelėkite žemėlapyje ir pradėkite kurti naują maršrutą.",
+            "help": "Spustelėję žemėlapyje pridėsite naują pagrindinį tašką, arba tempkite esantį ir pakeisite maršrutą.",
+            "activities": {
+                "bike": "Dviračiu",
+                "racing_bike": "Kelių dviračiu",
+                "gravel_bike": "Bekelės dviračiu",
+                "mountain_bike": "Kalnų dviračiu",
+                "foot": "Bėgimas / ėjimas",
+                "motorcycle": "Motociklu",
+                "water": "Vandeniu",
+                "railway": "Geležinkeliu"
+            },
+            "surface": {
+                "unknown": "Nežinomas",
+                "paved": "Grįstas",
+                "unpaved": "Negrįstas",
+                "asphalt": "Asfaltas",
+                "concrete": "Betonas",
+                "chipseal": "Žvyrkelis",
+                "cobblestone": "Grįstas akmenimis",
+                "unhewn_cobblestone": "Grįstas nešlifuotais akmenimis",
+                "paving_stones": "Plytelės",
+                "stepping_stones": "Plytelės su tarpais",
+                "sett": "Trinkelės",
+                "metal": "Metalo",
+                "wood": "Medžio",
+                "compacted": "Sutankintas žvyras",
+                "fine_gravel": "Smulkus žvyras",
+                "gravel": "Žvyras",
+                "pebblestone": "Akmenukai",
+                "rock": "Akmenys",
+                "dirt": "Purvas",
+                "ground": "Žemė",
+                "earth": "Žemė",
+                "snow": "Sniegas",
+                "ice": "Ledas",
+                "salt": "Druska",
+                "mud": "Purvas",
+                "sand": "Smėlis",
+                "woodchips": "Medžio drožlės",
+                "grass": "Žolė",
+                "grass_paver": "Žolės grindinys"
+            },
+            "error": {
+                "from": "Pradžios taškas yra per toli nuo artimiausio kelio",
+                "via": "Tarpinis taškas yra per toli nuo artimiausio kelio",
+                "to": "Pabaigos taškas yra per toli nuo artimiausio kelio",
+                "timeout": "Maršruto skaičiavimas užtruko per ilgai, pabandykite pridėti taškus arčiau vienas kito"
+            }
+        },
+        "scissors": {
+            "tooltip": "Apkarpyti arba padalinti",
+            "crop": "Apkarpyti",
+            "split_as": "Padalinti trasą į",
+            "help_invalid_selection": "Pasirinkite trasą, kurią norite nukirpti arba padalinti.",
+            "help": "Naudokite slankiklį, kad apkarpytumėte pėdsakus, arba padalinkite paspausdami ant vieno iš padalinimo ikonų arba ant pačio pėdsako."
+        },
+        "time": {
+            "tooltip": "Valdyti laiko duomenis",
+            "start": "Pradžia",
+            "end": "Pabaiga",
+            "total_time": "Judėjimo laikas",
+            "pick_date": "Pasirinkite datą",
+            "artificial": "Sukurti tikroviškus laiko duomenis",
+            "update": "Naujinti laiko duomenis",
+            "help": "Naudokite formą naujam laiko duomenų nustatymui.",
+            "help_invalid_selection": "Pasirinkite trasą ir valdykite jos laiko duomenis."
+        },
+        "merge": {
+            "merge_traces": "Sujungti trasas",
+            "merge_contents": "Sujungti turinį ir laikyti trasas atskirai",
+            "merge_selection": "Sujungti pasirinkimą",
+            "tooltip": "Sujungti elementus",
+            "help_merge_traces": "Sujungus pasirinktas trasas bus sukurta viena ištisinė trasa.",
+            "help_cannot_merge_traces": "Turi pasirinkti kelias trasas, kad galėtumėte jas sujungti.",
+            "help_merge_contents": "Sujungus pasirinktų elementų turiny, jų turinys bus sugrupuotas į pirmąjį elementą.",
+            "help_cannot_merge_contents": "Turite pasirinkti kelis elementus norėdami sujungti jų turinį.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Išskirti turinį į kelis atskirus elementus",
+            "button": "Išskirti",
+            "help": "Iškyrus pasirinktų elementų turinį bus sukurti atskiri elementai kiekvienam turiniui.",
+            "help_invalid_selection": "Norėdami išskirti turite pasirinkti elementą, kuriame yra kelios trasos."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Kurti ar keisti svarbią vietą",
+            "icon": "Piktograma",
+            "link": "Nuoroda",
+            "longitude": "Ilguma",
+            "latitude": "Platuma",
+            "create": "Kurti svarbią vietą",
+            "add": "Pridėti svarbią vietą į failą",
+            "help": "Norėdami sukurti naują svarbią vietą, užpildykite formą arba spustelėkite esamą, kad ją redaguotumėte. Spustelėję žemėlapyje užpildysite koordinates, arba vilkite svarbią vietą, kad ją perkeltumėte.",
+            "help_no_selection": "Pasirinkite failą, kuriame kursite ar keisite svarbias vietas."
+        },
+        "reduce": {
+            "tooltip": "Sumažinti GPS taškų skaičių",
+            "tolerance": "Leistinas nuokrypis",
+            "number_of_points": "GPS taškų skaičius",
+            "button": "Sumažinti",
+            "help": "Slinkite slankiklį, norėdami pasirinkti kiek GPS taškų palikti.",
+            "help_no_selection": "Pasirinkite trasą, kurioje norite sumažnti GPS taškų skaičių."
+        },
+        "clean": {
+            "tooltip": "Išvalykite GPS taškus ir svarbias vietas pasirinkę stačiakampiu",
+            "delete_trackpoints": "Trinti GPS taškus",
+            "delete_waypoints": "Trinti svarbią vietą",
+            "delete_inside": "Trinti pasirikimo viduje",
+            "delete_outside": "Trinti pasirinkimo išorėje",
+            "button": "Ištrinti",
+            "help": "Norėdami pašalinti GPS taškus ir svarbias vietas apibrėžkite stačiakampę sritį žemėlapyje.",
+            "help_no_selection": "Pasirinkite trasą, kurioje norite išvalyti GPS taškus ir svarbias vietas."
+        }
+    },
+    "layers": {
+        "settings": "Sluoksnio parametrai",
+        "settings_help": "Pasirinkite žemėlapio sluoksnius, kuriuos norite rodyti sąsajoje, pridėkite vartotojo sluoksnius ir keiskite jų nustatymus.",
+        "selection": "Sluoksnių pasirinkimas",
+        "custom_layers": {
+            "title": "Vartotojo sluoksniai",
+            "new": "Naujas vartotojo sluoksnis",
+            "edit": "Keisti vartotojo sluoksnį",
+            "urls": "URL adresas(-ai)",
+            "url_placeholder": "WMTS, WMS arba Mapbox stiliaus JSON failas",
+            "max_zoom": "Didžiausias mastelis",
+            "layer_type": "Sluoksnio tipas",
+            "basemap": "Pagrindas",
+            "overlay": "Sluoksnis",
+            "create": "Kurti sluoksnį",
+            "update": "Naujinti sluoksnį"
+        },
+        "opacity": "Sluoksnio skaidrumas",
+        "label": {
+            "basemaps": "Pagrindo žemėlapiai",
+            "overlays": "Sluoksniai",
+            "custom": "Vartotojo",
+            "world": "Pasaulis",
+            "countries": "Šalys",
+            "belgium": "Belgija",
+            "bulgaria": "Bulgarija",
+            "finland": "Suomija",
+            "france": "Prancūzija",
+            "new_zealand": "Naujoji Zelandija",
+            "norway": "Norvegija",
+            "spain": "Ispanija",
+            "sweden": "Švedija",
+            "switzerland": "Šveicarija",
+            "united_kingdom": "Jungtinė Karalystė",
+            "united_states": "Jungtinės Amerikos Valstijos",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Žygiavimas",
+            "waymarkedTrailsCycling": "Važiavimas dviračiu",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Čiuožimas",
+            "waymarkedTrailsHorseRiding": "Jodinėjimas arkliu",
+            "waymarkedTrailsWinter": "Žiemą",
+            "points_of_interest": "Svarbios vietos",
+            "food": "Maistas",
+            "bakery": "Kepykla",
+            "food-store": "Maisto prekių parduotuvė",
+            "eat-and-drink": "Kavinė",
+            "amenities": "Patogumai",
+            "toilets": "Tualetas",
+            "water": "Vanduo",
+            "shower": "Dušas",
+            "shelter": "Prieglauda",
+            "motorized": "Automobiliai ir motociklai",
+            "fuel-station": "Degalinė",
+            "parking": "Automobilių stovėjimo aikštelė",
+            "garage": "Garažas",
+            "barrier": "Užtvara",
+            "tourism": "Turizmas",
+            "attraction": "Įdomi vieta",
+            "viewpoint": "Apžvalgos aikštelė",
+            "hotel": "Viešbutis",
+            "campsite": "Kempingas",
+            "hut": "Namelis",
+            "picnic": "Iškylos vieta",
+            "summit": "Susirinkimo vieta",
+            "pass": "Praėjimas",
+            "climbing": "Laipiojimas",
+            "bicycle": "Dviratis",
+            "bicycle-parking": "Dviračių stovėjimo aikštelė",
+            "bicycle-rental": "Dviračių nuoma",
+            "bicycle-shop": "Dviračių parduotuvė",
+            "public-transport": "Viešasis transportas",
+            "railway-station": "Geležinkelio stotis",
+            "tram-stop": "Tramvajaus stotelė",
+            "bus-stop": "Autobusų stotelė",
+            "ferry": "Keltas"
+        },
+        "color": {
+            "blue": "Mėlyna",
+            "bluered": "Mėlyna raudona",
+            "gray": "Pilka",
+            "hot": "Karšta",
+            "purple": "Violetinė",
+            "orange": "Oranžinė"
+        }
+    },
+    "chart": {
+        "show_slope": "Rodyti nuolydžio duomenis",
+        "show_surface": "Rodyti paviršiaus duomenis",
+        "show_speed": "Rodyti greičio duomenis",
+        "show_pace": "Rodyti tempo duomenis",
+        "show_heartrate": "Rodyti pulso duomenis",
+        "show_cadence": "Rodyti tempo duomenis",
+        "show_temperature": "Rodyti temperatūros duomenis",
+        "show_power": "Rodyti jėgos duomenis"
+    },
+    "quantities": {
+        "distance": "Atstumas",
+        "elevation": "Aukštis",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperatūra",
+        "speed": "Greitis",
+        "pace": "Tempas",
+        "heartrate": "Pulsas",
+        "cadence": "Tempas",
+        "power": "Jėga",
+        "slope": "Nuolydis",
+        "surface": "Paviršius",
+        "time": "Laikas",
+        "moving": "Judėjimas",
+        "total": "Bendras"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "pėd.",
+        "kilometers": "km",
+        "miles": "myl.",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/val.",
+        "miles_per_hour": "myl./val.",
+        "minutes_per_kilometer": "min./km",
+        "minutes_per_mile": "min./myl.",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "dūž./min.",
+        "cadence": "aps./min.",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Failas",
+        "files": "Failai",
+        "track": "Trasa",
+        "tracks": "Trasos",
+        "segment": "Atkarpa",
+        "segments": "Atkarpos",
+        "waypoint": "Svarbi vieta",
+        "waypoints": "Svarbios vietos",
+        "symbol": {
+            "alert": "Įspėjimas",
+            "anchor": "",
+            "bank": "Krantas",
+            "beach": "Paplūdimys",
+            "bike_trail": "Dviračių takas",
+            "binoculars": "Žiūronai",
+            "bridge": "Bridge",
+            "building": "Pastatas",
+            "campground": "Kempingas",
+            "car": "Automobilis",
+            "car_repair": "Garažas",
+            "convenience_store": "Parduotuvė",
+            "crossing": "Perėja",
+            "department_store": "Universalinė parduotuvė",
+            "drinking_water": "Vanduo",
+            "exit": "Išėjimas",
+            "lodge": "Namelis",
+            "lodging": "Apgyvendinimas",
+            "forest": "Miškas",
+            "gas_station": "Degalinė",
+            "ground_transportation": "Transportas keliu",
+            "hotel": "Viešbutis",
+            "house": "Namad",
+            "information": "Informacija",
+            "park": "Parkas",
+            "parking_area": "Automobilių stovėjimo aikštelė",
+            "pharmacy": "Vaistinė",
+            "picnic_area": "Iškylos vieta",
+            "restaurant": "Restoranas",
+            "restricted_area": "Apribota zona",
+            "restroom": "Tualetas",
+            "road": "Kelias",
+            "scenic_area": "Vaizdinga vieta",
+            "shelter": "Prieglobstus",
+            "shopping_center": "Prekybos centras",
+            "shower": "Dušas",
+            "summit": "Susirinkimo vieta",
+            "telephone": "Telefonas",
+            "tunnel": "Tunelis",
+            "water_source": "Vandens šaltinis"
+        }
+    },
+    "homepage": {
+        "website": "Tinklalapis",
+        "home": "Pagrindinis",
+        "app": "Programa",
+        "contact": "Kontaktai",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "El. paštas",
+        "contribute": "Prisidėti",
+        "supported_by": "remia",
+        "support_button": "Paremkite „gpx.rnmkcy.eu“ per „Ko-fi“",
+        "route_planning": "Maršruto planavimas",
+        "route_planning_description": "Lengvai suprantama sąsaja, leidžianti kurti maršrutus, pritaikytus kiekvienai sporto šakai, remiantis „OpenStreetMap“ duomenimis.",
+        "file_processing": "Pažangus failo apdorojimas",
+        "file_processing_description": "Įrankių rinkinys, skirtas visoms įprastoms failų apdorojimo užduotims atlikti, kurį vienu metu galima taikyti keliems failams.",
+        "maps": "Pasaulio ir vietiniai žemėlapiai",
+        "maps_description": "Didelis pagrindo žemėlapių, sluoksnių ir svarbių vietų rinkinys, padedantis pasiruošti kitam nuotykiui lauke arba atvaizduoti naujausią pasiekimą.",
+        "data_visualization": "Duomenų atvaizdvimas",
+        "data_visualization_description": "Interaktyvus aukščio profilis su išsamiais statistiniais duomenimis, kad būtų galima analizuoti užregistruotą veiklą ir būsimus tikslus.",
+        "identity": "Nemokamai, be reklamų ir atviro kodo",
+        "identity_description": "Tinklalapiu galima naudotis nemokamai, jame nėra reklamų, o kodas yra atviras ir prieinamas „GitHub“ svetainėje. Tai įmanoma tik dėl neįtikėtinos bendruomenės paramos."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Susikurkite savo žemėlapį",
+        "mapbox_token": "Prieigos prie „Mapbox“ atpažinimo ženklas",
+        "file_urls": "Failų URL adresai (atskirti kableliais)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Pagrindo žemėlapis",
+        "height": "Aukštis",
+        "fill_by": "Užpildyti (kuo)",
+        "none": "Nėra",
+        "show_controls": "Rodyti valdiklius",
+        "manual_camera": "Neautomatinė kamera",
+        "manual_camera_description": "Žemiau esantį žemėlapį galite judinti, taip pakeisite kameros padėti.",
+        "latitude": "Platuma",
+        "longitude": "Ilguma",
+        "zoom": "Mastelis",
+        "pitch": "Polinkis",
+        "bearing": "Azimutas",
+        "preview": "Peržiūra",
+        "code": "Integracijos kodas"
+    },
+    "webgl2_required": "Žemėlapio rodymui būtina „WebGL 2“.",
+    "enable_webgl2": "Sužinokite kaip aktyvuoti „WebGL 2“ naršyklėje",
+    "page_not_found": "puslapis nerastas"
+}
\ No newline at end of file
diff --git a/website/src/locales/lv.json b/website/src/locales/lv.json
new file mode 100755
index 0000000..edbf9f4
--- /dev/null
+++ b/website/src/locales/lv.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "help",
+        "404_title": "lapa nav atrasta",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Duplicate",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "Export...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Delete",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Settings",
+        "distance_units": "Distance units",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/nl.json b/website/src/locales/nl.json
new file mode 100755
index 0000000..5acf5a4
--- /dev/null
+++ b/website/src/locales/nl.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "de online GPX-bestandseditor",
+        "app_title": "app",
+        "embed_title": "de online GPX-bestandseditor",
+        "help_title": "help",
+        "404_title": "pagina niet gevonden",
+        "description": "Bekijk, bewerk en maak GPX-bestanden met geavanceerde mogelijkheden voor route planning en nabewerkingsmogelijkheden, prachtige kaarten en gedetailleerde visualisaties."
+    },
+    "menu": {
+        "new": "Nieuw",
+        "new_file": "Nieuw bestand",
+        "new_track": "Nieuwe track",
+        "new_segment": "Nieuw segment",
+        "open": "Openen...",
+        "duplicate": "Dupliceren",
+        "close": "Sluiten",
+        "close_all": "Alles sluiten",
+        "copy": "Kopiëren",
+        "paste": "Plakken",
+        "cut": "Knippen",
+        "export": "Exporteren...",
+        "export_all": "Alles exporteren...",
+        "export_options": "Export instellingen",
+        "support_message": "Het gereedschap is gratis te gebruiken, maar is niet gratis om te onderhouden. Overweeg om de website te ondersteunen als je hem vaak gebruikt. Bedankt!",
+        "support_button": "Help de website gratis te houden",
+        "download_file": "Bestand downloaden",
+        "download_files": "Bestanden downloaden",
+        "edit": "Bewerken",
+        "undo": "Ongedaan maken",
+        "redo": "Opnieuw uitvoeren",
+        "delete": "Verwijder",
+        "select_all": "Alles selecteren",
+        "view": "Weergave",
+        "elevation_profile": "Hoogteprofiel",
+        "vertical_file_view": "Verticale bestandslijst",
+        "switch_basemap": "Schakel over naar vorige basiskaart",
+        "toggle_overlays": "Schermlagen in- of uitschakelen",
+        "toggle_3d": "3D aan/uit",
+        "settings": "Instellingen",
+        "distance_units": "Afstandseenheden",
+        "metric": "Metrische eenheden",
+        "imperial": "Imperiaal",
+        "nautical": "Nautisch",
+        "velocity_units": "Snelheids eenheden",
+        "temperature_units": "Temperatuureenheden",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Taal",
+        "mode": "Thema",
+        "system": "Systeem",
+        "light": "Licht",
+        "dark": "Donker",
+        "street_view_source": "Streetview bron",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Kaart lagen...",
+        "distance_markers": "Afstandsmarkeringen",
+        "direction_markers": "Richtingspijlen",
+        "help": "Help",
+        "more": "Meer...",
+        "donate": "Doneer",
+        "ctrl": "Ctrl",
+        "click": "Klik",
+        "drag": "Slepen",
+        "metadata": {
+            "button": "Info...",
+            "name": "Naam",
+            "description": "Beschrijving",
+            "save": "Bewaar"
+        },
+        "style": {
+            "button": "Uiterlijk...",
+            "color": "Kleur",
+            "opacity": "Transparantie",
+            "width": "Breedte"
+        },
+        "hide": "Verberg",
+        "unhide": "Maak zichtbaar",
+        "center": "Midden",
+        "open_in": "Openen in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Een route plannen of bewerken",
+            "activity": "activiteit",
+            "use_routing": "Routeberekening",
+            "use_routing_tooltip": "Verbind ankerpunten via wegen, of in een rechte lijn indien routing uitgeschakeld",
+            "allow_private": "Sta privéwegen toe",
+            "reverse": {
+                "button": "Richting omkeren",
+                "tooltip": "Keer de richting van de route om"
+            },
+            "route_back_to_start": {
+                "button": "Terug naar start",
+                "tooltip": "Verbind het laatste punt van de route met het startpunt"
+            },
+            "round_trip": {
+                "button": "Rondtrip",
+                "tooltip": "Terug naar het startpunt via dezelfde route"
+            },
+            "start_loop_here": "Start lus hier",
+            "help_no_file": "Selecteer een spoor om de routering tool te gebruiken, of klik op de kaart om een nieuwe route te maken.",
+            "help": "Klik op de kaart om een nieuw ankerpunt toe te voegen, of sleep bestaande punten om de route te wijzigen.",
+            "activities": {
+                "bike": "Fiets",
+                "racing_bike": "Racefiets",
+                "gravel_bike": "Gravel fiets",
+                "mountain_bike": "Mountainbike",
+                "foot": "Hardlopen/wandelen",
+                "motorcycle": "Motorfiets",
+                "water": "Water",
+                "railway": "Spoorweg"
+            },
+            "surface": {
+                "unknown": "Onbekend",
+                "paved": "Verhard",
+                "unpaved": "Onverhard",
+                "asphalt": "Asfalt",
+                "concrete": "Beton",
+                "chipseal": "Chipseal",
+                "cobblestone": "Klinkers",
+                "unhewn_cobblestone": "Ruwe kasseien",
+                "paving_stones": "Straatstenen",
+                "stepping_stones": "Stapstenen",
+                "sett": "Instellen",
+                "metal": "Metaal",
+                "wood": "Hout",
+                "compacted": "Verdicht grind",
+                "fine_gravel": "Steengruis",
+                "gravel": "Grind",
+                "pebblestone": "Kiezelsteen",
+                "rock": "Rots",
+                "dirt": "Onverhard",
+                "ground": "Ondergrond",
+                "earth": "Aarde",
+                "snow": "Sneeuw",
+                "ice": "IJs",
+                "salt": "Zout",
+                "mud": "Modder",
+                "sand": "Zand",
+                "woodchips": "Houtsnippers",
+                "grass": "Gras",
+                "grass_paver": "Grastegel"
+            },
+            "error": {
+                "from": "Het startpunt ligt te ver van de dichtstbijzijnde weg",
+                "via": "Het via punt ligt te ver van de dichtstbijzijnde weg",
+                "to": "Het eindpunt is te ver van de dichtstbijzijnde weg",
+                "timeout": "Routeberekening heeft te lang geduurd, probeer punten dichter bij elkaar toe te voegen"
+            }
+        },
+        "scissors": {
+            "tooltip": "Bijsnijden of splitsen",
+            "crop": "Bijsnijden",
+            "split_as": "Splits het spoor in",
+            "help_invalid_selection": "Selecteer een spoor om bij te knippen of te splitsen.",
+            "help": "Gebruik de schuifregelaar om de route te snijden of te splitsen door op een van de splitsingsmarkeringen te klikken of op de route zelf."
+        },
+        "time": {
+            "tooltip": "Tijddata beheren",
+            "start": "Start",
+            "end": "Einde",
+            "total_time": "Verplaatsingstijd",
+            "pick_date": "Kies een datum",
+            "artificial": "Maak realistische tijddata",
+            "update": "Tijddata bijwerken",
+            "help": "Gebruik het formulier om nieuwe tijddata in te stellen.",
+            "help_invalid_selection": "Selecteer één spoor om de tijddata te beheren."
+        },
+        "merge": {
+            "merge_traces": "Verbind de routes",
+            "merge_contents": "Voeg de inhoud samen en houd de sporen gescheiden",
+            "merge_selection": "Voeg selectie samen",
+            "tooltip": "Items samenvoegen",
+            "help_merge_traces": "Het verbinden van de geselecteerde sporen creëert één continu spoor.",
+            "help_cannot_merge_traces": "Uw selectie moet meerdere sporen bevatten om ze te verbinden.",
+            "help_merge_contents": "Het samenvoegen van de inhoud van de geselecteerde items zal alle inhoud binnen het eerste item groeperen.",
+            "help_cannot_merge_contents": "Je selectie moet meerdere items bevatten om hun inhoud samen te voegen.",
+            "selection_tip": "Tip: gebruik {KEYBOARD_SHORTCUT} om items toe te voegen aan de selectie."
+        },
+        "extract": {
+            "tooltip": "Splits inhoud naar afzonderlijke items",
+            "button": "Uitpakken",
+            "help": "Het uitpakken van de inhoud van de geselecteerde items maakt een apart item voor elk van de inhoud.",
+            "help_invalid_selection": "Je selectie moet items met meerdere sporen bevatten om ze uit te pakken."
+        },
+        "elevation": {
+            "button": "Hoogtegegevens opvragen",
+            "help": "Het opvragen van hoogtegegevens zal de bestaande hoogtegegevens wissen, indien aanwezig, en vervangen door gegevens uit Mapbox.",
+            "help_no_selection": "Selecteer een bestand om hoogte gegevens op te vragen."
+        },
+        "waypoint": {
+            "tooltip": "Maken en bewerken van bezienswaardigheden",
+            "icon": "Pictogram",
+            "link": "Link",
+            "longitude": "Lengtegraad",
+            "latitude": "Breedtegraad",
+            "create": "Maak bezienswaardigheid",
+            "add": "Bezienswaardigheid toevoegen aan bestand",
+            "help": "Invullen om een nieuwe bezienswaardigheid te maken, of klik op een bestaande om te bewerken. Klik op de kaart om de coördinaten te vullen, of sleep de bezienswaardigheid om ze te verplaatsen.",
+            "help_no_selection": "Selecteer een bestand om bezienswaardigheden te maken of te bewerken."
+        },
+        "reduce": {
+            "tooltip": "Verminder het aantal trackpunten",
+            "tolerance": "Tolerantie",
+            "number_of_points": "Aantal gps-punten",
+            "button": "Minimaliseren",
+            "help": "Gebruik de slider om het aantal te behouden trackpunten te kiezen.",
+            "help_no_selection": "Selecteer een spoor om het aantal trackpunten te verminderen."
+        },
+        "clean": {
+            "tooltip": "Verwijder GPS-punten en aandachtspunten punten op met een selectie ( rechthoek )",
+            "delete_trackpoints": "Verwijder GPS punten",
+            "delete_waypoints": "Verwijder aandachtspunten",
+            "delete_inside": "Binnen selectie verwijderen",
+            "delete_outside": "Verwijderen buiten selectie",
+            "button": "Verwijder",
+            "help": "Selecteer een rechthoekig gebied op de kaart om GPS-punten en aandachtspunten te verwijderen.",
+            "help_no_selection": "Selecteer een route om GPS-punten en aandachtspunten op te ruimen."
+        }
+    },
+    "layers": {
+        "settings": "Kaartlagen instellingen",
+        "settings_help": "Selecteer de kaart lagen die u wilt laten zien op het scherm, voeg aangepaste lagen toe en pas hun instellingen aan.",
+        "selection": "Laagselectie",
+        "custom_layers": {
+            "title": "Eigen lagen",
+            "new": "Nieuwe aangepaste laag",
+            "edit": "Aangepaste laag bewerken",
+            "urls": "URL('s)",
+            "url_placeholder": "WMTS, WMS of Mapbox-stijl JSON",
+            "max_zoom": "Maximale zoom",
+            "layer_type": "Type van de laag",
+            "basemap": "Basiskaart",
+            "overlay": "Overlay",
+            "create": "Maak Laag",
+            "update": "Update laag"
+        },
+        "opacity": "Overlay Transparantie",
+        "label": {
+            "basemaps": "Basis kaarten",
+            "overlays": "Lagen",
+            "custom": "Aangepast",
+            "world": "Wereld",
+            "countries": "Landen",
+            "belgium": "België",
+            "bulgaria": "Bulgarije",
+            "finland": "Finland",
+            "france": "Frankrijk",
+            "new_zealand": "Nieuw-Zeeland",
+            "norway": "Noorwegen",
+            "spain": "Spanje",
+            "sweden": "Zweden",
+            "switzerland": "Zwitserland",
+            "united_kingdom": "Verenigd Koninkrijk",
+            "united_states": "Verenigde Staten",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satelliet",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satelliet",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN pakket",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satelliet",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satelliet",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Grind",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Helling",
+            "swisstopoHiking": "swisstopo Wandelen",
+            "swisstopoHikingClosures": "swisstopo Hiking Sluiting",
+            "swisstopoCycling": "swisstopo fietsen",
+            "swisstopoCyclingClosures": "swisstopo Hiking Sluiting",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB sluitingen",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Helling",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Bewegwijzerde paden",
+            "waymarkedTrailsHiking": "Trektochten",
+            "waymarkedTrailsCycling": "Fietsen",
+            "waymarkedTrailsMTB": "Mountainbike",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Paardrijden",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Interessante plek",
+            "food": "Voedsel",
+            "bakery": "Bakkerij",
+            "food-store": "Winkel",
+            "eat-and-drink": "Eten en drinken",
+            "amenities": "Voorzieningen",
+            "toilets": "Toiletten",
+            "water": "Water",
+            "shower": "Douche",
+            "shelter": "Schuilplaats",
+            "motorized": "Auto's en Motorfietsen",
+            "fuel-station": "Tankstation",
+            "parking": "Parkeren",
+            "garage": "Garage",
+            "barrier": "Slagboom",
+            "tourism": "Toerisme",
+            "attraction": "Attractie",
+            "viewpoint": "Uitzichtpunt",
+            "hotel": "Hotel",
+            "campsite": "Camping",
+            "hut": "Hut",
+            "picnic": "Picknick plaats",
+            "summit": "Top",
+            "pass": "Bergpas",
+            "climbing": "Klimmen",
+            "bicycle": "Fiets",
+            "bicycle-parking": "Fietsenstalling",
+            "bicycle-rental": "Fietsverhuur",
+            "bicycle-shop": "Fietsenwinkel",
+            "public-transport": "Openbaar vervoer",
+            "railway-station": "Treinstation",
+            "tram-stop": "Tramhalte",
+            "bus-stop": "Bushalte",
+            "ferry": "Veerboot"
+        },
+        "color": {
+            "blue": "Blauw",
+            "bluered": "Blauw-rood",
+            "gray": "Grijs",
+            "hot": "Populair",
+            "purple": "Paars",
+            "orange": "Oranje"
+        }
+    },
+    "chart": {
+        "show_slope": "Toon richtingsgegevens",
+        "show_surface": "Toon oppervlakte gegevens",
+        "show_speed": "Toon snelheidsgegevens",
+        "show_pace": "Toon oppervlakte gegevens",
+        "show_heartrate": "Toon hartslag gegevens",
+        "show_cadence": "Toon kadans gegevens",
+        "show_temperature": "Toon temperatuurgegevens",
+        "show_power": "Toon energie gegevens"
+    },
+    "quantities": {
+        "distance": "Afstand",
+        "elevation": "Stijging",
+        "elevation_gain_loss": "Stijging en daling",
+        "temperature": "Temperatuur",
+        "speed": "Snelheid",
+        "pace": "Snelheid",
+        "heartrate": "Hartslag",
+        "cadence": "Cadans",
+        "power": "Kracht",
+        "slope": "Helling",
+        "surface": "Oppervlak",
+        "time": "Tijd",
+        "moving": "Beweging",
+        "total": "Totaal"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mijl",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mijl",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "knopen",
+        "heartrate": "slagen/min",
+        "cadence": "omwentelingen per minuut",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Bestand",
+        "files": "Bestanden",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segmenten",
+        "waypoint": "Aandachtspunten",
+        "waypoints": "Aandachtspunten",
+        "symbol": {
+            "alert": "Melding",
+            "anchor": "Anker",
+            "bank": "Bank",
+            "beach": "Strand",
+            "bike_trail": "Fiets route",
+            "binoculars": "Verrekijker",
+            "bridge": "Brug",
+            "building": "Gebouw",
+            "campground": "Camping",
+            "car": "Auto",
+            "car_repair": "Garage",
+            "convenience_store": "Gemakswinkel",
+            "crossing": "Kruising",
+            "department_store": "Warenhuis",
+            "drinking_water": "Water",
+            "exit": "Uitgang",
+            "lodge": "Hut",
+            "lodging": "Accommodatie",
+            "forest": "Bos",
+            "gas_station": "Tankstation",
+            "ground_transportation": "Grond vervoer",
+            "hotel": "Hotel",
+            "house": "Huis",
+            "information": "Informatie",
+            "park": "Park",
+            "parking_area": "Parkeren",
+            "pharmacy": "Apotheek",
+            "picnic_area": "Picknick plaats",
+            "restaurant": "Restaurant",
+            "restricted_area": "Afgesloten gebied",
+            "restroom": "Toiletten",
+            "road": "Weg",
+            "scenic_area": "Schilderachtig gebied",
+            "shelter": "Schuilplaats",
+            "shopping_center": "Winkelcentrum",
+            "shower": "Douche",
+            "summit": "Top",
+            "telephone": "Telefoon",
+            "tunnel": "Tunnel",
+            "water_source": "Waterbron"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Beginscherm",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "E-mail",
+        "contribute": "Draag bij",
+        "supported_by": "ondersteund door",
+        "support_button": "Ondersteun gpx.rnmkcy.eu op Ko-fi",
+        "route_planning": "Routeplanner software",
+        "route_planning_description": "Een intuïtieve interface voor het maken van routes, aangepast aan elke sport, gebaseerd op OpenStreetMap gegevens.",
+        "file_processing": "Geavanceerde bestandsverwerking",
+        "file_processing_description": "Een pakket hulpmiddelen voor het uitvoeren van alle gebruikelijke bestandsverwerking, toepasbaar op meerdere bestanden tegelijk.",
+        "maps": "Globale en lokale kaarten",
+        "maps_description": "Een grote verzameling van basemaps, overlays en interessante punten om je te helpen je volgende outdoor avontuur te maken, of om je laatste prestatie te visualiseren.",
+        "data_visualization": "Data visualisatie",
+        "data_visualization_description": "Een interactief hoogteprofiel met gedetailleerde statistieken om opgenomen activiteiten en toekomstige doelstellingen te analyseren.",
+        "identity": "Vrij, advertentievrij en open source",
+        "identity_description": "De website is gratis te gebruiken, zonder advertenties, en de broncode is publiekelijk beschikbaar op GitHub. Dit is alleen mogelijk dankzij de ongelooflijke steun van de gemeenschap."
+    },
+    "docs": {
+        "translate": "Verbeter de vertaling op Crowdin",
+        "answer_not_found": "Niet gevonden wat je zocht?",
+        "ask_on_reddit": "Vraag de community op Reddit",
+        "search": {
+            "search": "Zoeken",
+            "clear": "Wissen",
+            "cancel": "Annuleren",
+            "recent": "Recente zoekopdrachten",
+            "no_recent": "Geen recente zoekopdrachten",
+            "save": "Bewaar deze zoekopdracht",
+            "remove": "Verwijder deze zoekopdracht uit de geschiedenis",
+            "favorites": "Favorieten",
+            "remove_favorite": "Verwijder deze zoekopdracht uit favorieten",
+            "to_select": "om te selecteren",
+            "to_navigate": "om te navigeren",
+            "to_close": "om te sluiten",
+            "no_results": "Geen resultaten voor",
+            "no_results_suggestion": "Probeer te zoeken op"
+        }
+    },
+    "embedding": {
+        "title": "Maak je eigen kaart",
+        "mapbox_token": "Toegangstoken voor Mapbox",
+        "file_urls": "Bestands URL's (komma gescheiden)",
+        "drive_ids": "Google Drive bestand ID's (gescheiden door komma's)",
+        "basemap": "Basiskaart",
+        "height": "Hoogte",
+        "fill_by": "Opvullen door",
+        "none": "Geen",
+        "show_controls": "Toon bedieningspaneel",
+        "manual_camera": "Handleiding camera",
+        "manual_camera_description": "Je kunt de kaart hieronder verplaatsen om de camerapositie aan te passen.",
+        "latitude": "Breedtegraad",
+        "longitude": "Lengtegraad",
+        "zoom": "Inzoomen",
+        "pitch": "Snelheid",
+        "bearing": "Richting",
+        "preview": "Voorbeeld",
+        "code": "Integratie code"
+    },
+    "webgl2_required": "WebGL 2 is vereist om de kaart weer te geven.",
+    "enable_webgl2": "Leer hoe u WebGL 2 instelt in uw browser",
+    "page_not_found": "pagina niet gevonden"
+}
\ No newline at end of file
diff --git a/website/src/locales/no.json b/website/src/locales/no.json
new file mode 100755
index 0000000..ae089ad
--- /dev/null
+++ b/website/src/locales/no.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "online GPX-fil editor",
+        "app_title": "app",
+        "embed_title": "online GPX-fil editor",
+        "help_title": "hjelp",
+        "404_title": "page not found",
+        "description": "Vis, rediger og opprett GPX-filer online med avansert ruteplanlegging og filbehandling, vakre kart og detaljert visualisering."
+    },
+    "menu": {
+        "new": "Ny",
+        "new_file": "Ny fil",
+        "new_track": "Nytt spor",
+        "new_segment": "Nytt segment",
+        "open": "Åpne...",
+        "duplicate": "Dupliser",
+        "close": "Lukk",
+        "close_all": "Lukk alle",
+        "copy": "Kopier",
+        "paste": "Lim inn",
+        "cut": "Klipp ut",
+        "export": "Eksporter...",
+        "export_all": "Eksporter alle...",
+        "export_options": "Innstillinger for eksport",
+        "support_message": "Verktøyet er gratis å bruke, men ikke gratis å drifte. Vurder å støtte nettsiden hvis du bruker den ofte. Tusen takk!",
+        "support_button": "Hjelp til å holde nettstedet gratis",
+        "download_file": "Last ned fil",
+        "download_files": "Last ned filer",
+        "edit": "Rediger",
+        "undo": "Angre",
+        "redo": "Gjenta",
+        "delete": "Slett",
+        "select_all": "Velg alle",
+        "view": "Visning",
+        "elevation_profile": "Høydeprofil",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Bytt til forrige basekart",
+        "toggle_overlays": "Vis/skjul kartlag",
+        "toggle_3d": "Skru av/på 3D",
+        "settings": "Innstillinger",
+        "distance_units": "Avstandsenhet",
+        "metric": "Metrisk",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Hastighetsenhet",
+        "temperature_units": "Temperaturenhet",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Språk",
+        "mode": "Tema",
+        "system": "System",
+        "light": "Lys",
+        "dark": "Mørk",
+        "street_view_source": "Gatevisning kilde",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Kartlag...",
+        "distance_markers": "Distansemarkører",
+        "direction_markers": "Retningspiler",
+        "help": "Hjelp",
+        "more": "More...",
+        "donate": "Donere",
+        "ctrl": "Ctrl",
+        "click": "Klikk",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Informasjon...",
+            "name": "Navn",
+            "description": "Beskrivelse",
+            "save": "Lagre"
+        },
+        "style": {
+            "button": "Utseende...",
+            "color": "Farge",
+            "opacity": "Gjennomsiktighet",
+            "width": "Bredde"
+        },
+        "hide": "Skjul",
+        "unhide": "Vis",
+        "center": "Center",
+        "open_in": "Åpne I"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planlegg eller endre en rute",
+            "activity": "Aktivitet",
+            "use_routing": "Dirigering",
+            "use_routing_tooltip": "Koble forankringspunkter via veinett, eller i en rett linje hvis den er deaktivert",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Omvendt",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start sløyfe her",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Sykkel",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Fjellsykkel",
+                "foot": "Løping/Tur",
+                "motorcycle": "Motorsykkel",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Belegning",
+                "unpaved": "Uasfaltert",
+                "asphalt": "Asfalt",
+                "concrete": "Betong",
+                "chipseal": "Grov asfalt",
+                "cobblestone": "Brostein",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metall",
+                "wood": "Treverk",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Grus",
+                "pebblestone": "Rullestein",
+                "rock": "Stein",
+                "dirt": "Jord",
+                "ground": "Bakke",
+                "earth": "Jord",
+                "snow": "Snø",
+                "ice": "Is",
+                "salt": "Salt",
+                "mud": "Gjørme",
+                "sand": "Sand",
+                "woodchips": "Treflis",
+                "grass": "Gress",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Bevegelsestid",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Slå sammen valgte",
+            "tooltip": "Slå sammen elementer",
+            "help_merge_traces": "Ved å koble sammen de valgte sporene vil det opprettes ett enkelt kontinuerlig spor.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Slett",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Lagtype",
+            "basemap": "Basiskart",
+            "overlay": "Overlag",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blå",
+            "bluered": "Blue Red",
+            "gray": "Grå",
+            "hot": "Hot",
+            "purple": "Lilla",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Avstand",
+        "elevation": "Høyde",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Hastighet",
+        "pace": "Tempo",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Skråning",
+        "surface": "Overflate",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Totalt"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Spor",
+        "tracks": "Spor",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Avbryt",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basiskart",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/pl.json b/website/src/locales/pl.json
new file mode 100755
index 0000000..22f158c
--- /dev/null
+++ b/website/src/locales/pl.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "edytor online plików GPX",
+        "app_title": "app",
+        "embed_title": "edytor online plików GPX",
+        "help_title": "pomoc",
+        "404_title": "nie odnaleziono strony",
+        "description": "Przeglądaj, edytuj i twórz pliki GPX online z zaawansowanymi możliwościami planowania trasy i narzędziami do przetwarzania plików, pięknymi mapami i szczegółowymi wizualizacjami danych."
+    },
+    "menu": {
+        "new": "Nowy",
+        "new_file": "Nowy plik",
+        "new_track": "Nowa ścieżka",
+        "new_segment": "Nowy segment",
+        "open": "Otwórz...",
+        "duplicate": "Duplikuj",
+        "close": "Zamknij",
+        "close_all": "Zamknij wszystko",
+        "copy": "Kopiuj",
+        "paste": "Wklej",
+        "cut": "Wytnij",
+        "export": "Eksportuj...",
+        "export_all": "Eksportuj wszystko...",
+        "export_options": "Opcje eksportu",
+        "support_message": "Narzędzie jest darmowe w użyciu, ale nie jest darmowe w utrzymaniu. Jeśli często go używasz, rozważ wsparcie witryny. Dziękujemy!",
+        "support_button": "Wspomóż, by strona nadal była darmowa",
+        "download_file": "Pobierz plik",
+        "download_files": "Pobierz pliki",
+        "edit": "Edytuj",
+        "undo": "Cofnij",
+        "redo": "Ponów",
+        "delete": "Usuń",
+        "select_all": "Zaznacz wszystko",
+        "view": "Wyświetl",
+        "elevation_profile": "Profil wysokości",
+        "vertical_file_view": "Pionowa lista plików",
+        "switch_basemap": "Przełącz na poprzednią mapę",
+        "toggle_overlays": "Przełącz nakładki",
+        "toggle_3d": "Przełącz widok 3D",
+        "settings": "Ustawienia",
+        "distance_units": "Jednostki odległości",
+        "metric": "Metryczne",
+        "imperial": "Imperialne",
+        "nautical": "Nautical",
+        "velocity_units": "Jednostki prędkości",
+        "temperature_units": "Jednostki temperatury",
+        "celsius": "Stopnie Celsjusza",
+        "fahrenheit": "Stopnie Fahrenheita",
+        "language": "Język",
+        "mode": "Motyw",
+        "system": "System",
+        "light": "Jasny",
+        "dark": "Ciemny",
+        "street_view_source": "Źródło widoku ulicznego",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Warstwy mapy...",
+        "distance_markers": "Znaczniki odległości",
+        "direction_markers": "Strzałki kierunku",
+        "help": "Pomoc",
+        "more": "Więcej...",
+        "donate": "Przekaż darowiznę",
+        "ctrl": "Ctrl",
+        "click": "Kliknij",
+        "drag": "Przeciągnij",
+        "metadata": {
+            "button": "Informacje...",
+            "name": "Nazwa",
+            "description": "Opis",
+            "save": "Zapisz"
+        },
+        "style": {
+            "button": "Wygląd...",
+            "color": "Kolor",
+            "opacity": "Przezroczystość",
+            "width": "Szerokość"
+        },
+        "hide": "Ukryj",
+        "unhide": "Pokaż",
+        "center": "Wyśrodkuj",
+        "open_in": "Otwórz w"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Zaplanuj lub edytuj trasę",
+            "activity": "Aktywność",
+            "use_routing": "Trasa",
+            "use_routing_tooltip": "Połącz punkty drogami lub w linii prostej, jeśli wyłączone",
+            "allow_private": "Zezwalaj na prywatne drogi",
+            "reverse": {
+                "button": "Odwróć",
+                "tooltip": "Odwróć kierunek trasy"
+            },
+            "route_back_to_start": {
+                "button": "Wróć do początku",
+                "tooltip": "Połącz ostatni punkt trasy z punktem początkowym"
+            },
+            "round_trip": {
+                "button": "Przejazd z powrotem",
+                "tooltip": "Powrót do punktu początkowego tą samą trasą"
+            },
+            "start_loop_here": "Rozpocznij pętlę tutaj",
+            "help_no_file": "Wybierz ślad do użycia narzędzia trasy lub kliknij mapę, aby rozpocząć tworzenie nowej trasy.",
+            "help": "Kliknij mapę, aby dodać nowy punkt lub przeciągnij istniejące, aby zmienić trasę.",
+            "activities": {
+                "bike": "Rower",
+                "racing_bike": "Rower szosowy",
+                "gravel_bike": "Gravel",
+                "mountain_bike": "Rower górski",
+                "foot": "Bieg/Wędrówka",
+                "motorcycle": "Motocykl",
+                "water": "Woda",
+                "railway": "Kolej"
+            },
+            "surface": {
+                "unknown": "Nieznany",
+                "paved": "Utwardzona",
+                "unpaved": "Nieutwardzona",
+                "asphalt": "Asfalt",
+                "concrete": "Beton",
+                "chipseal": "Nawierzchnia utrwalana powierzchniowo",
+                "cobblestone": "Bruk",
+                "unhewn_cobblestone": "Bruk",
+                "paving_stones": "Płyta",
+                "stepping_stones": "Bruk",
+                "sett": "Bruk",
+                "metal": "Metal",
+                "wood": "Drewno",
+                "compacted": "Utwardzony żwir",
+                "fine_gravel": "Drobny żwir",
+                "gravel": "Żwir",
+                "pebblestone": "Otoczak",
+                "rock": "Kamień",
+                "dirt": "Ziemia",
+                "ground": "Teren",
+                "earth": "Ziemia",
+                "snow": "Śnieg",
+                "ice": "Lód",
+                "salt": "Sól",
+                "mud": "Błoto",
+                "sand": "Piasek",
+                "woodchips": "Zrębki",
+                "grass": "Trawa",
+                "grass_paver": "Płyta ażurowa"
+            },
+            "error": {
+                "from": "Punkt początkowy jest zbyt daleko od najbliższej drogi",
+                "via": "Punkt przelotowy jest zbyt daleko od najbliższej drogi",
+                "to": "Punkt końcowy jest zbyt daleko od najbliższej drogi",
+                "timeout": "Obliczanie trasy trwało zbyt długo, spróbuj dodać punkty bliżej siebie"
+            }
+        },
+        "scissors": {
+            "tooltip": "Przytnij lub podziel",
+            "crop": "Przytnij",
+            "split_as": "Podziel ślad na",
+            "help_invalid_selection": "Wybierz ślad do przycinania lub rozdzielenia.",
+            "help": ".."
+        },
+        "time": {
+            "tooltip": "Zarządzaj danymi czasu",
+            "start": "Początek",
+            "end": "Koniec",
+            "total_time": "Czas ruchu",
+            "pick_date": "Wybierz datę",
+            "artificial": "Utwórz realistyczne dane czasu",
+            "update": "Aktualizuj dane czasu",
+            "help": "Użyj formularza, aby ustawić nowe dane czasu.",
+            "help_invalid_selection": "Wybierz pojedynczy ślad do zarządzania danymi czasowymi."
+        },
+        "merge": {
+            "merge_traces": "Połącz ślady",
+            "merge_contents": "Scal zawartość, ale utrzymaj rozłączone ślady",
+            "merge_selection": "Scal zaznaczenie",
+            "tooltip": "Scal elementy razem",
+            "help_merge_traces": "Połączenie zaznaczonych śladów stworzy pojedynczy ciągły ślad.",
+            "help_cannot_merge_traces": "Wybór musi zawierać kilka śladów, aby je połączyć.",
+            "help_merge_contents": "Scalanie zawartości zaznaczonych elementów zgrupuje całą zawartość wewnątrz pierwszego elementu.",
+            "help_cannot_merge_contents": "Twój wybór musi zawierać kilka elementów, aby scalić ich zawartość.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Wyodrębnij zawartość do rozdzielenia elementów",
+            "button": "Wyodrębnij",
+            "help": "Wyodrębnienie zawartości zaznaczonych elementów utworzy oddzielny element dla każdej z nich.",
+            "help_invalid_selection": "Twój wybór musi zawierać elementy z kilkoma śladami, aby je rozpakować."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Twórz i edytuj punkty zainteresowania",
+            "icon": "Ikona",
+            "link": "Link",
+            "longitude": "Długość",
+            "latitude": "Szerokość",
+            "create": "Utwórz punkt zainteresowania",
+            "add": "Dodaj punkt zainteresowania do pliku",
+            "help": "Wypełnij formularz, aby utworzyć nowy punkt zainteresowania, lub kliknij istniejący, aby go edytować. Kliknij mapę, aby wypełnić współrzędne, lub przeciągnij interesujące punkty, aby je przenieść.",
+            "help_no_selection": "Wybierz plik, aby utworzyć lub edytować punkty zainteresowania."
+        },
+        "reduce": {
+            "tooltip": "Zredukuj liczbę punktów GPS",
+            "tolerance": "Dokładność",
+            "number_of_points": "Liczba punktów GPS",
+            "button": "Zmniejsz",
+            "help": "Użyj suwaka, aby wybrać liczbę punktów GPS do zachowania.",
+            "help_no_selection": "Wybierz ślad, aby zmniejszyć liczbę punktów GPS."
+        },
+        "clean": {
+            "tooltip": "Wyczyść punkty GPS i punkty zainteresowania za pomocą zaznaczenia prostokątnego",
+            "delete_trackpoints": "Usuń punkty GPS",
+            "delete_waypoints": "Usuń punkt zainteresowania",
+            "delete_inside": "Usuń wewnątrz zaznaczenia",
+            "delete_outside": "Usuń na zewnątrz zaznaczenia",
+            "button": "Usuń",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Ustawienia warstw",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(e)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Maksymalne powiększenie",
+            "layer_type": "Rodzaj warstwy",
+            "basemap": "Mapa bazowa",
+            "overlay": "Nakładka",
+            "create": "Utwórz warstwę",
+            "update": "Zaktualizuj warstwę"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Mapy bazowe",
+            "overlays": "Nakładki",
+            "custom": "Własne",
+            "world": "Świat",
+            "countries": "Kraje",
+            "belgium": "Belgia",
+            "bulgaria": "Bułgaria",
+            "finland": "Finlandia",
+            "france": "Francja",
+            "new_zealand": "Nowa Zelandia",
+            "norway": "Norwegia",
+            "spain": "Hiszpania",
+            "sweden": "Szwecja",
+            "switzerland": "Szwajcaria",
+            "united_kingdom": "Wielka Brytania",
+            "united_states": "Stany Zjednoczone",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Kolarstwo",
+            "waymarkedTrailsMTB": "Rower górski",
+            "waymarkedTrailsSkating": "Rolki",
+            "waymarkedTrailsHorseRiding": "Jazda konna",
+            "waymarkedTrailsWinter": "Zima",
+            "points_of_interest": "Punkty zainteresowania",
+            "food": "Odżywianie",
+            "bakery": "Piekarnia",
+            "food-store": "Sklep z żywnością",
+            "eat-and-drink": "Jedzenie i picie",
+            "amenities": "Udogodnienia",
+            "toilets": "Toalety",
+            "water": "Woda",
+            "shower": "Prysznic",
+            "shelter": "Schronienie",
+            "motorized": "Samochody i motocykle",
+            "fuel-station": "Stacja paliw",
+            "parking": "Parking",
+            "garage": "Warsztat",
+            "barrier": "Bariera",
+            "tourism": "Turystyka",
+            "attraction": "Atrakcja",
+            "viewpoint": "Punkt widokowy",
+            "hotel": "Hotel",
+            "campsite": "Kemping",
+            "hut": "Chatka",
+            "picnic": "Strefa piknikowa",
+            "summit": "Szczyt",
+            "pass": "Przełęcz",
+            "climbing": "Wspinaczka",
+            "bicycle": "Rower",
+            "bicycle-parking": "Parking dla rowerów",
+            "bicycle-rental": "Wypożyczalnia rowerów",
+            "bicycle-shop": "Sklep rowerowy",
+            "public-transport": "Transport publiczny",
+            "railway-station": "Stacja kolejowa",
+            "tram-stop": "Przystanek tramwajowy",
+            "bus-stop": "Przystanek autobusowy",
+            "ferry": "Prom"
+        },
+        "color": {
+            "blue": "Niebieski",
+            "bluered": "Niebiesko-czerwony",
+            "gray": "Szary",
+            "hot": "Gorący",
+            "purple": "Fioletowy",
+            "orange": "Pomarańczowy"
+        }
+    },
+    "chart": {
+        "show_slope": "Pokaż dane nachylenia",
+        "show_surface": "Pokaż dane nawierzchni",
+        "show_speed": "Pokaż dane prędkości",
+        "show_pace": "Pokaż dane tempa",
+        "show_heartrate": "Pokaż dane tętna",
+        "show_cadence": "Pokaż dane rytmu",
+        "show_temperature": "Pokaż dane temperatury",
+        "show_power": "Pokaż dane mocy"
+    },
+    "quantities": {
+        "distance": "Dystans",
+        "elevation": "Przewyższenie",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperatura",
+        "speed": "Prędkość",
+        "pace": "Tempo",
+        "heartrate": "Tętno",
+        "cadence": "Rytm",
+        "power": "Moc",
+        "slope": "Nachylenie",
+        "surface": "Powierzchnia",
+        "time": "Czas",
+        "moving": "W ruchu",
+        "total": "Łącznie"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Plik",
+        "files": "Pliki",
+        "track": "Trasa",
+        "tracks": "Trasy",
+        "segment": "Segment",
+        "segments": "Segmenty",
+        "waypoint": "Ciekawe miejsce",
+        "waypoints": "Ciekawe miejsca",
+        "symbol": {
+            "alert": "Ostrzeżenie",
+            "anchor": "Punkt stały",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Kemping",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Sklep spożywczy",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Woda",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Stacja paliw",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restauracja",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toalety",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Prysznic",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Anuluj",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "Adres URL do pliku (rozdzielonego przecinkami)",
+        "drive_ids": "ID pliku na Google Drive (rozdzielonego przecinkami)",
+        "basemap": "Mapa bazowa",
+        "height": "Height",
+        "fill_by": "Wypełnij przez",
+        "none": "Brak",
+        "show_controls": "Pokazuj przyciski",
+        "manual_camera": "Ręczna kamera",
+        "manual_camera_description": "Możesz przesunąć mapę poniżej, aby dostosować pozycję kamery.",
+        "latitude": "Szerokość geograficzna",
+        "longitude": "Długość geograficzna",
+        "zoom": "Powiększenie",
+        "pitch": "Nachylenie",
+        "bearing": "Kierunek",
+        "preview": "Podgląd",
+        "code": "Kod integracyjny"
+    },
+    "webgl2_required": "WebGL 2 jest wymagany do wyświetlenia mapy.",
+    "enable_webgl2": "Dowiedz się, jak włączyć WebGL 2 w przeglądarce",
+    "page_not_found": "nie odnaleziono strony"
+}
\ No newline at end of file
diff --git a/website/src/locales/pt-BR.json b/website/src/locales/pt-BR.json
new file mode 100755
index 0000000..cdd9509
--- /dev/null
+++ b/website/src/locales/pt-BR.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "o editor online de arquivos GPX",
+        "app_title": "aplicativo",
+        "embed_title": "o editor online de arquivos GPX",
+        "help_title": "ajuda",
+        "404_title": "página não encontrada",
+        "description": "Visualizar, editar e criar arquivos GPX online com capacidade de roteamento avançado e ferramentas de processamento de arquivos, belos mapas e visualização de dados detalhados."
+    },
+    "menu": {
+        "new": "Novo",
+        "new_file": "Novo arquivo",
+        "new_track": "Novo percurso",
+        "new_segment": "Novo segmento",
+        "open": "Abrir...",
+        "duplicate": "Duplicar",
+        "close": "Fechar",
+        "close_all": "Fechar todos",
+        "copy": "Copiar",
+        "paste": "Colar",
+        "cut": "Cortar",
+        "export": "Exportar...",
+        "export_all": "Exportar todos...",
+        "export_options": "Opções de exportação",
+        "support_message": "Essa ferramenta é gratuita para você, mas não para nós. Por favor, considere suportar financeiramente o site se você o utiliza frequentemente. Obrigado!",
+        "support_button": "Ajude a manter o site gratuito",
+        "download_file": "Baixar arquivo",
+        "download_files": "Baixar arquivos",
+        "edit": "Editar",
+        "undo": "Desfazer",
+        "redo": "Refazer",
+        "delete": "Apagar",
+        "select_all": "Selecionar todos",
+        "view": "Visualizar",
+        "elevation_profile": "Perfil de elevação",
+        "vertical_file_view": "Lista vertical de arquivos",
+        "switch_basemap": "Trocar para mapa base anterior",
+        "toggle_overlays": "Alternar sobreposições",
+        "toggle_3d": "Alternar 3D",
+        "settings": "Configurações",
+        "distance_units": "Unidades de distância",
+        "metric": "Métrico",
+        "imperial": "Imperial",
+        "nautical": "Náutico",
+        "velocity_units": "Unidades de velocidade",
+        "temperature_units": "Unidade de temperatura",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Idioma",
+        "mode": "Tema",
+        "system": "Sistema",
+        "light": "Claro",
+        "dark": "Escuro",
+        "street_view_source": "Fonte de Street View",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Camadas do mapa...",
+        "distance_markers": "Marcadores de distância",
+        "direction_markers": "Setas de direção",
+        "help": "Ajuda",
+        "more": "Mais...",
+        "donate": "Doar",
+        "ctrl": "Ctrl",
+        "click": "Clique",
+        "drag": "Arrastar",
+        "metadata": {
+            "button": "Informações...",
+            "name": "Nome",
+            "description": "Descrição",
+            "save": "Salvar"
+        },
+        "style": {
+            "button": "Aparência...",
+            "color": "Cor",
+            "opacity": "Opacidade",
+            "width": "Largura"
+        },
+        "hide": "Ocultar",
+        "unhide": "Mostrar",
+        "center": "Centralizar",
+        "open_in": "Abrir em"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planejar ou editar uma rota",
+            "activity": "Atividade",
+            "use_routing": "Rota",
+            "use_routing_tooltip": "Conecte pontos âncora via rede rodoviária ou em linha reta se desativado",
+            "allow_private": "Permitir estradas privadas",
+            "reverse": {
+                "button": "Inverter",
+                "tooltip": "Inverter a direção da rota"
+            },
+            "route_back_to_start": {
+                "button": "Voltar para o início",
+                "tooltip": "Conecte o último ponto da rota com o ponto de partida"
+            },
+            "round_trip": {
+                "button": "Ida e volta",
+                "tooltip": "Retorne ao ponto de partida pela mesma rota"
+            },
+            "start_loop_here": "Iniciar o loop aqui",
+            "help_no_file": "Selecione uma trilha para usar a ferramenta de roteamento, ou clique no mapa para começar a criar uma nova rota.",
+            "help": "Clique no mapa para adicionar pontos de âncora ou arraste os existentes para alterar a rota.",
+            "activities": {
+                "bike": "Bicicleta",
+                "racing_bike": "Bicicleta de estrada",
+                "gravel_bike": "Bicicleta de cascalho",
+                "mountain_bike": "Bicicleta de montanha",
+                "foot": "Corrida/caminhada",
+                "motorcycle": "Moto",
+                "water": "Água",
+                "railway": "Ferrovia"
+            },
+            "surface": {
+                "unknown": "Desconhecido",
+                "paved": "Pavimentado",
+                "unpaved": "Não pavimentado",
+                "asphalt": "Asfalto",
+                "concrete": "Cimento",
+                "chipseal": "Pedriscos",
+                "cobblestone": "Empedrado",
+                "unhewn_cobblestone": "Paralelepípedo bruto",
+                "paving_stones": "Paralelepípedo",
+                "stepping_stones": "Caminho de pedras",
+                "sett": "Pedra portuguesa",
+                "metal": "Metal",
+                "wood": "Madeira",
+                "compacted": "Cascalho compactado",
+                "fine_gravel": "Cascalho fino",
+                "gravel": "Gravilha",
+                "pebblestone": "Pedregulhos",
+                "rock": "Pedra",
+                "dirt": "Terra",
+                "ground": "Chão",
+                "earth": "Terra",
+                "snow": "Neve",
+                "ice": "Gelo",
+                "salt": "Sal",
+                "mud": "Lama",
+                "sand": "Areia",
+                "woodchips": "Cavacos de madeira",
+                "grass": "Grama",
+                "grass_paver": "Pavimentação com grama"
+            },
+            "error": {
+                "from": "O ponto de partida está muito longe da estrada mais próxima",
+                "via": "O ponto intermediário está muito longe da estrada mais próxima",
+                "to": "O ponto de chegada está muito longe da estrada mais próxima",
+                "timeout": "O cálculo da rota demorou muito tempo, tente adicionar pontos mais próximos"
+            }
+        },
+        "scissors": {
+            "tooltip": "Cortar ou dividir",
+            "crop": "Cortar",
+            "split_as": "Dividir a trilha em",
+            "help_invalid_selection": "Selecione uma trilha para cortar ou dividir.",
+            "help": "Use o controle deslizante para cortar o rastro ou divida-o clicando em um dos marcadores de divisão ou no próprio rastro."
+        },
+        "time": {
+            "tooltip": "Gerenciar dados de tempo",
+            "start": "Iniciar",
+            "end": "Fim",
+            "total_time": "Tempo em Movimento",
+            "pick_date": "Escolha uma data",
+            "artificial": "Criar dados realista de tempo",
+            "update": "Atualizar dados de temp",
+            "help": "Use o formulário para definir os novos dados horários.",
+            "help_invalid_selection": "Seleciona uma única trilha para gerenciar seus dados de tempo."
+        },
+        "merge": {
+            "merge_traces": "Conecte as trilhas",
+            "merge_contents": "Mesclar o conteúdo e manter as trilhas desconectadas",
+            "merge_selection": "Unir seleção",
+            "tooltip": "Unir itens",
+            "help_merge_traces": "Conectar as trilhas selecionadas criará uma trilha única contínua.",
+            "help_cannot_merge_traces": "Sua seleção deve conter várias trilhas para conectá-las.",
+            "help_merge_contents": "Mesclar o conteúdo dos itens selecionados agrupará todo o conteúdo dentro do primeiro item.",
+            "help_cannot_merge_contents": "Sua seleção deve conter vários itens para mesclar seu conteúdo.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extrair conteúdo para itens separados",
+            "button": "Extrair",
+            "help": "Extrair o conteúdo dos itens selecionados criará um item separado para cada um de seu conteúdo.",
+            "help_invalid_selection": "Sua seleção deve conter itens com multiplas trilhas para extraí-las."
+        },
+        "elevation": {
+            "button": "Solicitar dados de elevação",
+            "help": "Solicitar dados de elevação apagará os dados de elevação existentes, se houver, e os substituirá pelos dados do Mapbox.",
+            "help_no_selection": "Selecione um item de arquivo para solicitar os dados de elevação."
+        },
+        "waypoint": {
+            "tooltip": "Criar e editar pontos de interesse",
+            "icon": "Ícone",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Criar ponto de interesse",
+            "add": "Adicionar ponto de interesse ao arquivo",
+            "help": "Preencha o formulário para criar um novo ponto de interesse, ou clique em um já existente para editá-lo. Clique no mapa para preencher as coordenadas ou arraste pontos de interesse para movê-las.",
+            "help_no_selection": "Selecione um arquivo para criar ou editar pontos de interesse."
+        },
+        "reduce": {
+            "tooltip": "Reduzir o número de pontos GPS",
+            "tolerance": "Tolerância",
+            "number_of_points": "Número de pontos GPS",
+            "button": "Minificar",
+            "help": "Use o controle deslizante para escolher o número de pontos GPS para manter.",
+            "help_no_selection": "Seleciona uma trilha para reduzir o número de pontos GPS."
+        },
+        "clean": {
+            "tooltip": "Limpar pontos de GPS e pontos de interesse com uma seleção retangular",
+            "delete_trackpoints": "Excluir pontos GPS",
+            "delete_waypoints": "Excluir pontos de interesse",
+            "delete_inside": "Excluir dentro da seleção",
+            "delete_outside": "Excluir fora da seleção",
+            "button": "Apagar",
+            "help": "Selecione uma área retangular no mapa para remover pontos GPS e pontos de interesse.",
+            "help_no_selection": "Selecione uma trilha para limpar os pontos GPS e pontos de interesse."
+        }
+    },
+    "layers": {
+        "settings": "Configurações de camada",
+        "settings_help": "Selecione as camadas do mapa que você deseja mostrar na interface, adicione as customizadas e ajuste suas configurações.",
+        "selection": "Seleção de camada",
+        "custom_layers": {
+            "title": "Camadas personalizadas",
+            "new": "Nova camada personalizada",
+            "edit": "Editar camada personalizada",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS ou JSON estilo Mapbox",
+            "max_zoom": "Zoom máximo",
+            "layer_type": "Tipo de camada",
+            "basemap": "Mapa-base",
+            "overlay": "Cobertura",
+            "create": "Criar camada",
+            "update": "Atualizar camada"
+        },
+        "opacity": "Opacidade de sobreposição",
+        "label": {
+            "basemaps": "Mapa base",
+            "overlays": "Sobreposições",
+            "custom": "Personalizado",
+            "world": "Mundo",
+            "countries": "Países",
+            "belgium": "Bélgica",
+            "bulgaria": "Bulgária",
+            "finland": "Finlândia",
+            "france": "França",
+            "new_zealand": "Nova Zelândia",
+            "norway": "Noruega",
+            "spain": "Espanha",
+            "sweden": "Suécia",
+            "switzerland": "Suíça",
+            "united_kingdom": "Reino Unido",
+            "united_states": "Estados Unidos",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Satélite do Mapbox",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "Satélite IGN",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Satélite Lantmäteriet",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "Inclinação IGN",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Trilhas demarcadas",
+            "waymarkedTrailsHiking": "Caminhada",
+            "waymarkedTrailsCycling": "Ciclismo",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Patinação",
+            "waymarkedTrailsHorseRiding": "Hipismo",
+            "waymarkedTrailsWinter": "Inverno",
+            "points_of_interest": "Pontos de interesse",
+            "food": "Comida",
+            "bakery": "Padoca",
+            "food-store": "Loja de alimentos",
+            "eat-and-drink": "Comes e bebes",
+            "amenities": "Comodidades",
+            "toilets": "Banheiros",
+            "water": "Água",
+            "shower": "Chuveiro",
+            "shelter": "Abrigo",
+            "motorized": "Carros e Motocicletas",
+            "fuel-station": "Postos de combustível",
+            "parking": "Estacionamento",
+            "garage": "Garagem",
+            "barrier": "Barreira",
+            "tourism": "Turismo",
+            "attraction": "Atração",
+            "viewpoint": "Mirante",
+            "hotel": "Hotel",
+            "campsite": "Acampamento",
+            "hut": "Cabana",
+            "picnic": "Área de piquenique",
+            "summit": "Pico",
+            "pass": "Passagem",
+            "climbing": "Escalada",
+            "bicycle": "Bicicleta",
+            "bicycle-parking": "Estacionamento de bicicleta",
+            "bicycle-rental": "Aluguel de bicicleta",
+            "bicycle-shop": "Loja de bicicletas",
+            "public-transport": "Transporte Público",
+            "railway-station": "Estações ferroviárias",
+            "tram-stop": "Parada de bonde",
+            "bus-stop": "Parada de Ônibus",
+            "ferry": "Balsa"
+        },
+        "color": {
+            "blue": "Azul",
+            "bluered": "Azul Vermelho",
+            "gray": "Cinzento",
+            "hot": "Popular",
+            "purple": "Roxo",
+            "orange": "Laranja"
+        }
+    },
+    "chart": {
+        "show_slope": "Mostrar dados de inclinação",
+        "show_surface": "Mostrar dados do terreno",
+        "show_speed": "Mostrar dados de velocidade",
+        "show_pace": "Mostrar dados de ritmo",
+        "show_heartrate": "Mostrar dados de frequência cardíaca",
+        "show_cadence": "Mostrar dados de cadência",
+        "show_temperature": "Mostrar dados de temperatura",
+        "show_power": "Mostrar dados de potência"
+    },
+    "quantities": {
+        "distance": "Distância",
+        "elevation": "Elevação",
+        "elevation_gain_loss": "Ganho e perda de elevação",
+        "temperature": "Temperatura",
+        "speed": "Velocidade",
+        "pace": "Ritmo",
+        "heartrate": "Frequência cardíaca",
+        "cadence": "Cadência",
+        "power": "Potência",
+        "slope": "Inclinação",
+        "surface": "Superfície",
+        "time": "Tempo",
+        "moving": "Movimento",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "pés",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "Arquivo",
+        "files": "Arquivos",
+        "track": "Percurso",
+        "tracks": "Percursos",
+        "segment": "Segmento",
+        "segments": "Segmentos",
+        "waypoint": "Ponto de interesse",
+        "waypoints": "Pontos de interesse",
+        "symbol": {
+            "alert": "Alerta",
+            "anchor": "Âncora",
+            "bank": "Banco",
+            "beach": "Praia",
+            "bike_trail": "Trilha de Bicicleta",
+            "binoculars": "Binóculos",
+            "bridge": "Ponte",
+            "building": "Prédio",
+            "campground": "Acampamento",
+            "car": "Carro",
+            "car_repair": "Garagem",
+            "convenience_store": "Loja De Conveniência",
+            "crossing": "Cruzamento",
+            "department_store": "Lojas de Departamento",
+            "drinking_water": "Água",
+            "exit": "Sair",
+            "lodge": "Cabana",
+            "lodging": "Acomodação",
+            "forest": "Floresta",
+            "gas_station": "Postos de combustível",
+            "ground_transportation": "Transporte em solo",
+            "hotel": "Hotel",
+            "house": "Casa",
+            "information": "Informação",
+            "park": "Parque",
+            "parking_area": "Estacionamento",
+            "pharmacy": "Farmácia",
+            "picnic_area": "Área de piquenique",
+            "restaurant": "Restaurante",
+            "restricted_area": "Área Restrita",
+            "restroom": "Banheiros",
+            "road": "Estrada",
+            "scenic_area": "Área Cênica",
+            "shelter": "Abrigo",
+            "shopping_center": "Shopping Center",
+            "shower": "Chuveiro",
+            "summit": "Pico",
+            "telephone": "Telefone",
+            "tunnel": "Túnel",
+            "water_source": "Fonte de água"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Início",
+        "app": "Aplicativo",
+        "contact": "Contato",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribuir",
+        "supported_by": "apoiado por",
+        "support_button": "Apoie o gpx.rnmkcy.eu no Ko-fi",
+        "route_planning": "Planejamento de rota",
+        "route_planning_description": "Uma interface intuitiva para criar itinerários adaptados a cada esporte, com base em dados do OpenStreetMap.",
+        "file_processing": "Processamento avançado de arquivo",
+        "file_processing_description": "Um conjunto de ferramentas para executar todas as tarefas comuns de processamento de arquivos, e que podem ser aplicadas a vários arquivos de uma só vez.",
+        "maps": "Mapas globais e locais",
+        "maps_description": "Uma grande coleção de mapas base, sobreposições e pontos de interesse para ajudá-lo a criar sua aventura ao ar livre, ou visualizar sua última conquista.",
+        "data_visualization": "Visualização de dados",
+        "data_visualization_description": "Um perfil de elevação interativo, com estatísticas detalhadas para analisar atividades gravadas e objetivos futuros.",
+        "identity": "Grátis, sem anúncios e de código aberto",
+        "identity_description": "O site é gratuito de usar, sem anúncios, e o código-fonte está disponível publicamente no GitHub. Isso só é possível graças ao apoio incrível da comunidade."
+    },
+    "docs": {
+        "translate": "Melhore a tradução no Crowdin",
+        "answer_not_found": "Não encontrou o que estava procurando?",
+        "ask_on_reddit": "Pergunte à comunidade no Reddit",
+        "search": {
+            "search": "Pesquisar",
+            "clear": "Limpar",
+            "cancel": "Cancelar",
+            "recent": "Pesquisas recentes",
+            "no_recent": "Nenhuma busca recente",
+            "save": "Salvar esta busca",
+            "remove": "Remover busca do histórico de pesquisa",
+            "favorites": "Favoritos",
+            "remove_favorite": "Remover esta busca dos favoritos",
+            "to_select": "para selecionar",
+            "to_navigate": "para navegar",
+            "to_close": "para fechar",
+            "no_results": "Nenhum resultado para",
+            "no_results_suggestion": "Tente pesquisar por"
+        }
+    },
+    "embedding": {
+        "title": "Crie seu próprio mapa",
+        "mapbox_token": "Token de acesso do Mapbox",
+        "file_urls": "URLs de arquivos (separados por vírgula)",
+        "drive_ids": "IDs de arquivos do Google Drive (separados por vírgulas)",
+        "basemap": "Mapa-base",
+        "height": "Altura",
+        "fill_by": "Preencher por",
+        "none": "Nenhum",
+        "show_controls": "Mostrar controles",
+        "manual_camera": "Câmera manual",
+        "manual_camera_description": "Você pode mover o mapa abaixo para ajustar a posição da câmera.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Inclinação",
+        "bearing": "Orientação",
+        "preview": "Prévia",
+        "code": "Código de integração"
+    },
+    "webgl2_required": "WebGL 2 é necessário para exibir o mapa.",
+    "enable_webgl2": "Saiba como ativar WebGL 2 em seu navegador",
+    "page_not_found": "página não encontrada"
+}
\ No newline at end of file
diff --git a/website/src/locales/pt.json b/website/src/locales/pt.json
new file mode 100755
index 0000000..befe2c7
--- /dev/null
+++ b/website/src/locales/pt.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "o editor online de arquivos GPX",
+        "app_title": "app",
+        "embed_title": "o editor online de arquivos GPX",
+        "help_title": "ajuda",
+        "404_title": "page not found",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "Novo",
+        "new_file": "Novo arquivo",
+        "new_track": "Novo percurso",
+        "new_segment": "Novo segmento",
+        "open": "Abrir...",
+        "duplicate": "Duplicar",
+        "close": "Fechar",
+        "close_all": "Fechar todos",
+        "copy": "Copiar",
+        "paste": "Colar",
+        "cut": "Cortar",
+        "export": "Exportar...",
+        "export_all": "Exportar todos...",
+        "export_options": "Opções de exportação",
+        "support_message": "Essa ferramenta é gratuita para você, mas não para nós. Por favor, considere suportar financeiramente o site se você o utiliza frequentemente. Obrigado!",
+        "support_button": "Ajude a manter o site gratuito",
+        "download_file": "Baixar arquivo",
+        "download_files": "Baixar arquivos",
+        "edit": "Editar",
+        "undo": "Desfazer",
+        "redo": "Refazer",
+        "delete": "Apagar",
+        "select_all": "Selecionar todos",
+        "view": "Visualizar",
+        "elevation_profile": "Perfil de elevação",
+        "vertical_file_view": "Lista vertical de arquivos",
+        "switch_basemap": "Trocar para mapa base anterior",
+        "toggle_overlays": "Alternar sobreposições",
+        "toggle_3d": "Alternar 3D",
+        "settings": "Configurações",
+        "distance_units": "Unidades de distância",
+        "metric": "Métrico",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Unidades de velocidade",
+        "temperature_units": "Unidade de temperatura",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Idioma",
+        "mode": "Tema",
+        "system": "System",
+        "light": "Claro",
+        "dark": "Escuro",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Camadas do mapa...",
+        "distance_markers": "Marcadores de distância",
+        "direction_markers": "Direction arrows",
+        "help": "Ajuda",
+        "more": "More...",
+        "donate": "Doar",
+        "ctrl": "Ctrl",
+        "click": "Clique",
+        "drag": "Arrastar",
+        "metadata": {
+            "button": "Informações...",
+            "name": "Nome",
+            "description": "Descrição",
+            "save": "Salvar"
+        },
+        "style": {
+            "button": "Aparência...",
+            "color": "Cor",
+            "opacity": "Opacidade",
+            "width": "Largura"
+        },
+        "hide": "Ocultar",
+        "unhide": "Mostrar",
+        "center": "Center",
+        "open_in": "Abrir em"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planejar ou editar uma rota",
+            "activity": "Atividade",
+            "use_routing": "Rota",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Permitir estradas privadas",
+            "reverse": {
+                "button": "Inverter",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Voltar para o início",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Ida e volta",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Iniciar o loop aqui",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bicicleta",
+                "racing_bike": "Bicicleta de estrada",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Bicicleta de montanha",
+                "foot": "Corrida/caminhada",
+                "motorcycle": "Moto",
+                "water": "Água",
+                "railway": "Ferrovia"
+            },
+            "surface": {
+                "unknown": "Desconhecido",
+                "paved": "Pavimentado",
+                "unpaved": "Não pavimentado",
+                "asphalt": "Asfalto",
+                "concrete": "Cimento",
+                "chipseal": "Chipseal",
+                "cobblestone": "Empedrado",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Madeira",
+                "compacted": "Cascalho compactado",
+                "fine_gravel": "Cascalho fino",
+                "gravel": "Gravilha",
+                "pebblestone": "Pebblestone",
+                "rock": "Pedra",
+                "dirt": "Terra",
+                "ground": "Chão",
+                "earth": "Terra",
+                "snow": "Neve",
+                "ice": "Gelo",
+                "salt": "Sal",
+                "mud": "Lama",
+                "sand": "Areia",
+                "woodchips": "Woodchips",
+                "grass": "Grama",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Cortar ou dividir",
+            "crop": "Cortar",
+            "split_as": "Dividir a trilha em",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Iniciar",
+            "end": "End",
+            "total_time": "Tempo em Movimento",
+            "pick_date": "Escolha uma data",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerância",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Apagar",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Mapa-base",
+            "overlay": "Cobertura",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Sobreposições",
+            "custom": "Personalizado",
+            "world": "Mundo",
+            "countries": "Países",
+            "belgium": "Bélgica",
+            "bulgaria": "Bulgária",
+            "finland": "Finlândia",
+            "france": "França",
+            "new_zealand": "Nova Zelândia",
+            "norway": "Noruega",
+            "spain": "Espanha",
+            "sweden": "Suécia",
+            "switzerland": "Suíça",
+            "united_kingdom": "Reino Unido",
+            "united_states": "Estados Unidos",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Satélite do Mapbox",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Trilhas demarcadas",
+            "waymarkedTrailsHiking": "Caminhada",
+            "waymarkedTrailsCycling": "Ciclismo",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Patinação",
+            "waymarkedTrailsHorseRiding": "Hipismo",
+            "waymarkedTrailsWinter": "Inverno",
+            "points_of_interest": "Pontos de interesse",
+            "food": "Comida",
+            "bakery": "Padoca",
+            "food-store": "Loja de alimentos",
+            "eat-and-drink": "Comes e bebes",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Água",
+            "shower": "Chuveiro",
+            "shelter": "Shelter",
+            "motorized": "Carros e Motocicletas",
+            "fuel-station": "Postos de combustível",
+            "parking": "Estacionamento",
+            "garage": "Garagem",
+            "barrier": "Barrier",
+            "tourism": "Turismo",
+            "attraction": "Atração",
+            "viewpoint": "Mirante",
+            "hotel": "Hotel",
+            "campsite": "Acampamento",
+            "hut": "Cabana",
+            "picnic": "Picnic Area",
+            "summit": "Pico",
+            "pass": "Passagem",
+            "climbing": "Escalada",
+            "bicycle": "Bicicleta",
+            "bicycle-parking": "Estacionamento de bicicleta",
+            "bicycle-rental": "Aluguel de bicicleta",
+            "bicycle-shop": "Loja de bicicletas",
+            "public-transport": "Transporte Público",
+            "railway-station": "Estações ferroviárias",
+            "tram-stop": "Parada de bonde",
+            "bus-stop": "Parada de Ônibus",
+            "ferry": "Balsa"
+        },
+        "color": {
+            "blue": "Azul",
+            "bluered": "Blue Red",
+            "gray": "Cinzento",
+            "hot": "Popular",
+            "purple": "Roxo",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distância",
+        "elevation": "Elevação",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperatura",
+        "speed": "Velocidade",
+        "pace": "Ritmo",
+        "heartrate": "Heart rate",
+        "cadence": "Cadência",
+        "power": "Potência",
+        "slope": "Slope",
+        "surface": "Superfície",
+        "time": "Tempo",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "pés",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Percursos",
+        "segment": "Segment",
+        "segments": "Segmentos",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Acampamento",
+            "car": "Car",
+            "car_repair": "Garagem",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Água",
+            "exit": "Exit",
+            "lodge": "Cabana",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Postos de combustível",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Estacionamento",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Chuveiro",
+            "summit": "Pico",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Grátis, sem anúncios e de código aberto",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancelar",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Mapa-base",
+        "height": "Altura",
+        "fill_by": "Fill by",
+        "none": "Nenhum",
+        "show_controls": "Mostrar controles",
+        "manual_camera": "Câmera manual",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Prévia",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/ro.json b/website/src/locales/ro.json
new file mode 100755
index 0000000..8521bc6
--- /dev/null
+++ b/website/src/locales/ro.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "editorul online de fişiere GPX",
+        "app_title": "app",
+        "embed_title": "editorul online de fişiere GPX",
+        "help_title": "ajutor",
+        "404_title": "pagina nu a fost găsită",
+        "description": "Vizualizați, editați și creați fișiere GPX online cu capacități avansate de planificare a rutelor și instrumente de procesare a fișierelor, hărți frumoase și vizualizări de date detaliate."
+    },
+    "menu": {
+        "new": "Nou",
+        "new_file": "Fișier nou",
+        "new_track": "Traseu nou",
+        "new_segment": "Segment nou",
+        "open": "Deschide...",
+        "duplicate": "Duplicare",
+        "close": "Închide",
+        "close_all": "Închide tot",
+        "copy": "Copiază",
+        "paste": "Lipire",
+        "cut": "Taie",
+        "export": "Exportă...",
+        "export_all": "Exportă tot...",
+        "export_options": "Opțiuni de export",
+        "support_message": "Aplicația este gratuită pentru utilizare, dar nu este gratuită întreținerea. Te rugăm să iei în considerare sprijinirea site-ului dacă îl folosești frecvent. Mulțumim!",
+        "support_button": "Ajută pentru a păstra website-ul gratuit",
+        "download_file": "Descarcă fișier",
+        "download_files": "Descarca fisierele",
+        "edit": "Editează",
+        "undo": "Anulează",
+        "redo": "Refă",
+        "delete": "Șterge",
+        "select_all": "Selectează tot",
+        "view": "Vizualizare",
+        "elevation_profile": "Profil de altitudine",
+        "vertical_file_view": "Listă de fișiere verticale",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Comută suprapunerile",
+        "toggle_3d": "Comută 3D",
+        "settings": "Setări",
+        "distance_units": "Unități de distanță",
+        "metric": "Metric",
+        "imperial": "Imperial",
+        "nautical": "Nautic",
+        "velocity_units": "Unități de viteză",
+        "temperature_units": "Unități de temperatură",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Limbă",
+        "mode": "Temă",
+        "system": "Sistem",
+        "light": "Luminos",
+        "dark": "Întunecat",
+        "street_view_source": "Sursa vizualizării străzii",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Reverse",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Bike",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountain bike",
+                "foot": "Run/hike",
+                "motorcycle": "Motorcycle",
+                "water": "Water",
+                "railway": "Railway"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Pavaj",
+                "unhewn_cobblestone": "Pavaj neșlefuit",
+                "paving_stones": "Pavaj din pietre",
+                "stepping_stones": "Pietre de pașit",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Lemn",
+                "compacted": "Pietriș compactat",
+                "fine_gravel": "Pietriș fin",
+                "gravel": "Pietriș",
+                "pebblestone": "Pavaj",
+                "rock": "Piatră",
+                "dirt": "Noroi",
+                "ground": "Sol",
+                "earth": "Pământ",
+                "snow": "Zăpadă",
+                "ice": "Gheață",
+                "salt": "Sare",
+                "mud": "Noroi",
+                "sand": "Nisip",
+                "woodchips": "Woodchips",
+                "grass": "Iarbă",
+                "grass_paver": "Pavaj cu iarbă"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Decupare",
+            "split_as": "Împărțiți traseul în",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "Sfârșit",
+            "total_time": "Durata deplasării",
+            "pick_date": "Alege o dată",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Delete",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Basemap",
+            "overlay": "Overlay",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/ru.json b/website/src/locales/ru.json
new file mode 100755
index 0000000..e2e50b9
--- /dev/null
+++ b/website/src/locales/ru.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "онлайн редактор GPX файлов",
+        "app_title": "приложение",
+        "embed_title": "онлайн редактор GPX файлов",
+        "help_title": "помощь",
+        "404_title": "страница не найдена",
+        "description": "Просматривайте, редактируйте, создавайте GPX файлы онлайн с расширенными возможностями планирования маршрутов и инструментами обработки файлов, красивыми картами и детальной визуализацией данных."
+    },
+    "menu": {
+        "new": "Новый",
+        "new_file": "Новый файл",
+        "new_track": "Новый трек",
+        "new_segment": "Новый сегмент",
+        "open": "Открыть...",
+        "duplicate": "Дубликат",
+        "close": "Закрыть",
+        "close_all": "Закрыть все",
+        "copy": "Копировать",
+        "paste": "Вставить",
+        "cut": "Вырезать",
+        "export": "Экспортировать...",
+        "export_all": "Экспортировать все...",
+        "export_options": "Параметры экспорта",
+        "support_message": "Инструмент бесплатен для использования, но его поддержка требует затрат. Пожалуйста, подумайте о том, чтобы поддержать сайт, если вы пользуетесь им регулярно. Спасибо!",
+        "support_button": "Помогите сохранить сайт бесплатным",
+        "download_file": "Скачать файл",
+        "download_files": "Скачать файлы",
+        "edit": "Редактировать",
+        "undo": "Отменить",
+        "redo": "Повторить",
+        "delete": "Удалить",
+        "select_all": "Выбрать все",
+        "view": "Вид",
+        "elevation_profile": "Профиль рельефа",
+        "vertical_file_view": "Вертикальный список файлов",
+        "switch_basemap": "Переключиться на предыдущую базовую карту",
+        "toggle_overlays": "Переключить слои",
+        "toggle_3d": "Включить 3D",
+        "settings": "Настройки",
+        "distance_units": "Единицы измерения расстояния",
+        "metric": "Метрические",
+        "imperial": "Имперские",
+        "nautical": "Морская",
+        "velocity_units": "Единицы измерения скорости",
+        "temperature_units": "Единицы температуры",
+        "celsius": "По Цельсию",
+        "fahrenheit": "По Фаренгейту",
+        "language": "Язык",
+        "mode": "Тема",
+        "system": "Система",
+        "light": "Светлая",
+        "dark": "Темная",
+        "street_view_source": "Источник просмотра улиц",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Слои карты...",
+        "distance_markers": "Метки расстояния",
+        "direction_markers": "Стрелки направления",
+        "help": "Помощь",
+        "more": "Ещё...",
+        "donate": "Пожертвовать",
+        "ctrl": "Ctrl",
+        "click": "Клик",
+        "drag": "Перетащить",
+        "metadata": {
+            "button": "Информация...",
+            "name": "Название",
+            "description": "Описание",
+            "save": "Сохранить"
+        },
+        "style": {
+            "button": "Внешний вид...",
+            "color": "Цвет",
+            "opacity": "Прозрачность",
+            "width": "Ширина"
+        },
+        "hide": "Скрыть",
+        "unhide": "Отобразить",
+        "center": "По центру",
+        "open_in": "Открыть в"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Планировать или редактировать маршрут",
+            "activity": "Активность",
+            "use_routing": "Маршрутизация",
+            "use_routing_tooltip": "Соедините опорные точки через дорожную сеть или по прямой линии, если отключено",
+            "allow_private": "Разрешить частные дороги",
+            "reverse": {
+                "button": "Изменить направление",
+                "tooltip": "Изменить направление маршрута на противоположное"
+            },
+            "route_back_to_start": {
+                "button": "Вернуться к началу",
+                "tooltip": "Соединить последнюю точку маршрута с начальной точкой"
+            },
+            "round_trip": {
+                "button": "Круговой маршрут",
+                "tooltip": "Вернуться к начальной точке тем же маршрутом"
+            },
+            "start_loop_here": "Начать цикл здесь",
+            "help_no_file": "Выберите трек, чтобы использовать инструмент маршрутизации, или щелкните на карте, чтобы начать создание нового маршрута.",
+            "help": "Щелкните на карте, чтобы добавить новую опорную точку, или перетащите существующие, чтобы изменить маршрут.",
+            "activities": {
+                "bike": "Велосипед",
+                "racing_bike": "Дорожный велосипед",
+                "gravel_bike": "Гравийный велосипед",
+                "mountain_bike": "Горный велосипед",
+                "foot": "Бег/Хайкинг",
+                "motorcycle": "Мотоцикл",
+                "water": "Вода",
+                "railway": "Железная дорога"
+            },
+            "surface": {
+                "unknown": "Неизвестно",
+                "paved": "Асфальтированное",
+                "unpaved": "Гравийное",
+                "asphalt": "Асфальт",
+                "concrete": "Бетон",
+                "chipseal": "Щебёночное покрытие",
+                "cobblestone": "Брусчатка",
+                "unhewn_cobblestone": "Необработанная брусчатка",
+                "paving_stones": "Тротуарная плитка",
+                "stepping_stones": "Каменная дорожка",
+                "sett": "Гравий",
+                "metal": "Металл",
+                "wood": "Дерево",
+                "compacted": "Уплотненный гравий",
+                "fine_gravel": "Мелкий гравий",
+                "gravel": "Гравий",
+                "pebblestone": "Галька",
+                "rock": "Камень",
+                "dirt": "Грунт",
+                "ground": "Почва",
+                "earth": "Земля",
+                "snow": "Снег",
+                "ice": "Лед",
+                "salt": "Соль",
+                "mud": "Грязь",
+                "sand": "Песок",
+                "woodchips": "Древесные щепки",
+                "grass": "Трава",
+                "grass_paver": "Утрамбованная трава"
+            },
+            "error": {
+                "from": "Начальная точка слишком далеко от ближайшей дороги",
+                "via": "Точка маршрута слишком далеко от ближайшей дороги",
+                "to": "Конечная точка слишком далеко от ближайшей дороги",
+                "timeout": "Расчет маршрута занял слишком много времени, попробуйте добавить точки ближе"
+            }
+        },
+        "scissors": {
+            "tooltip": "Обрезать или разделить",
+            "crop": "Обрезать",
+            "split_as": "Разделить трек на",
+            "help_invalid_selection": "Выберите трек, чтобы обрезать или разделить.",
+            "help": "Используйте ползунок, чтобы обрезать трек, или разделите его, кликнув на один из маркеров разделения или на сам трек."
+        },
+        "time": {
+            "tooltip": "Управление данными времени",
+            "start": "Начало",
+            "end": "Конец",
+            "total_time": "Время в движении",
+            "pick_date": "Выберите дату",
+            "artificial": "Создать реалистичные данные времени",
+            "update": "Обновить данные времени",
+            "help": "Используйте форму для установки новых временных данных.",
+            "help_invalid_selection": "Выберите один трек для управления данными времени."
+        },
+        "merge": {
+            "merge_traces": "Соединить треки",
+            "merge_contents": "Объедините содержимое и оставьте треки несоединенными",
+            "merge_selection": "Объединить выбранное",
+            "tooltip": "Объединить элементы вместе",
+            "help_merge_traces": "Соединение выбранных треков создаст единый непрерывный трек.",
+            "help_cannot_merge_traces": "Ваша выборка должна содержать несколько треков для их подключения.",
+            "help_merge_contents": "Объединение содержимого выбранных элементов сгруппирует все внутри первого элемента.",
+            "help_cannot_merge_contents": "Ваш выбор должен содержать несколько элементов, чтобы объединить их содержимое.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Извлечь содержимое для разделения элементов",
+            "button": "Извлечь",
+            "help": "Извлечение содержимого выбранных элементов создаст отдельный элемент для каждого из них.",
+            "help_invalid_selection": "Ваша выборка должна содержать элементы с несколькими треками для их извлечения."
+        },
+        "elevation": {
+            "button": "Запросить данные о высоте",
+            "help": "При запросе данных о высоте будут удалены существующие данные о высотах, если таковые имеются, и заменены данными из Mapbox.",
+            "help_no_selection": "Выберите файл для запроса данных о высоте."
+        },
+        "waypoint": {
+            "tooltip": "Создание и редактирование точек интереса",
+            "icon": "Значок",
+            "link": "Связь",
+            "longitude": "Долгота",
+            "latitude": "Широта",
+            "create": "Создать точку интереса",
+            "add": "Добавить точку интереса в файл",
+            "help": "Заполните форму, чтобы создать новую точку интереса, или щелкните на существующую, чтобы отредактировать её. Нажмите на карту, чтобы заполнить координаты, или перетащите точки интереса, чтобы переместить их.",
+            "help_no_selection": "Выберите файл, чтобы создать или изменить точки интереса."
+        },
+        "reduce": {
+            "tooltip": "Уменьшить количество точек GPS",
+            "tolerance": "Допустимое отклонение",
+            "number_of_points": "Количество точек GPS",
+            "button": "Уменьшить",
+            "help": "Используйте ползунок, чтобы выбрать количество точек GPS для хранения.",
+            "help_no_selection": "Выберите трек, чтобы уменьшить количество точек GPS в нём."
+        },
+        "clean": {
+            "tooltip": "Очистить точки GPS и точки интереса с помощью выделения прямоугольником",
+            "delete_trackpoints": "Удалить точки GPS",
+            "delete_waypoints": "Удалить точки интереса",
+            "delete_inside": "Удалить внутри выделения",
+            "delete_outside": "Удалить снаружи выделения",
+            "button": "Удалить",
+            "help": "Выберите область прямоугольника на карте, чтобы удалить точки GPS и точки интереса.",
+            "help_no_selection": "Выберите трек, чтобы очистить точки GPS и точки интереса."
+        }
+    },
+    "layers": {
+        "settings": "Настройки слоя",
+        "settings_help": "Выберите слои карты, которые хотите отобразить в интерфейсе, добавьте пользовательские слои и настройте их параметры.",
+        "selection": "Выбор слоя",
+        "custom_layers": {
+            "title": "Пользовательские слои",
+            "new": "Новый пользовательский слой",
+            "edit": "Редактировать пользовательский слой",
+            "urls": "URL-адрес(а)",
+            "url_placeholder": "WMTS, WMS или стиль Mapbox JSON",
+            "max_zoom": "Максимальное приближение",
+            "layer_type": "Тип слоя",
+            "basemap": "Основная карта",
+            "overlay": "Наложение",
+            "create": "Создать слой",
+            "update": "Обновить слой"
+        },
+        "opacity": "Прозрачность наложения",
+        "label": {
+            "basemaps": "Основные карты",
+            "overlays": "Наложения",
+            "custom": "Пользовательский",
+            "world": "Мир",
+            "countries": "Страны",
+            "belgium": "Бельгия",
+            "bulgaria": "Болгария",
+            "finland": "Финляндия",
+            "france": "Франция",
+            "new_zealand": "Новая Зеландия",
+            "norway": "Норвегия",
+            "spain": "Испания",
+            "sweden": "Швеция",
+            "switzerland": "Швейцария",
+            "united_kingdom": "Великобритания",
+            "united_states": "Соединенные Штаты Америки",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "ЛИНЦ Топографическая карта",
+            "linzTopo": "ЛИНЦ Топографическая карта 50",
+            "swisstopoRaster": "swisstopo Растр",
+            "swisstopoVector": "swisstopo Вектор",
+            "swisstopoSatellite": "swisstopo Спутник",
+            "ignBe": "IGN Топографическая карта",
+            "ignFrPlan": "IGN План",
+            "ignFrTopo": "IGN Топографическая карта",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Спутник",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Тропа с метками",
+            "waymarkedTrailsHiking": "Пешие прогулки",
+            "waymarkedTrailsCycling": "Велосипед",
+            "waymarkedTrailsMTB": "Горный велосипед",
+            "waymarkedTrailsSkating": "Ролики",
+            "waymarkedTrailsHorseRiding": "Верховая езда",
+            "waymarkedTrailsWinter": "Зима",
+            "points_of_interest": "Точки интереса",
+            "food": "Еда",
+            "bakery": "Пекарня",
+            "food-store": "Магазин продуктов",
+            "eat-and-drink": "Еда и напитки",
+            "amenities": "Удобства",
+            "toilets": "Туалеты",
+            "water": "Вода",
+            "shower": "Душ",
+            "shelter": "Укрытие",
+            "motorized": "Автомобили и мотоциклы",
+            "fuel-station": "Заправочная станция",
+            "parking": "Парковка",
+            "garage": "Гараж",
+            "barrier": "Преграда",
+            "tourism": "Туризм",
+            "attraction": "Достопримечательность",
+            "viewpoint": "Обзорная площадка",
+            "hotel": "Отель",
+            "campsite": "Кемпинг",
+            "hut": "Хижина",
+            "picnic": "Зона для пикников",
+            "summit": "Вершина",
+            "pass": "Проход",
+            "climbing": "Лазание",
+            "bicycle": "Велосипед",
+            "bicycle-parking": "Велопарковка",
+            "bicycle-rental": "Велопрокат",
+            "bicycle-shop": "Веломагазин",
+            "public-transport": "Общественный транспорт",
+            "railway-station": "Железнодорожная станция",
+            "tram-stop": "Трамвайная остановка",
+            "bus-stop": "Автобусная остановка",
+            "ferry": "Паром"
+        },
+        "color": {
+            "blue": "Синий",
+            "bluered": "Синий красный",
+            "gray": "Серый",
+            "hot": "Горячий",
+            "purple": "Фиолетовый",
+            "orange": "Оранжевый"
+        }
+    },
+    "chart": {
+        "show_slope": "Показать данные о наклоне",
+        "show_surface": "Показать данные о поверхности",
+        "show_speed": "Показать данные о скорости",
+        "show_pace": "Показать данные о темпе",
+        "show_heartrate": "Показать данные сердечного ритма",
+        "show_cadence": "Показать данные о каденсе",
+        "show_temperature": "Показать данные о температуре",
+        "show_power": "Показать данные о мощности"
+    },
+    "quantities": {
+        "distance": "Расстояние",
+        "elevation": "Высота",
+        "elevation_gain_loss": "Набор и сброс высоты",
+        "temperature": "Температура",
+        "speed": "Скорость",
+        "pace": "Темп",
+        "heartrate": "Частота сердцебиения",
+        "cadence": "Каденс",
+        "power": "Мощность",
+        "slope": "Уклон",
+        "surface": "Поверхность",
+        "time": "Время",
+        "moving": "Движение",
+        "total": "Всего"
+    },
+    "units": {
+        "meters": "м",
+        "feet": "фт",
+        "kilometers": "км",
+        "miles": "ми",
+        "nautical_miles": "морская миля",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "км/ч",
+        "miles_per_hour": "миль/ч",
+        "minutes_per_kilometer": "мин/км",
+        "minutes_per_mile": "мин/миль",
+        "minutes_per_nautical_mile": "мин/м. м.",
+        "knots": "уз",
+        "heartrate": "уд/м",
+        "cadence": "об/мин",
+        "power": "Вт"
+    },
+    "gpx": {
+        "file": "Файл",
+        "files": "Файлы",
+        "track": "Трек",
+        "tracks": "Треки",
+        "segment": "Сегмент",
+        "segments": "Сегменты",
+        "waypoint": "Точка интереса",
+        "waypoints": "Точки интереса",
+        "symbol": {
+            "alert": "Сигнал",
+            "anchor": "Якорь",
+            "bank": "Банк",
+            "beach": "Пляж",
+            "bike_trail": "Велосипедная дорожка",
+            "binoculars": "Бинокль",
+            "bridge": "Мост",
+            "building": "Здание",
+            "campground": "Кемпинг",
+            "car": "Машина",
+            "car_repair": "Гараж",
+            "convenience_store": "Продуктовый магазин",
+            "crossing": "Перекрёсток",
+            "department_store": "Универсальный магазин",
+            "drinking_water": "Вода",
+            "exit": "Выход",
+            "lodge": "Хижина",
+            "lodging": "Жильё",
+            "forest": "Лес",
+            "gas_station": "Заправочная станция",
+            "ground_transportation": "Наземный транспорт",
+            "hotel": "Отель",
+            "house": "Дом",
+            "information": "Информация",
+            "park": "Парк",
+            "parking_area": "Парковка",
+            "pharmacy": "Аптека",
+            "picnic_area": "Зона для пикника",
+            "restaurant": "Ресторан",
+            "restricted_area": "Запретная зона",
+            "restroom": "Туалеты",
+            "road": "Дорога",
+            "scenic_area": "Сцена",
+            "shelter": "Убежище",
+            "shopping_center": "Торговый центр",
+            "shower": "Душ",
+            "summit": "Вершина",
+            "telephone": "Телефон",
+            "tunnel": "Туннель",
+            "water_source": "Источник воды"
+        }
+    },
+    "homepage": {
+        "website": "Вебсайт",
+        "home": "Домашняя страница",
+        "app": "Приложение",
+        "contact": "Контакт",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Электронная почта",
+        "contribute": "Внести вклад",
+        "supported_by": "при поддержке",
+        "support_button": "Поддержите gpx.rnmkcy.eu на Ko-fi",
+        "route_planning": "Планирование маршрута",
+        "route_planning_description": "Интуитивно понятный интерфейс для создания маршрутов, адаптированных к каждому виду спорта, на основе данных OpenStreetMap.",
+        "file_processing": "Расширенная обработка файла",
+        "file_processing_description": "Набор инструментов для выполнения всех обычных задач обработки файлов, который можно применить к нескольким файлам одновременно.",
+        "maps": "Глобальные и локальные карты",
+        "maps_description": "Большая коллекция базовых карт, наложений и точек интереса, чтобы помочь вам спланировать ваше следующее приключение на свежем воздухе или визуализировать ваше последнее достижение.",
+        "data_visualization": "Визуализация данных",
+        "data_visualization_description": "Интерактивный профиль высоты с подробной статистикой для анализа записанных активностей и будущих целей.",
+        "identity": "Бесплатно, без рекламы и с открытым исходным кодом",
+        "identity_description": "Сайт бесплатен для использования, без рекламы, а исходный код доступен публично на GitHub. Это стало возможным только благодаря невероятной поддержке сообщества."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Отмена",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Создайте свою собственную карту",
+        "mapbox_token": "Токен доступа Mapbox",
+        "file_urls": "URL-адреса файлов (разделенные запятыми)",
+        "drive_ids": "Идентификаторы файлов Google Диска (разделенные запятыми)",
+        "basemap": "Основная карта",
+        "height": "Высота",
+        "fill_by": "Заполнить",
+        "none": "Ничего",
+        "show_controls": "Показать элементы управления",
+        "manual_camera": "Ручная камера",
+        "manual_camera_description": "Вы можете переместить карту ниже, чтобы отрегулировать положение камеры.",
+        "latitude": "Широта",
+        "longitude": "Долгота",
+        "zoom": "Масштаб",
+        "pitch": "Наклон",
+        "bearing": "Азимут",
+        "preview": "Предварительный просмотр",
+        "code": "Код интеграции"
+    },
+    "webgl2_required": "Для отображения карты необходим WebGL 2.",
+    "enable_webgl2": "Узнайте, как включить WebGL 2 в вашем браузере",
+    "page_not_found": "страница не найдена"
+}
\ No newline at end of file
diff --git a/website/src/locales/sr.json b/website/src/locales/sr.json
new file mode 100755
index 0000000..901f17d
--- /dev/null
+++ b/website/src/locales/sr.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "onlajn uređivač GPX datoteka",
+        "app_title": "app",
+        "embed_title": "onlajn uređivač GPX datoteka",
+        "help_title": "pomoć",
+        "404_title": "stranica nije pronađena",
+        "description": "Pregledajte, uređujte i kreirajte GPX datoteke uz napredne mogućnosti planiranja ruta i alatima za obradu datoteka, prelepim mapama i detaljnim vizualizacijama podataka."
+    },
+    "menu": {
+        "new": "Novo",
+        "new_file": "Nova datoteka",
+        "new_track": "Nova ruta",
+        "new_segment": "Novi segment",
+        "open": "Otvori...",
+        "duplicate": "Napravi kopiju",
+        "close": "Zatvori",
+        "close_all": "Zatvori svе",
+        "copy": "Kopiraj",
+        "paste": "Nalepi",
+        "cut": "Iseci",
+        "export": "Izvezi...",
+        "export_all": "Izvezi sve...",
+        "export_options": "Opcije izvoza",
+        "support_message": "Ovaj alat je besplatan za korišćenje, ali njegovo održavanje nije besplatno. Molimo, razmislite o podršci veb sajta ako ga učestalo koristite. Hvala!",
+        "support_button": "Pomozite da veb sajt ostane besplatan",
+        "download_file": "Preuzmi datoteku",
+        "download_files": "Preuzmi datoteke",
+        "edit": "Uredi",
+        "undo": "Poništi",
+        "redo": "Vrati poništeno",
+        "delete": "Obriši",
+        "select_all": "Izaberi sve",
+        "view": "Pogledaj",
+        "elevation_profile": "Visinski profil",
+        "vertical_file_view": "Vertikalna lista datoteka",
+        "switch_basemap": "Vrati prethodnu osnovnu mapu",
+        "toggle_overlays": "Sakrij/Prikaži preklapanja",
+        "toggle_3d": "Sakrij/Prikaži 3D",
+        "settings": "Podešavanja",
+        "distance_units": "Jedinica razdaljine",
+        "metric": "Metričke",
+        "imperial": "Imperijalne",
+        "nautical": "Nautičke",
+        "velocity_units": "Jedinice brzine",
+        "temperature_units": "Jedinice temperature",
+        "celsius": "Celzijus",
+        "fahrenheit": "Farenhajt",
+        "language": "Jezik",
+        "mode": "Tema",
+        "system": "Sistem",
+        "light": "Svetla",
+        "dark": "Tamna",
+        "street_view_source": "Izvor uličnog prikaza",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Slojevi mape...",
+        "distance_markers": "Markeri udaljenosti",
+        "direction_markers": "Strelice pravca",
+        "help": "Pomoć",
+        "more": "Više...",
+        "donate": "Donirajte",
+        "ctrl": "Ctrl",
+        "click": "Klik",
+        "drag": "Prevucite",
+        "metadata": {
+            "button": "Informacije...",
+            "name": "Naziv",
+            "description": "Opis",
+            "save": "Sačuvaj"
+        },
+        "style": {
+            "button": "Izgled...",
+            "color": "Boja",
+            "opacity": "Prozirnost",
+            "width": "Širina"
+        },
+        "hide": "Sakrij",
+        "unhide": "Prikaži",
+        "center": "Centar",
+        "open_in": "Otvorite u"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planiraj ili izmeni rutu",
+            "activity": "Aktivnost",
+            "use_routing": "Određivanje puta",
+            "use_routing_tooltip": "Povežite tačke sidrenja preko putne mreže ili pravolinijski ako je onemogućeno",
+            "allow_private": "Dozvoli privatne puteve",
+            "reverse": {
+                "button": "Obrni",
+                "tooltip": "Obrni smer rute"
+            },
+            "route_back_to_start": {
+                "button": "Nazad na početak",
+                "tooltip": "Poveži poslednju tačku rute sa početnom tačkom"
+            },
+            "round_trip": {
+                "button": "Povratno putovanje",
+                "tooltip": "Povratak na početnu tačku istim putem"
+            },
+            "start_loop_here": "Započni petlju ovde",
+            "help_no_file": "Izaberite trek da biste koristili alatku za rutiranje ili kliknite na mapu da biste započeli kreiranje nove rute.",
+            "help": "Kliknite na mapu da biste dodali novu tačku sidrenja ili prevucite postojeće da biste promenili rutu.",
+            "activities": {
+                "bike": "Bicikl",
+                "racing_bike": "Drumski bicikl",
+                "gravel_bike": "Gravel bicikl",
+                "mountain_bike": "Planinski bicikl",
+                "foot": "Trčanje/šetnja",
+                "motorcycle": "Motocikl",
+                "water": "Voda",
+                "railway": "Pruga"
+            },
+            "surface": {
+                "unknown": "Nepoznato",
+                "paved": "Popločano",
+                "unpaved": "Nepopločano",
+                "asphalt": "Asfalt",
+                "concrete": "Beton",
+                "chipseal": "Bitumen",
+                "cobblestone": "Kaldrma",
+                "unhewn_cobblestone": "Netesana kaldrma",
+                "paving_stones": "Kamenje za popločavanje",
+                "stepping_stones": "Kamen",
+                "sett": "Set",
+                "metal": "Metal",
+                "wood": "Drvo",
+                "compacted": "Zbijeni šljunak",
+                "fine_gravel": "Fini šljunak",
+                "gravel": "Šljunak",
+                "pebblestone": "Oblutak",
+                "rock": "Stena",
+                "dirt": "Zemlja",
+                "ground": "Pod",
+                "earth": "Tlo",
+                "snow": "Sneg",
+                "ice": "Led",
+                "salt": "So",
+                "mud": "Blato",
+                "sand": "Pesak",
+                "woodchips": "Piljevina",
+                "grass": "Trava",
+                "grass_paver": "Ploče sa travom"
+            },
+            "error": {
+                "from": "Početna tačka je predaleko od najbližeg puta",
+                "via": "Putna tačka je predaleko od najbližeg puta",
+                "to": "Krajnja tačka je predaleko od najbližeg puta",
+                "timeout": "Računanje rute je trajalo predugo, pokušajte da dodate putne tačke bliže jednu drugoj"
+            }
+        },
+        "scissors": {
+            "tooltip": "Iseci ili razdvoj",
+            "crop": "Iseci",
+            "split_as": "Razdvoj trek na",
+            "help_invalid_selection": "Izaberi trek za isecanje ili razdvajanje",
+            "help": "Koristite klizač da isečete trek ili ga razdvojte klikom na jedan od markera za podele ili na sam trek."
+        },
+        "time": {
+            "tooltip": "Upravljaj vremenskim podacima",
+            "start": "Start",
+            "end": "Cilj",
+            "total_time": "Vreme kretanja",
+            "pick_date": "Izaberi datum",
+            "artificial": "Kreiraj realistične podatke o vremenu",
+            "update": "Ažuriraj podatke o vremenu",
+            "help": "Koristite obrazac za postavljanje novih podataka o vremenu.",
+            "help_invalid_selection": "Izaberite jedan trek da biste upravljali njegovim podacima o vremenu."
+        },
+        "merge": {
+            "merge_traces": "Poveži trekove",
+            "merge_contents": "Spojite sadržaj i držite trekove nepovezanim",
+            "merge_selection": "Spoji izbor",
+            "tooltip": "Spoji stavke",
+            "help_merge_traces": "Povezivanje izabranih trekova će stvoriti jedan kontinuirani trek.",
+            "help_cannot_merge_traces": "Vaš izbor mora da sadrži nekoliko trekova da biste ih povezali.",
+            "help_merge_contents": "Spajanje sadržaja izabranih stavki grupisaće sav sadržaj unutar prve stavke.",
+            "help_cannot_merge_contents": "Vaš izbor mora da sadrži nekoliko stavki da biste spojili njihov sadržaj.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Izdvojite sadržaj u odvojene stavke",
+            "button": "Izdvoj",
+            "help": "Izdvajanjem sadržaja izabranih stavki kreiraće se posebna stavka za svaki sadržaj",
+            "help_invalid_selection": "Vaš izbor mora da sadrži stavke sa više trekova da biste ih izdvojili."
+        },
+        "elevation": {
+            "button": "Zatražite podatke o nadmorskoj visini",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Kreirajte i uredite tačke od interesa",
+            "icon": "Ikonica",
+            "link": "Veza",
+            "longitude": "Geografska dužina",
+            "latitude": "Geografska širina",
+            "create": "Kreirajte tačku od interesa",
+            "add": "Dodajte tačku od interesa u datoteku",
+            "help": "Popunite formular da biste kreirali novu tačku od interesa ili kliknite na postojeću da biste je uredili. Kliknite na mapu da popunite koordinate ili prevucite tačke od interesa da biste ih pomerili.",
+            "help_no_selection": "Izaberite datoteku da biste kreirali ili izmenili tačaka od interesa."
+        },
+        "reduce": {
+            "tooltip": "Smanji broj GPS tačaka",
+            "tolerance": "Tolerancija",
+            "number_of_points": "Broj GPS tačaka",
+            "button": "Smanji",
+            "help": "Koristite klizač da izaberete broj GPS tačaka koje želite da zadržite",
+            "help_no_selection": "Izaberite trek da biste smanjili broj njegovih GPS tačaka."
+        },
+        "clean": {
+            "tooltip": "Izbrišite GPS tačke i tačke od interesa unutar pravougaonika",
+            "delete_trackpoints": "Izbrišite GPS tačke",
+            "delete_waypoints": "Izbrišite tačke od interesa",
+            "delete_inside": "Izbrišite unutar selekcije",
+            "delete_outside": "Izbrišite izvan selekcije",
+            "button": "Izbrišite",
+            "help": "Odaberite pravougaonu sekciju na mapi ged želite da izbrišete GPS tačke i tačke od interesa.",
+            "help_no_selection": "Odaberite trek da biste izbrisali GPS tačke i tačke od interesa."
+        }
+    },
+    "layers": {
+        "settings": "Podešavanja sloja",
+        "settings_help": "Izaberite slojeve karte koje želite da prikažete u interfejsu, dodajte prilagođene i prilagodite njihova podešavanja.",
+        "selection": "Izbor sloja",
+        "custom_layers": {
+            "title": "Prilagođeni slojevi",
+            "new": "Novi prilagođeni sloj",
+            "edit": "Uredite prilagođeni sloj",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS ili JSON stila Mapbox",
+            "max_zoom": "Maksimalno uvećanje",
+            "layer_type": "Tip sloja",
+            "basemap": "Osnovna mapa",
+            "overlay": "Preklapanje",
+            "create": "Napravite sloj",
+            "update": "Ažurirajte sloj"
+        },
+        "opacity": "Providnost preklapanja",
+        "label": {
+            "basemaps": "Osnovne mape",
+            "overlays": "Preklapanja",
+            "custom": "Prilagođeno",
+            "world": "Svet",
+            "countries": "Države",
+            "belgium": "Belgija",
+            "bulgaria": "Bugarska",
+            "finland": "Finska",
+            "france": "Francuska",
+            "new_zealand": "Novi Zeland",
+            "norway": "Norveška",
+            "spain": "Španija",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Water",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Pace",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Water",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/sv.json b/website/src/locales/sv.json
new file mode 100755
index 0000000..4163bc2
--- /dev/null
+++ b/website/src/locales/sv.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "online GPX-fileditor",
+        "app_title": "app",
+        "embed_title": "online GPX-fileditor",
+        "help_title": "hjälp",
+        "404_title": "page not found",
+        "description": "Visa, redigera och skapa GPX-filer online med avancerade ruttplaneringsfunktioner, verktyg för filhantering, tilltalande kartor och detaljerade datavisualiseringar."
+    },
+    "menu": {
+        "new": "Nytt",
+        "new_file": "Ny fil",
+        "new_track": "Nytt spår",
+        "new_segment": "Nytt segment",
+        "open": "Öppna...",
+        "duplicate": "Duplicera",
+        "close": "Stäng",
+        "close_all": "Stäng alla",
+        "copy": "Kopiera",
+        "paste": "Klistra in",
+        "cut": "Klipp ut",
+        "export": "Exportera...",
+        "export_all": "Exportera alla...",
+        "export_options": "Exportalternativ",
+        "support_message": "Verktyget är gratis att använda, men inte gratis att underhålla. Överväg att stödja webbplatsen om du använder den ofta. Tack!",
+        "support_button": "Hjälpa till att hålla webbplatsen gratis",
+        "download_file": "Ladda ner fil",
+        "download_files": "Ladda ner filer",
+        "edit": "Redigera",
+        "undo": "Ångra",
+        "redo": "Upprepa",
+        "delete": "Radera",
+        "select_all": "Markera allt",
+        "view": "Visa",
+        "elevation_profile": "Höjdprofil",
+        "vertical_file_view": "Vertikal fillista",
+        "switch_basemap": "Växla till föregående baskarta",
+        "toggle_overlays": "Växla överlagring",
+        "toggle_3d": "Växla 3D",
+        "settings": "Inställningar",
+        "distance_units": "Enhet för distans",
+        "metric": "Metrisk",
+        "imperial": "Imperiala",
+        "nautical": "Nautical",
+        "velocity_units": "Enhet för hastighet",
+        "temperature_units": "Temperaturenheter",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Språk",
+        "mode": "Tema",
+        "system": "System",
+        "light": "Ljust",
+        "dark": "Mörkt",
+        "street_view_source": "Gatuvykälla",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Kartlager...",
+        "distance_markers": "Distansmarkörer",
+        "direction_markers": "Riktningsmarkörer",
+        "help": "Hjälp",
+        "more": "More...",
+        "donate": "Donera",
+        "ctrl": "Ctrl",
+        "click": "Klicka",
+        "drag": "Dra",
+        "metadata": {
+            "button": "Info...",
+            "name": "Namn",
+            "description": "Beskrivning",
+            "save": "Spara"
+        },
+        "style": {
+            "button": "Utseende...",
+            "color": "Färg",
+            "opacity": "Genomskinlighet",
+            "width": "Bredd"
+        },
+        "hide": "Dölj",
+        "unhide": "Visa",
+        "center": "Center",
+        "open_in": "Öppna i"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Planera eller redigera en rutt",
+            "activity": "Aktivitet",
+            "use_routing": "Ruttplanering",
+            "use_routing_tooltip": "Koppla fästpunkter via vägnätet, eller om inaktiverad, i en rak linje",
+            "allow_private": "Tillåt privata vägar",
+            "reverse": {
+                "button": "Reversera",
+                "tooltip": "Vänd riktningen på rutten"
+            },
+            "route_back_to_start": {
+                "button": "Tillbaka till start",
+                "tooltip": "Koppla den sista punkten på rutten med startpunkten"
+            },
+            "round_trip": {
+                "button": "Tur och retur",
+                "tooltip": "Återvänd till startpunkten med samma rutt"
+            },
+            "start_loop_here": "Starta loopen här",
+            "help_no_file": "Välj ett spår för att använda ruttverktyget, eller klicka på kartan för att skapa en ny rutt.",
+            "help": "Klicka på kartan för att lägga till en ny fästpunkt eller dra befintliga för att ändra rutten.",
+            "activities": {
+                "bike": "Cykel",
+                "racing_bike": "Racingcykel",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Mountainbike",
+                "foot": "Löpa/vandra",
+                "motorcycle": "Motorcykel",
+                "water": "Vatten",
+                "railway": "Järnväg"
+            },
+            "surface": {
+                "unknown": "Okänt",
+                "paved": "Asfalterad",
+                "unpaved": "Oasfalterad",
+                "asphalt": "Asfalt",
+                "concrete": "Betong",
+                "chipseal": "Oljegrus",
+                "cobblestone": "Kullersten",
+                "unhewn_cobblestone": "Rå kullersten",
+                "paving_stones": "Gatstenar",
+                "stepping_stones": "Trampsten",
+                "sett": "Kullersten",
+                "metal": "Metall",
+                "wood": "Trä",
+                "compacted": "Packat grus",
+                "fine_gravel": "Fint grus",
+                "gravel": "Grus",
+                "pebblestone": "Småsten",
+                "rock": "Sten",
+                "dirt": "Jord",
+                "ground": "Mark",
+                "earth": "Jord",
+                "snow": "Snö",
+                "ice": "Is",
+                "salt": "Salt",
+                "mud": "Lera",
+                "sand": "Sand",
+                "woodchips": "Träflis",
+                "grass": "Gräs",
+                "grass_paver": "Gräsarmering"
+            },
+            "error": {
+                "from": "Startpunkten är för långt bort från närmaste väg",
+                "via": "Ruttpunkten är för långt bort från närmaste väg",
+                "to": "Slutpunkten är för långt bort från närmaste väg",
+                "timeout": "Ruttberäkningen tog för lång tid, försök att lägga punkterna närmare varandra"
+            }
+        },
+        "scissors": {
+            "tooltip": "Beskär eller dela upp",
+            "crop": "Beskär",
+            "split_as": "Dela upp spåret i",
+            "help_invalid_selection": "Välj ett spår att beskära eller dela upp.",
+            "help": "Använd reglaget för att beskära spåret, eller dela upp det genom att klicka på en av delningsmarkörerna eller direkt på spåret."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Tid i rörelse",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Sammanfoga markering",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Radera",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Lagertyp",
+            "basemap": "Baskarta",
+            "overlay": "Överlägg",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Baskartor",
+            "overlays": "Lager",
+            "custom": "Anpassat",
+            "world": "Världen",
+            "countries": "Länder",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgarien",
+            "finland": "Finland",
+            "france": "Frankrike",
+            "new_zealand": "Nya Zeeland",
+            "norway": "Norge",
+            "spain": "Spanien",
+            "sweden": "Sverige",
+            "switzerland": "Schweiz",
+            "united_kingdom": "Storbritannien",
+            "united_states": "USA",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bageri",
+            "food-store": "Food Store",
+            "eat-and-drink": "Mat och dryck",
+            "amenities": "Bekvämligheter",
+            "toilets": "Toaletter",
+            "water": "Water",
+            "shower": "Dusch",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Bensinstation",
+            "parking": "Parkering",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Kollektivtrafik",
+            "railway-station": "Järnvägsstation",
+            "tram-stop": "Spårvagnshållplats",
+            "bus-stop": "Busshållplats",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blå",
+            "bluered": "Blue Red",
+            "gray": "Grå",
+            "hot": "Hett",
+            "purple": "Lila",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distans",
+        "elevation": "Höjd",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Fart",
+        "pace": "Tempo",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Lutning",
+        "surface": "Yta",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "fot",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Spår",
+        "tracks": "Spår",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Närbutik",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Vatten",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Bensinstation",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parkering",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurang",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toaletter",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Dusch",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Avbryt",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "Fil-URL:er (separerade med kommatecken)",
+        "drive_ids": "Google Drive file IDs (separerade med kommatecken)",
+        "basemap": "Baskarta",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Förhandsvisning",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/vi.json b/website/src/locales/vi.json
new file mode 100755
index 0000000..b5a4a97
--- /dev/null
+++ b/website/src/locales/vi.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "the online GPX file editor",
+        "app_title": "app",
+        "embed_title": "the online GPX file editor",
+        "help_title": "help",
+        "404_title": "page not found",
+        "description": "View, edit, and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+    },
+    "menu": {
+        "new": "New",
+        "new_file": "New file",
+        "new_track": "New track",
+        "new_segment": "New segment",
+        "open": "Open...",
+        "duplicate": "Tạo bản sao",
+        "close": "Close",
+        "close_all": "Close all",
+        "copy": "Copy",
+        "paste": "Paste",
+        "cut": "Cut",
+        "export": "Export...",
+        "export_all": "Export all...",
+        "export_options": "Export options",
+        "support_message": "The tool is free to use, but not free to run. Please consider supporting the website if you use it frequently. Thank you!",
+        "support_button": "Help keep the website free",
+        "download_file": "Download file",
+        "download_files": "Download files",
+        "edit": "Edit",
+        "undo": "Undo",
+        "redo": "Redo",
+        "delete": "Xóa",
+        "select_all": "Select all",
+        "view": "View",
+        "elevation_profile": "Elevation profile",
+        "vertical_file_view": "Vertical file list",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
+        "settings": "Settings",
+        "distance_units": "Distance units",
+        "metric": "Hệ mét",
+        "imperial": "Imperial",
+        "nautical": "Nautical",
+        "velocity_units": "Velocity units",
+        "temperature_units": "Temperature units",
+        "celsius": "Celsius",
+        "fahrenheit": "Fahrenheit",
+        "language": "Language",
+        "mode": "Theme",
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark",
+        "street_view_source": "Street view source",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "Map layers...",
+        "distance_markers": "Distance markers",
+        "direction_markers": "Direction arrows",
+        "help": "Help",
+        "more": "More...",
+        "donate": "Donate",
+        "ctrl": "Ctrl",
+        "click": "Click",
+        "drag": "Drag",
+        "metadata": {
+            "button": "Info...",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
+        "style": {
+            "button": "Appearance...",
+            "color": "Color",
+            "opacity": "Opacity",
+            "width": "Width"
+        },
+        "hide": "Hide",
+        "unhide": "Unhide",
+        "center": "Center",
+        "open_in": "Open in"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "Plan or edit a route",
+            "activity": "Activity",
+            "use_routing": "Routing",
+            "use_routing_tooltip": "Connect anchor points via road network, or in a straight line if disabled",
+            "allow_private": "Allow private roads",
+            "reverse": {
+                "button": "Đảo ngược",
+                "tooltip": "Reverse the direction of the route"
+            },
+            "route_back_to_start": {
+                "button": "Back to start",
+                "tooltip": "Connect the last point of the route with the starting point"
+            },
+            "round_trip": {
+                "button": "Round trip",
+                "tooltip": "Return to the starting point by the same route"
+            },
+            "start_loop_here": "Start loop here",
+            "help_no_file": "Select a trace to use the routing tool, or click on the map to start creating a new route.",
+            "help": "Click on the map to add a new anchor point, or drag existing ones to change the route.",
+            "activities": {
+                "bike": "Đạp xe",
+                "racing_bike": "Road bike",
+                "gravel_bike": "Gravel bike",
+                "mountain_bike": "Xe đạp leo núi",
+                "foot": "Chạy/đi bộ",
+                "motorcycle": "Xe máy",
+                "water": "Nước",
+                "railway": "Đường sắt"
+            },
+            "surface": {
+                "unknown": "Unknown",
+                "paved": "Paved",
+                "unpaved": "Unpaved",
+                "asphalt": "Asphalt",
+                "concrete": "Concrete",
+                "chipseal": "Chipseal",
+                "cobblestone": "Cobblestone",
+                "unhewn_cobblestone": "Unhewn cobblestone",
+                "paving_stones": "Paving stones",
+                "stepping_stones": "Stepping stones",
+                "sett": "Sett",
+                "metal": "Metal",
+                "wood": "Wood",
+                "compacted": "Compacted gravel",
+                "fine_gravel": "Fine gravel",
+                "gravel": "Gravel",
+                "pebblestone": "Pebblestone",
+                "rock": "Rock",
+                "dirt": "Dirt",
+                "ground": "Ground",
+                "earth": "Earth",
+                "snow": "Snow",
+                "ice": "Ice",
+                "salt": "Salt",
+                "mud": "Mud",
+                "sand": "Sand",
+                "woodchips": "Woodchips",
+                "grass": "Grass",
+                "grass_paver": "Grass paver"
+            },
+            "error": {
+                "from": "The start point is too far from the nearest road",
+                "via": "The via point is too far from the nearest road",
+                "to": "The end point is too far from the nearest road",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "Crop or split",
+            "crop": "Crop",
+            "split_as": "Split the trace into",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "Manage time data",
+            "start": "Start",
+            "end": "End",
+            "total_time": "Moving time",
+            "pick_date": "Pick a date",
+            "artificial": "Create realistic time data",
+            "update": "Update time data",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "Connect the traces",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "Merge selection",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "Request elevation data",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "Create and edit points of interest",
+            "icon": "Icon",
+            "link": "Link",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "create": "Create point of interest",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "Reduce the number of GPS points",
+            "tolerance": "Tolerance",
+            "number_of_points": "Number of GPS points",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "Delete GPS points",
+            "delete_waypoints": "Delete points of interest",
+            "delete_inside": "Delete inside selection",
+            "delete_outside": "Delete outside selection",
+            "button": "Xóa",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "Layer settings",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "Layer selection",
+        "custom_layers": {
+            "title": "Custom layers",
+            "new": "New custom layer",
+            "edit": "Edit custom layer",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
+            "max_zoom": "Max zoom",
+            "layer_type": "Layer type",
+            "basemap": "Bản đồ cơ sở",
+            "overlay": "Lớp phủ",
+            "create": "Create layer",
+            "update": "Update layer"
+        },
+        "opacity": "Overlay opacity",
+        "label": {
+            "basemaps": "Basemaps",
+            "overlays": "Overlays",
+            "custom": "Custom",
+            "world": "World",
+            "countries": "Countries",
+            "belgium": "Belgium",
+            "bulgaria": "Bulgaria",
+            "finland": "Finland",
+            "france": "France",
+            "new_zealand": "New Zealand",
+            "norway": "Norway",
+            "spain": "Spain",
+            "sweden": "Sweden",
+            "switzerland": "Switzerland",
+            "united_kingdom": "United Kingdom",
+            "united_states": "United States",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo Raster",
+            "swisstopoVector": "swisstopo Vector",
+            "swisstopoSatellite": "swisstopo Satellite",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN Satellite",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "Hiking",
+            "waymarkedTrailsCycling": "Cycling",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "Skating",
+            "waymarkedTrailsHorseRiding": "Horse Riding",
+            "waymarkedTrailsWinter": "Winter",
+            "points_of_interest": "Points of interest",
+            "food": "Food",
+            "bakery": "Bakery",
+            "food-store": "Food Store",
+            "eat-and-drink": "Eat and Drink",
+            "amenities": "Amenities",
+            "toilets": "Toilets",
+            "water": "Nước",
+            "shower": "Shower",
+            "shelter": "Shelter",
+            "motorized": "Cars and Motorcycles",
+            "fuel-station": "Fuel Station",
+            "parking": "Parking",
+            "garage": "Garage",
+            "barrier": "Barrier",
+            "tourism": "Tourism",
+            "attraction": "Attraction",
+            "viewpoint": "Viewpoint",
+            "hotel": "Hotel",
+            "campsite": "Campsite",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "Pass",
+            "climbing": "Climbing",
+            "bicycle": "Bicycle",
+            "bicycle-parking": "Bicycle Parking",
+            "bicycle-rental": "Bicycle Rental",
+            "bicycle-shop": "Bicycle Shop",
+            "public-transport": "Public Transport",
+            "railway-station": "Railway Station",
+            "tram-stop": "Tram Stop",
+            "bus-stop": "Bus Stop",
+            "ferry": "Ferry"
+        },
+        "color": {
+            "blue": "Blue",
+            "bluered": "Blue Red",
+            "gray": "Gray",
+            "hot": "Hot",
+            "purple": "Purple",
+            "orange": "Orange"
+        }
+    },
+    "chart": {
+        "show_slope": "Show slope data",
+        "show_surface": "Show surface data",
+        "show_speed": "Show speed data",
+        "show_pace": "Show pace data",
+        "show_heartrate": "Show heart rate data",
+        "show_cadence": "Show cadence data",
+        "show_temperature": "Show temperature data",
+        "show_power": "Show power data"
+    },
+    "quantities": {
+        "distance": "Distance",
+        "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "Temperature",
+        "speed": "Speed",
+        "pace": "Nhịp độ",
+        "heartrate": "Heart rate",
+        "cadence": "Cadence",
+        "power": "Power",
+        "slope": "Slope",
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
+    },
+    "units": {
+        "meters": "m",
+        "feet": "ft",
+        "kilometers": "km",
+        "miles": "mi",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "File",
+        "files": "Files",
+        "track": "Track",
+        "tracks": "Tracks",
+        "segment": "Segment",
+        "segments": "Segments",
+        "waypoint": "Point of interest",
+        "waypoints": "Points of interest",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "Bank",
+            "beach": "Beach",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "Bridge",
+            "building": "Building",
+            "campground": "Campsite",
+            "car": "Car",
+            "car_repair": "Garage",
+            "convenience_store": "Convenience Store",
+            "crossing": "Crossing",
+            "department_store": "Department Store",
+            "drinking_water": "Nước",
+            "exit": "Exit",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "Fuel Station",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "Hotel",
+            "house": "House",
+            "information": "Information",
+            "park": "Park",
+            "parking_area": "Parking",
+            "pharmacy": "Pharmacy",
+            "picnic_area": "Picnic Area",
+            "restaurant": "Restaurant",
+            "restricted_area": "Restricted Area",
+            "restroom": "Toilets",
+            "road": "Road",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "Shopping Center",
+            "shower": "Shower",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "Tunnel",
+            "water_source": "Water Source"
+        }
+    },
+    "homepage": {
+        "website": "Website",
+        "home": "Home",
+        "app": "App",
+        "contact": "Contact",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "Email",
+        "contribute": "Contribute",
+        "supported_by": "supported by",
+        "support_button": "Support gpx.rnmkcy.eu on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "Search",
+            "clear": "Clear",
+            "cancel": "Cancel",
+            "recent": "Recent searches",
+            "no_recent": "No recent searches",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
+        "basemap": "Bản đồ cơ sở",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "zoom": "Zoom",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "Preview",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
+}
\ No newline at end of file
diff --git a/website/src/locales/zh.json b/website/src/locales/zh.json
new file mode 100755
index 0000000..8e1ea73
--- /dev/null
+++ b/website/src/locales/zh.json
@@ -0,0 +1,512 @@
+{
+    "metadata": {
+        "home_title": "在线GPX 文件编辑器",
+        "app_title": "app",
+        "embed_title": "在线GPX 文件编辑器",
+        "help_title": "帮助",
+        "404_title": "找不到页面",
+        "description": "在线查看、编辑和创建 GPX 文件，包含高级路线规划、文件管理器、精美的地图和详细的数据可视化功能。"
+    },
+    "menu": {
+        "new": "新建",
+        "new_file": "新建文件",
+        "new_track": "新建轨迹",
+        "new_segment": "新建轨迹段",
+        "open": "打开...",
+        "duplicate": "创建副本",
+        "close": "关闭",
+        "close_all": "全部关闭",
+        "copy": "复制",
+        "paste": "粘贴",
+        "cut": "剪切",
+        "export": "导出...",
+        "export_all": "全部导出...",
+        "export_options": "导出选项",
+        "support_message": "本工具免费使用，但运行需要消耗成本。若您经常使用，请捐助支持本网站。谢谢！",
+        "support_button": "帮助网站保持免费",
+        "download_file": "下载文件",
+        "download_files": "下载文件",
+        "edit": "编辑",
+        "undo": "撤销",
+        "redo": "恢复",
+        "delete": "删除",
+        "select_all": "全选",
+        "view": "视图",
+        "elevation_profile": "海拔",
+        "vertical_file_view": "垂直文件列表",
+        "switch_basemap": "切换到上一个底图",
+        "toggle_overlays": "切换覆盖",
+        "toggle_3d": "切换3D",
+        "settings": "设置",
+        "distance_units": "长度单位",
+        "metric": "公制",
+        "imperial": "英制",
+        "nautical": "Nautical",
+        "velocity_units": "速度单位",
+        "temperature_units": "温度单位",
+        "celsius": "摄氏度",
+        "fahrenheit": "华氏度",
+        "language": "语言",
+        "mode": "主题",
+        "system": "System",
+        "light": "浅色",
+        "dark": "暗色",
+        "street_view_source": "街景来源",
+        "mapillary": "Mapillary",
+        "google": "Google",
+        "toggle_street_view": "Street view",
+        "layers": "地图图层...",
+        "distance_markers": "距离标记",
+        "direction_markers": "方向箭头",
+        "help": "帮助",
+        "more": "更多...",
+        "donate": "捐赠",
+        "ctrl": "Ctrl",
+        "click": "单击",
+        "drag": "拖动",
+        "metadata": {
+            "button": "信息...",
+            "name": "名称",
+            "description": "说明",
+            "save": "保存"
+        },
+        "style": {
+            "button": "外观...",
+            "color": "配色",
+            "opacity": "透明度",
+            "width": "宽"
+        },
+        "hide": "隐藏",
+        "unhide": "显示",
+        "center": "Center",
+        "open_in": "打开"
+    },
+    "toolbar": {
+        "routing": {
+            "tooltip": "规划或编辑路线",
+            "activity": "活动",
+            "use_routing": "路由",
+            "use_routing_tooltip": "通过路网连接锚点，若禁用则用直线连接",
+            "allow_private": "允许私有道路",
+            "reverse": {
+                "button": "反转",
+                "tooltip": "反转路线"
+            },
+            "route_back_to_start": {
+                "button": "返回起点",
+                "tooltip": "连接路线的终点与起点"
+            },
+            "round_trip": {
+                "button": "往返",
+                "tooltip": "通过相同路线返回起始点"
+            },
+            "start_loop_here": "在此开始循环",
+            "help_no_file": "选择一条轨迹进行编辑，或在地图上单击创建新的路线。",
+            "help": "在地图上点击添加一个新的锚点，或拖动现有的锚点以改变路线。",
+            "activities": {
+                "bike": "自行车",
+                "racing_bike": "公路自行车",
+                "gravel_bike": "砾石自行车",
+                "mountain_bike": "山地自行车",
+                "foot": "跑步/徒步",
+                "motorcycle": "摩托车",
+                "water": "水域",
+                "railway": "铁路"
+            },
+            "surface": {
+                "unknown": "未知",
+                "paved": "铺装路面",
+                "unpaved": "非铺装路面",
+                "asphalt": "沥青",
+                "concrete": "混凝土",
+                "chipseal": "碎石铺装",
+                "cobblestone": "鹅卵石",
+                "unhewn_cobblestone": "未开凿的鹅卵石",
+                "paving_stones": "铺路石",
+                "stepping_stones": "垫脚石",
+                "sett": "Sett",
+                "metal": "金属",
+                "wood": "木材",
+                "compacted": "紧凑的砾石",
+                "fine_gravel": "精良的砾石",
+                "gravel": "砾石",
+                "pebblestone": "卵石",
+                "rock": "岩石",
+                "dirt": "泥土",
+                "ground": "地",
+                "earth": "土",
+                "snow": "雪",
+                "ice": "冰",
+                "salt": "盐",
+                "mud": "泥巴",
+                "sand": "沙粒",
+                "woodchips": "木片",
+                "grass": "草地",
+                "grass_paver": "草坪"
+            },
+            "error": {
+                "from": "起点离最近的道路太远",
+                "via": "途径点离最近的道路太远",
+                "to": "终点离最近的道路太远",
+                "timeout": "Route calculation took too long, try adding points closer together"
+            }
+        },
+        "scissors": {
+            "tooltip": "裁剪或拆分",
+            "crop": "裁剪",
+            "split_as": "将轨迹分为",
+            "help_invalid_selection": "Select a trace to crop or split.",
+            "help": "Use the slider to crop the trace, or split it by clicking on one of the split markers or on the trace itself."
+        },
+        "time": {
+            "tooltip": "管理时间数据",
+            "start": "开始",
+            "end": "结束",
+            "total_time": "移动时间",
+            "pick_date": "选择日期",
+            "artificial": "创建实际时间数据",
+            "update": "更新时间数据",
+            "help": "Use the form to set new time data.",
+            "help_invalid_selection": "Select a single trace to manage its time data."
+        },
+        "merge": {
+            "merge_traces": "连接轨迹",
+            "merge_contents": "Merge the contents and keep the traces disconnected",
+            "merge_selection": "合并选择项",
+            "tooltip": "Merge items together",
+            "help_merge_traces": "Connecting the selected traces will create a single continuous trace.",
+            "help_cannot_merge_traces": "Your selection must contain several traces to connect them.",
+            "help_merge_contents": "Merging the contents of the selected items will group all the contents inside the first item.",
+            "help_cannot_merge_contents": "Your selection must contain several items to merge their contents.",
+            "selection_tip": "Tip: use {KEYBOARD_SHORTCUT} to add items to the selection."
+        },
+        "extract": {
+            "tooltip": "Extract contents to separate items",
+            "button": "Extract",
+            "help": "Extracting the contents of the selected items will create a separate item for each of their contents.",
+            "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
+        },
+        "elevation": {
+            "button": "请求海拔数据",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
+            "help_no_selection": "Select a file item to request elevation data."
+        },
+        "waypoint": {
+            "tooltip": "创建并编辑兴趣点",
+            "icon": "图标",
+            "link": "Link",
+            "longitude": "经度",
+            "latitude": "纬度",
+            "create": "创建兴趣点",
+            "add": "Add point of interest to file",
+            "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
+            "help_no_selection": "Select a file to create or edit points of interest."
+        },
+        "reduce": {
+            "tooltip": "减少轨迹点的数量",
+            "tolerance": "Tolerance",
+            "number_of_points": "轨迹点数量",
+            "button": "Minify",
+            "help": "Use the slider to choose the number of GPS points to keep.",
+            "help_no_selection": "Select a trace to reduce the number of its GPS points."
+        },
+        "clean": {
+            "tooltip": "Clean GPS points and points of interest with a rectangle selection",
+            "delete_trackpoints": "删除 GPS 点",
+            "delete_waypoints": "删除兴趣点",
+            "delete_inside": "删除选中内容",
+            "delete_outside": "Delete outside selection",
+            "button": "删除",
+            "help": "Select a rectangle area on the map to remove GPS points and points of interest.",
+            "help_no_selection": "Select a trace to clean GPS points and points of interest."
+        }
+    },
+    "layers": {
+        "settings": "图层设置",
+        "settings_help": "Select the map layers you want to show in the interface, add custom ones, and adjust their settings.",
+        "selection": "选择图层",
+        "custom_layers": {
+            "title": "自定义图层",
+            "new": "新建自定义图层",
+            "edit": "编辑自定义图层",
+            "urls": "URL(s)",
+            "url_placeholder": "WMTS, WMS 或 Mapbox 风格 JSON",
+            "max_zoom": "最大缩放等级",
+            "layer_type": "图层类型",
+            "basemap": "底图",
+            "overlay": "叠加",
+            "create": "创建图层",
+            "update": "更新图层"
+        },
+        "opacity": "图层透明度",
+        "label": {
+            "basemaps": "底图",
+            "overlays": "叠加层",
+            "custom": "自定义",
+            "world": "世界",
+            "countries": "国家/地区",
+            "belgium": "Belgium",
+            "bulgaria": "保加利亚",
+            "finland": "芬兰",
+            "france": "法国",
+            "new_zealand": "新西兰",
+            "norway": "挪威",
+            "spain": "西班牙",
+            "sweden": "瑞典",
+            "switzerland": "瑞士",
+            "united_kingdom": "英国",
+            "united_states": "美国",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox 卫星",
+            "openStreetMap": "OpenStreetMap",
+            "openTopoMap": "OpenTopoMap",
+            "openHikingMap": "OpenHikingMap",
+            "cyclOSM": "CyclOSM",
+            "linz": "LINZ Topo",
+            "linzTopo": "LINZ Topo50",
+            "swisstopoRaster": "swisstopo 栅格图",
+            "swisstopoVector": "swisstopo 矢量图",
+            "swisstopoSatellite": "swisstopo 卫星图",
+            "ignBe": "IGN Topo",
+            "ignFrPlan": "IGN Plan",
+            "ignFrTopo": "IGN Topo",
+            "ignFrScan25": "IGN SCAN25",
+            "ignFrSatellite": "IGN 卫星",
+            "ignEs": "IGN",
+            "ordnanceSurvey": "Ordnance Survey",
+            "norwayTopo": "Topografisk Norgeskart 4",
+            "swedenTopo": "Lantmäteriet Topo",
+            "swedenSatellite": "Lantmäteriet Satellite",
+            "finlandTopo": "Lantmäteriverket Terrängkarta",
+            "bgMountains": "BGMountains",
+            "usgs": "USGS",
+            "bikerouterGravel": "bikerouter.de Gravel",
+            "cyclOSMlite": "CyclOSM Lite",
+            "swisstopoSlope": "swisstopo Slope",
+            "swisstopoHiking": "swisstopo Hiking",
+            "swisstopoHikingClosures": "swisstopo Hiking Closures",
+            "swisstopoCycling": "swisstopo Cycling",
+            "swisstopoCyclingClosures": "swisstopo Cycling Closures",
+            "swisstopoMountainBike": "swisstopo MTB",
+            "swisstopoMountainBikeClosures": "swisstopo MTB Closures",
+            "swisstopoSkiTouring": "swisstopo Ski Touring",
+            "ignFrCadastre": "IGN Cadastre",
+            "ignSlope": "IGN Slope",
+            "ignSkiTouring": "IGN Ski Touring",
+            "waymarked_trails": "Waymarked Trails",
+            "waymarkedTrailsHiking": "徒步",
+            "waymarkedTrailsCycling": "骑行",
+            "waymarkedTrailsMTB": "MTB",
+            "waymarkedTrailsSkating": "滑雪",
+            "waymarkedTrailsHorseRiding": "骑马",
+            "waymarkedTrailsWinter": "冬季",
+            "points_of_interest": "兴趣点",
+            "food": "食物",
+            "bakery": "面包店",
+            "food-store": "食品店",
+            "eat-and-drink": "吃吃喝喝",
+            "amenities": "便利设施",
+            "toilets": "厕所",
+            "water": "水域",
+            "shower": "淋浴",
+            "shelter": "Shelter",
+            "motorized": "汽车和摩托车",
+            "fuel-station": "加油站",
+            "parking": "停车场",
+            "garage": "车库",
+            "barrier": "障碍物",
+            "tourism": "旅游观光",
+            "attraction": "景点",
+            "viewpoint": "观景点",
+            "hotel": "酒店",
+            "campsite": "营地",
+            "hut": "Hut",
+            "picnic": "Picnic Area",
+            "summit": "Summit",
+            "pass": "关卡",
+            "climbing": "攀爬",
+            "bicycle": "自行车",
+            "bicycle-parking": "自行车停车场",
+            "bicycle-rental": "自行车出租点",
+            "bicycle-shop": "自行车店",
+            "public-transport": "公共交通",
+            "railway-station": "火车站",
+            "tram-stop": "有轨电车站",
+            "bus-stop": "巴士站",
+            "ferry": "轮渡"
+        },
+        "color": {
+            "blue": "蓝色",
+            "bluered": "Blue Red",
+            "gray": "灰色",
+            "hot": "灼热",
+            "purple": "紫色",
+            "orange": "橙色"
+        }
+    },
+    "chart": {
+        "show_slope": "显示坡度数据",
+        "show_surface": "Show surface data",
+        "show_speed": "显示速度数据",
+        "show_pace": "显示配速数据",
+        "show_heartrate": "显示心率数据",
+        "show_cadence": "显示踏频数据",
+        "show_temperature": "显示温度数据",
+        "show_power": "显示功率数据"
+    },
+    "quantities": {
+        "distance": "距离",
+        "elevation": "高程",
+        "elevation_gain_loss": "Elevation gain and loss",
+        "temperature": "温度",
+        "speed": "速度",
+        "pace": "配速",
+        "heartrate": "心率",
+        "cadence": "踏频",
+        "power": "功率",
+        "slope": "斜坡",
+        "surface": "表面",
+        "time": "时间",
+        "moving": "移动",
+        "total": "全部"
+    },
+    "units": {
+        "meters": "米",
+        "feet": "英尺",
+        "kilometers": "千米",
+        "miles": "英里",
+        "nautical_miles": "nm",
+        "celsius": "°C",
+        "fahrenheit": "°F",
+        "kilometers_per_hour": "km/h",
+        "miles_per_hour": "mph",
+        "minutes_per_kilometer": "min/km",
+        "minutes_per_mile": "min/mi",
+        "minutes_per_nautical_mile": "min/nm",
+        "knots": "kn",
+        "heartrate": "bpm",
+        "cadence": "rpm",
+        "power": "W"
+    },
+    "gpx": {
+        "file": "文件",
+        "files": "文件",
+        "track": "轨迹",
+        "tracks": "轨迹",
+        "segment": "段",
+        "segments": "Segments",
+        "waypoint": "兴趣点",
+        "waypoints": "兴趣点",
+        "symbol": {
+            "alert": "Alert",
+            "anchor": "Anchor",
+            "bank": "银行",
+            "beach": "海滩",
+            "bike_trail": "Bike Trail",
+            "binoculars": "Binoculars",
+            "bridge": "桥",
+            "building": "建筑",
+            "campground": "营地",
+            "car": "汽车",
+            "car_repair": "车库",
+            "convenience_store": "便利店",
+            "crossing": "交叉路口",
+            "department_store": "百货店",
+            "drinking_water": "水域",
+            "exit": "退出",
+            "lodge": "Hut",
+            "lodging": "Accommodation",
+            "forest": "Forest",
+            "gas_station": "加油站",
+            "ground_transportation": "Ground Transportation",
+            "hotel": "酒店",
+            "house": "住宅",
+            "information": "问询处",
+            "park": "公园",
+            "parking_area": "停车场",
+            "pharmacy": "药店",
+            "picnic_area": "Picnic Area",
+            "restaurant": "餐厅",
+            "restricted_area": "管制区域",
+            "restroom": "厕所",
+            "road": "道路",
+            "scenic_area": "Scenic Area",
+            "shelter": "Shelter",
+            "shopping_center": "购物中心",
+            "shower": "淋浴",
+            "summit": "Summit",
+            "telephone": "Telephone",
+            "tunnel": "隧道",
+            "water_source": "水源"
+        }
+    },
+    "homepage": {
+        "website": "官方网站",
+        "home": "首页",
+        "app": "App",
+        "contact": "联系方式",
+        "reddit": "Reddit",
+        "x": "X",
+        "facebook": "Facebook",
+        "github": "GitHub",
+        "crowdin": "Crowdin",
+        "email": "电子邮箱",
+        "contribute": "参与贡献",
+        "supported_by": "技术支持：",
+        "support_button": "在 Ko-fi 上支持 gpx.rnmkcy.eu",
+        "route_planning": "路线规划",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "全球和本地地图",
+        "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "数据可视化",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
+        "identity": "Free, ad-free and open source",
+        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "docs": {
+        "translate": "Improve the translation on Crowdin",
+        "answer_not_found": "Did not find what you were looking for?",
+        "ask_on_reddit": "Ask the community on Reddit",
+        "search": {
+            "search": "搜索",
+            "clear": "清除",
+            "cancel": "取消",
+            "recent": "近期搜索",
+            "no_recent": "无近期搜索",
+            "save": "Save this search",
+            "remove": "Remove this search from history",
+            "favorites": "Favorites",
+            "remove_favorite": "Remove this search from favorites",
+            "to_select": "to select",
+            "to_navigate": "to navigate",
+            "to_close": "to close",
+            "no_results": "No results for",
+            "no_results_suggestion": "Try searching for"
+        }
+    },
+    "embedding": {
+        "title": "Create your own map",
+        "mapbox_token": "Mapbox access token",
+        "file_urls": "文件 URLs (用逗号分隔)",
+        "drive_ids": "谷歌云盘文件 IDs (用逗号分隔)",
+        "basemap": "底图",
+        "height": "高度",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "latitude": "纬度",
+        "longitude": "经度",
+        "zoom": "缩放",
+        "pitch": "Pitch",
+        "bearing": "Bearing",
+        "preview": "预览",
+        "code": "Integration code"
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "学习如何在您的浏览器中启用 WebGL 2",
+    "page_not_found": "找不到页面"
+}
\ No newline at end of file
diff --git a/website/src/routes/+layout.js b/website/src/routes/+layout.js
new file mode 100755
index 0000000..94a0ef5
--- /dev/null
+++ b/website/src/routes/+layout.js
@@ -0,0 +1,13 @@
+export const prerender = true;
+
+import { languages } from '$lib/languages';
+import { register, init } from 'svelte-i18n';
+
+Object.keys(languages).forEach((lang) => {
+    register(lang, () => import(`../locales/${lang}.json`));
+});
+
+init({
+    fallbackLocale: 'fr',
+    initialLocale: 'fr',
+});
\ No newline at end of file
diff --git a/website/src/routes/+layout.server.ts b/website/src/routes/+layout.server.ts
new file mode 100755
index 0000000..fd51662
--- /dev/null
+++ b/website/src/routes/+layout.server.ts
@@ -0,0 +1,28 @@
+import { guides } from '$lib/components/docs/docs.js';
+
+function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'fr';
+    let subguide = undefined;
+    if (guide.includes('/')) {
+        [guide, subguide] = guide.split('/');
+    }
+    return subguide
+        ? import(`./../lib/docs/${language}/${guide}/${subguide}.mdx`)
+        : import(`./../lib/docs/${language}/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { language } = params;
+
+    const guideTitles: Record<string, string> = {};
+    for (let guide of Object.keys(guides)) {
+        guideTitles[guide] = (await getModule(language, guide)).metadata.title;
+        for (let subguide of guides[guide]) {
+            guideTitles[`${guide}/${subguide}`] = (await getModule(language, `${guide}/${subguide}`)).metadata.title;
+        }
+    }
+
+    return {
+        guideTitles
+    };
+}
\ No newline at end of file
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
new file mode 100755
index 0000000..5b95eac
--- /dev/null
+++ b/website/src/routes/+layout.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import '../app.pcss';
+	import { ModeWatcher } from 'mode-watcher';
+	import { isLoading, _, locale } from 'svelte-i18n';
+	import { page } from '$app/stores';
+	import Nav from '$lib/components/Nav.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+	import { onMount } from 'svelte';
+	import { convertOldEmbeddingOptions } from '$lib/components/embedding/Embedding';
+	import { base } from '$app/paths';
+	import { languages } from '$lib/languages';
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { getURLForLanguage } from '$lib/utils';
+
+	export let data: {
+		guideTitles: Record<string, string>;
+	};
+
+	const appRoutes = ['/[[language]]/app', '/[[language]]/embed'];
+
+	onMount(() => {
+		if ($page.url.searchParams.has('embed')) {
+			// convert old embedding options to new format and redirect to new embed page
+			let folders = $page.url.pathname.split('/');
+			let locale = folders.indexOf('l') >= 0 ? folders[folders.indexOf('l') + 1] ?? 'fr' : 'fr';
+			window.location.href = `${getURLForLanguage(locale, '/embed')}?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions($page.url.searchParams)))}`;
+		}
+	});
+
+	$: if ($page.route.id?.includes('[[language]]')) {
+		if ($page.params.language) {
+			let lang = $page.params.language.replace('/', '');
+			if ($locale !== lang) {
+				if (languages.hasOwnProperty(lang)) {
+					$locale = lang;
+				} else if (browser) {
+					goto(`${base}/404`);
+				}
+			}
+		} else if ($locale !== 'fr') {
+			$locale = 'fr';
+		}
+	}
+
+	$: if (browser && !$isLoading && $locale) {
+		let title = `gpx.rnmkcy.eu — ${$_(`metadata.${$page.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home'}_title`)}`;
+		if ($page.params.guide) {
+			document.title = `${title} | ${data.guideTitles[$page.params.guide]}`;
+		} else {
+			document.title = title;
+		}
+	}
+	$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
+</script>
+
+<ModeWatcher />
+
+<div class="flex flex-col min-h-screen">
+	{#if !$isLoading}
+		{#if showNavAndFooter}
+			<Nav />
+		{/if}
+		<main class="grow flex flex-col">
+			<slot />
+		</main>
+		{#if showNavAndFooter}
+			<Footer />
+		{/if}
+	{/if}
+</div>
diff --git a/website/src/routes/404/+page.svelte b/website/src/routes/404/+page.svelte
new file mode 100755
index 0000000..15bbd12
--- /dev/null
+++ b/website/src/routes/404/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import Logo from '$lib/components/Logo.svelte';
+	import { getURLForLanguage } from '$lib/utils';
+	import { Home, Map, BookOpenText } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+</script>
+
+<div class="grow px-12 my-12 flex flex-col items-center justify-center gap-6">
+	<p class="text-7xl font-black">404</p>
+	<p class="text-xl -mt-6">{$_('page_not_found')}</p>
+	<Logo class="h-40 my-3 animate-spin" style="animation-duration: 20000ms" iconOnly={true} />
+	<div class="w-full flex flex-row flex-wrap gap-3 justify-center">
+		<Button href={getURLForLanguage($locale, '/')} class="text-base w-1/4 min-w-fit rounded-full">
+			<Home size="18" class="mr-1.5" />
+			{$_('homepage.home')}
+		</Button>
+		<Button
+			href={getURLForLanguage($locale, '/app')}
+			class="text-base w-1/4 min-w-fit rounded-full"
+		>
+			<Map size="18" class="mr-1.5" />
+			{$_('homepage.app')}
+		</Button>
+		<Button
+			href={getURLForLanguage($locale, '/help')}
+			class="text-base w-1/4 min-w-fit rounded-full"
+		>
+			<BookOpenText size="18" class="mr-1.5" />
+			<span>{$_('menu.help')}</span>
+		</Button>
+	</div>
+</div>
diff --git a/website/src/routes/[[language]]/+page.svelte b/website/src/routes/[[language]]/+page.svelte
new file mode 100755
index 0000000..4c41776
--- /dev/null
+++ b/website/src/routes/[[language]]/+page.svelte
@@ -0,0 +1,265 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
+	import Logo from '$lib/components/Logo.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+	import {
+		BookOpenText,
+		Heart,
+		ChartArea,
+		Map,
+		PencilRuler,
+		PenLine,
+		Route,
+		Scale
+	} from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
+	import { exampleGPXFile } from '$lib/assets/example';
+	import { writable } from 'svelte/store';
+	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onDestroy, onMount } from 'svelte';
+
+	export let data: {
+		fundingModule: any;
+		translationModule: any;
+		mapboxModule: any;
+	};
+
+	let gpxStatistics = writable(exampleGPXFile.getStatistics());
+	let slicedGPXStatistics = writable(undefined);
+	let additionalDatasets = writable(['speed', 'atemp']);
+	let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+
+	onMount(() => {
+		$currentTool = Tool.SCISSORS;
+	});
+
+	$: $currentTool, ($currentTool = Tool.SCISSORS);
+
+	onDestroy(() => {
+		$currentTool = null;
+	});
+</script>
+
+<div class="space-y-24 my-24">
+	<div class="-mt-12 sm:mt-0">
+		<div class="px-12 w-full flex flex-col items-center">
+			<div class="flex flex-col gap-6 items-center max-w-3xl">
+				<div class="text-4xl sm:text-6xl font-black text-center">{$_('metadata.home_title')}</div>
+				<div class="text-lg sm:text-xl text-muted-foreground text-center">
+					{$_('metadata.description')}
+				</div>
+				<div class="w-full flex flex-row justify-center gap-3">
+					<Button href={getURLForLanguage($locale, '/app')} class="w-1/3 min-w-fit">
+						<Map size="18" class="mr-1.5" />
+						{$_('homepage.app')}
+					</Button>
+					<Button
+						variant="secondary"
+						href={getURLForLanguage($locale, '/help')}
+						class="w-1/3 min-w-fit"
+					>
+						<BookOpenText size="18" class="mr-1.5" />
+						<span>{$_('menu.help')}</span>
+					</Button>
+				</div>
+			</div>
+		</div>
+		<div class="relative overflow-hidden">
+			<enhanced:img
+				src="/src/lib/assets/img/home/routing.png"
+				alt="Screenshot of the gpx.rnmkcy.eu map in 3D."
+				class="w-full min-w-[1200px] ml-[20%] -translate-x-[20%]"
+			/>
+			<div
+				class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background"
+			/>
+		</div>
+	</div>
+	<div class="px-12 sm:px-24 w-full flex flex-col items-center">
+		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
+			<div class="markdown text-center">
+				<h1>
+					<Route size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.route_planning')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.route_planning_description')}</p>
+			</div>
+			<div class="p-3 w-fit rounded-md border shadow-xl md:shrink-0">
+				<Routing minimizable={false} />
+			</div>
+		</div>
+	</div>
+	<div class="px-12 sm:px-24 w-full flex flex-col items-center">
+		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
+			<div class="markdown text-center md:hidden">
+				<h1>
+					<PencilRuler size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.file_processing')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
+			</div>
+			<div class="relative md:shrink-0 max-w-[400px]">
+				<Toolbar />
+			</div>
+			<div class="markdown text-center hidden md:block">
+				<h1>
+					<PencilRuler size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.file_processing')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
+			</div>
+		</div>
+	</div>
+	<div class="px-12 sm:px-24 w-full flex flex-col items-center">
+		<div
+			class="markdown flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl"
+		>
+			<div class="markdown text-center">
+				<h1>
+					<Map size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.maps')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.maps_description')}</p>
+			</div>
+			<div
+				class="relative h-60 xs:h-80 aspect-square rounded-2xl shadow-xl overflow-hidden overflow-clip"
+			>
+				<enhanced:img
+					src="/src/lib/assets/img/home/mapbox-outdoors.png"
+					alt="Mapbox Outdoors map screenshot."
+					class="absolute"
+					style="clip-path: inset(0 50% 50% 0);"
+				/>
+				<enhanced:img
+					src="/src/lib/assets/img/home/mapbox-satellite.png"
+					alt="Mapbox Satellite map screenshot."
+					class="absolute"
+					style="clip-path: inset(0 0 50% 50%);"
+				/>
+				<enhanced:img
+					src="/src/lib/assets/img/home/ign.png"
+					alt="IGN map screenshot."
+					class="absolute"
+					style="clip-path: inset(50% 50% 0 0);"
+				/>
+				<enhanced:img
+					src="/src/lib/assets/img/home/cyclosm.png"
+					alt="CyclOSM map screenshot."
+					class="absolute"
+					style="clip-path: inset(50% 0 0 50%);"
+				/>
+				<enhanced:img
+					src="/src/lib/assets/img/home/waymarked.png"
+					alt="Waymarked Trails map screenshot."
+					class="absolute"
+				/>
+			</div>
+		</div>
+	</div>
+	<div class="px-8 md:px-12">
+		<div class="markdown text-center px-4 md:px-12">
+			<h1>
+				<ChartArea size="24" class="mr-1 inline-block align-baseline" />
+				{$_('homepage.data_visualization')}
+			</h1>
+			<p class="text-muted-foreground mb-6">{$_('homepage.data_visualization_description')}</p>
+		</div>
+		<div class="h-48 w-full">
+			<ElevationProfile
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				additionalDatasets={$additionalDatasets}
+				elevationFill={$elevationFill}
+				panelSize={200}
+			/>
+		</div>
+		<div class="flex flex-col items-center">
+			<div class="h-10 w-fit">
+				<GPXStatistics
+					{gpxStatistics}
+					{slicedGPXStatistics}
+					panelSize={192}
+					orientation={'horizontal'}
+				/>
+			</div>
+		</div>
+	</div>
+	<div class="px-12 sm:px-24 w-full flex flex-col items-center">
+		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
+			<div class="markdown text-center md:hidden">
+				<h1>
+					<Scale size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.identity')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.identity_description')}</p>
+			</div>
+			<a href="https://github.com/gpxstudio/gpx.rnmkcy.eu" target="_blank">
+				<Logo class="h-32" company="github" />
+			</a>
+			<div class="markdown text-center hidden md:block">
+				<h1>
+					<Scale size="24" class="mr-1 inline-block align-baseline" />
+					{$_('homepage.identity')}
+				</h1>
+				<p class="text-muted-foreground">{$_('homepage.identity_description')}</p>
+			</div>
+		</div>
+	</div>
+	<div class="px-12 w-full">
+		<div class="w-full max-w-7xl mx-auto rounded-2xl shadow-xl overflow-hidden overflow-clip">
+			<enhanced:img
+				src="/src/lib/assets/img/home/map.png"
+				alt="Screenshot of the gpx.rnmkcy.eu map in 3D."
+				class="min-w-[800px] ml-[15%] -translate-x-[15%]"
+			/>
+		</div>
+	</div>
+	<div
+		class="px-12 md:px-24 flex flex-row flex-wrap lg:flex-nowrap items-center justify-center -space-y-0.5 lg:-space-x-0.5"
+	>
+		<div
+			class="grow max-w-xl flex flex-col items-center gap-6 p-8 border rounded-2xl shadow-xl -rotate-1 lg:rotate-1"
+		>
+			{#await data.fundingModule then fundingModule}
+				<DocsContainer module={fundingModule.default} />
+			{/await}
+			<Button href="https://ko-fi.com/gpxstudio" target="_blank" class="text-base">
+				<Heart size="16" class="mr-1" fill="rgb(var(--support))" color="rgb(var(--support))" />
+				<span>{$_('homepage.support_button')}</span>
+			</Button>
+		</div>
+		<div
+			class="grow max-w-lg mx-6 h-fit bg-background flex flex-col items-center gap-6 p-8 border rounded-2xl shadow-xl rotate-1 lg:-rotate-1"
+		>
+			{#await data.translationModule then translationModule}
+				<DocsContainer module={translationModule.default} />
+			{/await}
+			<Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base">
+				<PenLine size="16" class="mr-1" />
+				<span>{$_('homepage.contribute')}</span>
+			</Button>
+		</div>
+	</div>
+	<div class="px-12 md:px-24 flex flex-col items-center">
+		<div
+			class="max-w-4xl flex flex-col lg:flex-row items-center justify-center gap-x-12 gap-y-6 p-6 border rounded-2xl shadow-xl bg-secondary"
+		>
+			<div class="shrink-0 flex flex-col sm:flex-row lg:flex-col items-center gap-x-4 gap-y-2">
+				<div class="text-lg font-semibold text-muted-foreground">
+					❤️ {$_('homepage.supported_by')}
+				</div>
+				<a href="https://www.mapbox.com/" target="_blank">
+					<Logo company="mapbox" class="w-60" />
+				</a>
+			</div>
+			{#await data.mapboxModule then mapboxModule}
+				<DocsContainer module={mapboxModule.default} />
+			{/await}
+		</div>
+	</div>
+</div>
diff --git a/website/src/routes/[[language]]/+page.ts b/website/src/routes/[[language]]/+page.ts
new file mode 100755
index 0000000..228fd63
--- /dev/null
+++ b/website/src/routes/[[language]]/+page.ts
@@ -0,0 +1,14 @@
+function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'fr';
+    return import(`./../../lib/docs/${language}/home/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { language } = params;
+
+    return {
+        fundingModule: getModule(language, 'funding'),
+        translationModule: getModule(language, 'translation'),
+        mapboxModule: getModule(language, 'mapbox'),
+    };
+}
\ No newline at end of file
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
new file mode 100755
index 0000000..aa6e058
--- /dev/null
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import Map from '$lib/components/Map.svelte';
+	import Menu from '$lib/components/Menu.svelte';
+	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import Resizer from '$lib/components/Resizer.svelte';
+	import { Toaster } from '$lib/components/ui/sonner';
+
+	import { observeFilesFromDatabase, settings } from '$lib/db';
+	import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { languages } from '$lib/languages';
+	import { getURLForLanguage } from '$lib/utils';
+	import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
+
+	const {
+		verticalFileView,
+		elevationProfile,
+		bottomPanelSize,
+		rightPanelSize,
+		additionalDatasets,
+		elevationFill
+	} = settings;
+
+	onMount(() => {
+		let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
+		let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
+		let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
+
+		observeFilesFromDatabase(urls.length === 0);
+
+		if (urls.length > 0) {
+			let downloads: Promise<File | null>[] = [];
+			urls.forEach((url) => {
+				downloads.push(
+					fetch(url)
+						.then((response) => response.blob())
+						.then((blob) => new File([blob], url.split('/').pop()))
+				);
+			});
+
+			Promise.all(downloads).then((files) => {
+				files = files.filter((file) => file !== null);
+				loadFiles(files);
+			});
+		}
+	});
+</script>
+
+<div class="fixed flex flex-row w-screen h-screen supports-dvh:h-dvh">
+	<div class="flex flex-col grow h-full min-w-0">
+		<div class="grow relative">
+			<Menu />
+			<div
+				class="absolute top-0 bottom-0 left-0 z-40 flex flex-col justify-center pointer-events-none"
+			>
+				<Toolbar />
+			</div>
+			<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
+			<StreetViewControl />
+			<LayerControl />
+			<GPXLayers />
+			<Toaster richColors />
+			{#if !$verticalFileView}
+				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+					<FileList orientation="horizontal" />
+				</div>
+			{/if}
+		</div>
+		{#if $elevationProfile}
+			<Resizer orientation="row" bind:after={$bottomPanelSize} minAfter={100} maxAfter={300} />
+		{/if}
+		<div
+			class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+			style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
+		>
+			<GPXStatistics
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				panelSize={$bottomPanelSize}
+				orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+			/>
+			{#if $elevationProfile}
+				<ElevationProfile
+					{gpxStatistics}
+					{slicedGPXStatistics}
+					bind:additionalDatasets={$additionalDatasets}
+					bind:elevationFill={$elevationFill}
+					panelSize={$bottomPanelSize}
+					class="py-2"
+				/>
+			{/if}
+		</div>
+	</div>
+	{#if $verticalFileView}
+		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
+		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
+	{/if}
+</div>
+
+<!-- hidden links for svelte crawling -->
+<div class="hidden">
+	{#each Object.entries(languages) as [lang, label]}
+		<a href={getURLForLanguage(lang, '/embed')}>
+			{label}
+		</a>
+	{/each}
+</div>
+
+<style lang="postcss">
+	div :global(.toaster.group) {
+		@apply absolute;
+		@apply right-2;
+		--offset: 50px !important;
+	}
+</style>
diff --git a/website/src/routes/[[language]]/embed/+page.svelte b/website/src/routes/[[language]]/embed/+page.svelte
new file mode 100755
index 0000000..f9d9626
--- /dev/null
+++ b/website/src/routes/[[language]]/embed/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import Embedding from '$lib/components/embedding/Embedding.svelte';
+	import {
+		getMergedEmbeddingOptions,
+		type EmbeddingOptions
+	} from '$lib/components/embedding/Embedding';
+
+	let embeddingOptions: EmbeddingOptions | undefined = undefined;
+
+	onMount(() => {
+		let options = $page.url.searchParams.get('options');
+		if (options === null) {
+			return;
+		}
+		options = JSON.parse(options);
+		if (options === null) {
+			return;
+		}
+		embeddingOptions = getMergedEmbeddingOptions(options);
+	});
+</script>
+
+{#if embeddingOptions}
+	<Embedding options={embeddingOptions} hash={$page.url.hash} />
+{/if}
diff --git a/website/src/routes/[[language]]/help/+layout.svelte b/website/src/routes/[[language]]/help/+layout.svelte
new file mode 100755
index 0000000..2655ca4
--- /dev/null
+++ b/website/src/routes/[[language]]/help/+layout.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { locale } from 'svelte-i18n';
+	import { page } from '$app/stores';
+	import { guides } from '$lib/components/docs/docs';
+
+	export let data: {
+		guideTitles: Record<string, string>;
+	};
+</script>
+
+<div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
+	<div class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0">
+		{#each Object.keys(guides) as guide}
+			<Button
+				variant="link"
+				href={getURLForLanguage($locale, `/help/${guide}`)}
+				class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
+					.params.guide === guide
+					? 'font-semibold text-foreground'
+					: ''}"
+			>
+				{data.guideTitles[guide]}
+			</Button>
+			{#each guides[guide] as subGuide}
+				<Button
+					variant="link"
+					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+					class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
+						.params.guide ===
+					guide + '/' + subGuide
+						? 'font-semibold text-foreground'
+						: ''}"
+				>
+					{data.guideTitles[`${guide}/${subGuide}`]}
+				</Button>
+			{/each}
+		{/each}
+	</div>
+	<div class="grow">
+		<slot />
+	</div>
+</div>
diff --git a/website/src/routes/[[language]]/help/+page.svelte b/website/src/routes/[[language]]/help/+page.svelte
new file mode 100755
index 0000000..33e1c8f
--- /dev/null
+++ b/website/src/routes/[[language]]/help/+page.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { locale } from 'svelte-i18n';
+	import { guides, guideIcons } from '$lib/components/docs/docs';
+
+	export let data: {
+		guideTitles: Record<string, string>;
+	};
+</script>
+
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+	{#each Object.keys(guides) as guide}
+		<Button
+			variant="outline"
+			href={getURLForLanguage($locale, `/help/${guide}`)}
+			class="min-h-36 h-full pt-6 pb-3 px-0"
+		>
+			<div class="flex flex-col w-full">
+				<div class="h-12 text-center text-5xl">
+					{guideIcons[guide]}
+				</div>
+				<div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6">
+					{data.guideTitles[guide]}
+				</div>
+				<div class="flex flex-row justify-center flex-wrap gap-x-6 px-6">
+					{#each guides[guide] as subGuide}
+						<Button
+							variant="link"
+							href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+							class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
+						>
+							<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
+							{data.guideTitles[`${guide}/${subGuide}`]}
+						</Button>
+					{/each}
+				</div>
+			</div>
+		</Button>
+	{/each}
+</div>
diff --git a/website/src/routes/[[language]]/help/[...guide]/+page.svelte b/website/src/routes/[[language]]/help/[...guide]/+page.svelte
new file mode 100755
index 0000000..b43b31b
--- /dev/null
+++ b/website/src/routes/[[language]]/help/[...guide]/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
+	import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+
+	export let data: {
+		guideModule: any;
+		guideTitles: Record<string, string>;
+	};
+
+	$: previousGuide = getPreviousGuide($page.params.guide);
+	$: nextGuide = getNextGuide($page.params.guide);
+</script>
+
+<div class="markdown flex flex-col gap-3">
+	<DocsContainer module={data.guideModule.default} />
+</div>
+
+<div class="flex flex-row flex-wrap gap-3 pt-6">
+	{#if previousGuide}
+		<Button
+			variant="outline"
+			class="mr-auto"
+			href={getURLForLanguage($locale, `/help/${previousGuide}`)}
+		>
+			<ChevronLeft size="14" class="mr-1 mt-0.5" />
+			{data.guideTitles[previousGuide]}
+		</Button>
+	{/if}
+	{#if nextGuide}
+		<Button
+			variant="outline"
+			class="ml-auto"
+			href={getURLForLanguage($locale, `/help/${nextGuide}`)}
+		>
+			{data.guideTitles[nextGuide]}
+			<ChevronRight size="14" class="ml-1 mt-0.5" />
+		</Button>
+	{/if}
+</div>
+
+<div class="flex flex-row flex-wrap justify-between items-start mt-10 gap-3">
+	<div class="flex flex-col items-start">
+		<p class="text-sm text-muted-foreground">{$_('docs.answer_not_found')}</p>
+		<Button
+			variant="link"
+			href="https://www.reddit.com/r/gpxstudio/"
+			target="_blank"
+			class="p-0 h-6 text-link"
+		>
+			<CornerDownRight size="16" class="mr-1" />
+			{$_('docs.ask_on_reddit')}
+		</Button>
+	</div>
+	{#if $locale === 'fr'}
+		<Button
+			variant="link"
+			href="https://github.com/gpxstudio/gpx.rnmkcy.eu/edit/dev/website/src/lib/docs/en/{$page.params
+				.guide}.mdx"
+			target="_blank"
+			class="p-0 h-6 ml-auto text-link"
+		>
+			<PenLine size="16" class="mr-1" />
+			Edit this page on GitHub
+		</Button>
+	{:else}
+		<Button
+			variant="link"
+			href="https://crowdin.com/project/gpxstudio/{$locale}"
+			target="_blank"
+			class="p-0 h-6 ml-auto text-link"
+		>
+			<PenLine size="16" class="mr-1" />
+			{$_('docs.translate')}
+		</Button>
+	{/if}
+</div>
diff --git a/website/src/routes/[[language]]/help/[...guide]/+page.ts b/website/src/routes/[[language]]/help/[...guide]/+page.ts
new file mode 100755
index 0000000..2e94fa7
--- /dev/null
+++ b/website/src/routes/[[language]]/help/[...guide]/+page.ts
@@ -0,0 +1,20 @@
+function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'fr';
+    let subguide = undefined;
+    if (guide.includes('/')) {
+        [guide, subguide] = guide.split('/');
+    }
+    return subguide
+        ? import(`./../../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
+        : import(`./../../../../lib/docs/${language}/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { guide, language } = params;
+
+    const guideModule = await getModule(language, guide);
+
+    return {
+        guideModule,
+    };
+}
\ No newline at end of file
diff --git a/website/static/favicon.png b/website/static/favicon.png
new file mode 100644
index 0000000..255e8d6
Binary files /dev/null and b/website/static/favicon.png differ
diff --git a/website/static/icon-dark.svg b/website/static/icon-dark.svg
new file mode 100644
index 0000000..6fc7a6c
--- /dev/null
+++ b/website/static/icon-dark.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="194.70944"
+   height="251.79291"
+   viewBox="0 0 194.70944 251.79291"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath64">
+      <path
+         d="M 418.129,207.977 H 632.177 V 422.024 H 418.129 Z"
+         id="path62" />
+    </clipPath>
+  </defs>
+  <g
+     id="g8"
+     transform="matrix(1.3333333,0,0,-1.3333333,-602.70643,545.7933)">
+    <g
+       id="g58">
+      <g
+         id="g60"
+         clip-path="url(#clipPath64)">
+        <g
+           id="g66"
+           transform="translate(525.0752,358.501)">
+          <path
+             d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.263 0.326,3.09 -1.208,6.079 -3.896,7.632 l -6.285,3.632 c -3.77,2.179 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.771 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.442 3.364,2.456 6.996,4.564 10.845,6.274 2.832,1.26 4.645,4.087 4.645,7.188 v 7.253 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.887 v -7.253 c 0,-3.101 1.812,-5.928 4.645,-7.188 3.848,-1.71 7.481,-3.818 10.845,-6.274 2.51,-1.831 5.867,-1.997 8.557,-0.442 l 6.287,3.632 C 53.443,9.679 58.26,8.388 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.59 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.632 0.218,-2.057 0.33,-4.147 0.33,-6.263 0,-2.116 -0.112,-4.205 -0.33,-6.264"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path68" />
+        </g>
+        <g
+           id="g70"
+           transform="translate(568.4053,407.8447)">
+          <path
+             d="m 0,0 -17,-8.491 -37.042,-79.437 21.423,-9.99 37.042,79.437 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path72" />
+        </g>
+        <g
+           id="g74"
+           transform="translate(516.3564,320.6426)">
+          <path
+             d="M 0,0 18.705,-8.723 54.892,68.881 51.03,85.017 36.187,77.603 Z m 19.43,-12.216 c -0.217,0 -0.433,0.047 -0.634,0.141 l -21.423,9.99 c -0.751,0.35 -1.076,1.242 -0.726,1.993 l 37.042,79.437 c 0.143,0.307 0.386,0.556 0.689,0.708 l 17,8.491 c 0.41,0.205 0.89,0.211 1.305,0.018 0.414,-0.194 0.718,-0.566 0.825,-1.01 L 57.931,69.07 c 0.079,-0.33 0.044,-0.676 -0.099,-0.983 L 20.79,-11.35 c -0.168,-0.36 -0.473,-0.639 -0.847,-0.775 -0.166,-0.061 -0.339,-0.091 -0.513,-0.091"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path76" />
+        </g>
+        <g
+           id="g78"
+           transform="translate(535.7866,309.9277)">
+          <path
+             d="m 0,0 -21.423,9.989 -37.042,-79.435 4.423,-18.482 17,8.491 z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path80" />
+        </g>
+        <g
+           id="g82"
+           transform="translate(478.9023,240.3213)">
+          <path
+             d="m 0,0 3.861,-16.136 14.844,7.414 36.186,77.603 -18.704,8.722 z m 2.842,-19.821 c -0.216,0 -0.432,0.047 -0.634,0.14 -0.415,0.194 -0.718,0.566 -0.825,1.011 L -3.04,-0.188 c -0.078,0.329 -0.043,0.675 0.1,0.982 l 37.042,79.435 c 0.349,0.751 1.242,1.076 1.993,0.726 l 21.423,-9.989 c 0.361,-0.168 0.64,-0.473 0.776,-0.847 0.136,-0.373 0.118,-0.786 -0.05,-1.146 L 21.202,-10.464 c -0.143,-0.307 -0.386,-0.557 -0.689,-0.708 l -17,-8.491 c -0.211,-0.106 -0.441,-0.158 -0.671,-0.158"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path84" />
+        </g>
+        <g
+           id="g86"
+           transform="translate(541.7656,314.9219)">
+          <path
+             d="m 0,0 c 0,-9.218 -7.473,-16.69 -16.69,-16.69 -9.218,0 -16.691,7.472 -16.691,16.69 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path88" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/website/static/icon.svg b/website/static/icon.svg
new file mode 100644
index 0000000..1778b8b
--- /dev/null
+++ b/website/static/icon.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="194.7095"
+   height="247.79253"
+   viewBox="0 0 194.70951 247.79253"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath96">
+      <path
+         d="M 410.129,207.977 H 624.177 V 422.024 H 410.129 Z"
+         id="path94" />
+    </clipPath>
+  </defs>
+  <g
+     id="g8"
+     transform="matrix(1.3333333,0,0,-1.3333333,-592.03971,543.79305)">
+    <g
+       id="g90">
+      <g
+         id="g92"
+         clip-path="url(#clipPath96)">
+        <g
+           id="g98"
+           transform="translate(517.0752,358.501)">
+          <path
+             d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.264 0.326,3.089 -1.208,6.078 -3.896,7.631 l -6.285,3.632 c -3.77,2.178 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.77 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.443 3.364,2.455 6.996,4.563 10.845,6.273 2.832,1.26 4.645,4.086 4.645,7.189 v 7.252 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.886 v -7.253 c 0,-3.103 1.812,-5.929 4.645,-7.189 3.848,-1.71 7.481,-3.818 10.845,-6.273 2.51,-1.832 5.867,-1.998 8.557,-0.443 l 6.287,3.632 C 53.443,9.679 58.26,8.387 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.591 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.631 0.218,-2.058 0.33,-4.148 0.33,-6.264 0,-2.116 -0.112,-4.205 -0.33,-6.264"
+             style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path100" />
+        </g>
+        <g
+           id="g102"
+           transform="translate(564.8286,389.3633)">
+          <path
+             d="m 0,0 -21.424,9.99 -37.041,-79.436 21.423,-9.991 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path104" />
+        </g>
+        <g
+           id="g106"
+           transform="translate(543.2061,399.4458)">
+          <path
+             d="m 0,0 17.2,8.399 4.621,-18.574 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path108" />
+        </g>
+        <g
+           id="g110"
+           transform="translate(469.3218,240.4814)">
+          <path
+             d="M 0,0 21.423,-9.99 58.465,69.445 37.042,79.436 Z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path112" />
+        </g>
+        <g
+           id="g114"
+           transform="translate(490.9443,230.3984)">
+          <path
+             d="m 0,0 -17.2,-8.398 -4.622,18.574 z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path116" />
+        </g>
+        <g
+           id="g118"
+           transform="translate(533.7656,314.9224)">
+          <path
+             d="m 0,0 c 0,-9.218 -7.473,-16.691 -16.69,-16.691 -9.218,0 -16.691,7.473 -16.691,16.691 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
+             style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path120" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/website/static/logo-dark.svg b/website/static/logo-dark.svg
new file mode 100644
index 0000000..3ad31ff
--- /dev/null
+++ b/website/static/logo-dark.svg
@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="1178.6102"
+   height="251.79297"
+   viewBox="0 0 1178.6102 251.79297"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath18">
+      <path
+         d="M 0,1260 H 1200 V 0 H 0 Z"
+         id="path16" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath64">
+      <path
+         d="M 418.129,207.977 H 632.177 V 422.024 H 418.129 Z"
+         id="path62" />
+    </clipPath>
+  </defs>
+  <g
+     id="g8"
+     transform="matrix(1.3333333,0,0,-1.3333333,-221.36172,545.79333)">
+    <g
+       id="g12">
+      <g
+         id="g14"
+         clip-path="url(#clipPath18)">
+        <g
+           id="g22"
+           transform="translate(232.4053,313.6836)">
+          <path
+             d="m 0,0 c 0,22.193 -11.968,30.28 -23.375,30.28 -14.959,0 -23.749,-11.871 -23.749,-29.075 0,-19.269 11.594,-27.699 23.001,-27.699 C -12.155,-26.494 0,-17.893 0,0 m 15.006,43.871 c 1.833,0 3.32,-1.486 3.32,-3.319 v -76.509 c 0,-28.387 -20.196,-38.602 -44.319,-38.602 -10.021,0 -21.107,1.47 -30.145,5.366 -0.433,0.186 -0.709,0.618 -0.709,1.089 l 2,14.243 c 0,0.884 0.936,1.458 1.718,1.043 7.85,-4.171 16.044,-6.257 25.266,-6.257 17.391,0 27.863,5.398 27.863,23.291 0,2.866 -3.378,4.372 -5.524,2.471 -5.548,-4.914 -12.87,-7.633 -21.965,-7.633 -19.822,0 -38.895,13.763 -38.895,41.806 0,25.29 15.147,44.215 38.895,44.215 9.531,0 16.72,-2.931 21.964,-7.817 C -3.429,35.305 0,36.87 0,39.734 v 0.818 c 0,1.833 1.486,3.319 3.319,3.319 z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path24" />
+        </g>
+        <g
+           id="g26"
+           transform="translate(333.7568,314.3721)">
+          <path
+             d="m 0,0 c 0,18.581 -10.659,29.592 -24.497,29.592 -12.341,0 -26.179,-7.399 -26.179,-29.764 0,-22.021 14.025,-30.279 25.432,-30.279 C -11.033,-30.451 0,-19.957 0,0 m -50.676,38.597 c 0,-2.851 3.367,-4.388 5.499,-2.495 5.86,5.202 13.751,8.285 23.673,8.285 25.431,0 40.391,-19.097 40.391,-44.215 0,-25.979 -15.708,-45.419 -40.765,-45.419 -9.372,0 -17.28,2.888 -23.33,8.231 -2.121,1.873 -5.468,0.301 -5.468,-2.528 V -74.1 c 0,-1.833 -1.486,-3.319 -3.32,-3.319 h -11.686 c -1.834,0 -3.319,1.486 -3.319,3.319 V 39.863 c 0,1.833 1.485,3.32 3.319,3.32 h 11.686 c 1.834,0 3.32,-1.487 3.32,-3.32 z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path28" />
+        </g>
+        <g
+           id="g30"
+           transform="translate(430.8999,270.3291)">
+          <path
+             d="m 0,0 h -12.5 c -1.125,0 -2.173,0.569 -2.785,1.513 l -17.064,26.305 c -1.289,1.989 -4.187,2.024 -5.525,0.068 L -55.951,1.445 C -56.569,0.541 -57.595,0 -58.691,0 h -11.917 c -2.715,0 -4.282,3.08 -2.683,5.274 l 27.106,37.191 c 0.837,1.148 0.85,2.703 0.031,3.866 l -25.24,35.835 c -1.549,2.199 0.024,5.231 2.714,5.231 h 12.548 c 1.128,0 2.18,-0.574 2.791,-1.523 l 16.089,-24.996 c 1.297,-2.015 4.236,-2.033 5.559,-0.035 l 16.591,25.067 c 0.615,0.929 1.655,1.487 2.769,1.487 H -0.09 c 2.717,0 4.283,-3.086 2.678,-5.28 l -26.32,-35.965 c -0.846,-1.156 -0.855,-2.725 -0.022,-3.89 L 2.7,5.249 C 4.271,3.053 2.7,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path32" />
+        </g>
+        <g
+           id="g34"
+           transform="translate(661.999,347.6797)">
+          <path
+             d="m 0,0 c 0,-1.817 -1.458,-3.296 -3.274,-3.319 -4.091,-0.051 -11.165,-0.128 -16.198,-0.128 -7.328,0 -11.601,-4.129 -11.601,-9.979 0,-7.742 7.785,-10.839 15.877,-14.968 9.923,-4.989 19.235,-11.354 19.235,-24.946 0,-15.828 -10.686,-24.946 -27.174,-24.946 -8.079,0 -15.698,0.307 -20.764,2.185 -1.293,0.48 -2.136,1.729 -2.136,3.108 v 8.33 c 0,2.352 2.387,3.978 4.558,3.074 5.266,-2.193 11.511,-2.933 17.579,-2.933 8.243,0 12.518,4.128 12.518,9.978 0,7.914 -7.176,11.183 -16.946,15.828 -8.855,4.129 -18.167,10.666 -18.167,24.774 0,15.828 12.06,24.602 26.716,24.602 7.286,0 10.416,-0.256 16.672,-0.664 C -1.36,9.883 0,8.433 0,6.684 Z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path36" />
+        </g>
+        <g
+           id="g38"
+           transform="translate(703.2998,296.4043)">
+          <path
+             d="m 0,0 c 0,-8.258 4.488,-12.559 13.09,-12.559 2.787,0 5.79,0.531 8.472,1.51 2.156,0.786 4.43,-0.83 4.43,-3.124 v -7.54 c 0,-1.396 -0.868,-2.652 -2.183,-3.123 -4.047,-1.45 -9.36,-2.175 -12.963,-2.175 -20.383,0 -29.359,9.979 -29.359,27.355 v 44.337 c 0,1.833 -1.486,3.319 -3.319,3.319 h -5.134 c -1.833,0 -3.319,1.486 -3.319,3.319 v 6.437 c 0,1.833 1.486,3.319 3.319,3.319 h 5.134 c 1.833,0 3.319,1.487 3.319,3.32 v 14.694 c 0,1.833 1.487,3.319 3.32,3.319 H -3.319 C -1.486,82.408 0,80.922 0,79.089 V 64.395 c 0,-1.833 1.486,-3.32 3.319,-3.32 h 18.232 c 1.833,0 3.319,-1.486 3.319,-3.319 V 51.319 C 24.87,49.486 23.384,48 21.551,48 H 3.319 C 1.486,48 0,46.514 0,44.681 Z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path40" />
+        </g>
+        <g
+           id="g42"
+           transform="translate(817.0576,354.1602)">
+          <path
+             d="m 0,0 v -80.587 c 0,-1.833 -1.486,-3.319 -3.319,-3.319 h -11.687 c -1.833,0 -3.319,1.486 -3.319,3.319 v 1.384 c 0,2.956 -3.523,4.385 -5.664,2.348 -5.663,-5.389 -13.782,-8.083 -23.882,-8.083 -18.699,0 -30.48,10.667 -30.48,28.731 V 0 c 0,1.833 1.487,3.319 3.32,3.319 h 11.873 c 1.833,0 3.319,-1.486 3.319,-3.319 v -52.078 c 0,-12.215 7.107,-18.409 17.952,-18.409 14.025,0 23.562,9.291 23.562,26.323 V 0 c 0,1.833 1.486,3.319 3.319,3.319 H -3.319 C -1.486,3.319 0,1.833 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path44" />
+        </g>
+        <g
+           id="g46"
+           transform="translate(896.3457,314.4687)">
+          <path
+             d="m 0,0 c 0,22.021 -14.586,29.42 -25.245,29.42 -13.838,0 -25.244,-10.151 -25.244,-30.796 0,-17.549 10.658,-29.247 24.683,-29.247 C -12.716,-30.623 0,-22.193 0,0 M 18.513,74.101 V -40.896 c 0,-1.833 -1.487,-3.319 -3.32,-3.319 H 3.319 C 1.486,-44.215 0,-42.729 0,-40.896 v 1.19 c 0,2.843 -3.357,4.391 -5.486,2.509 -5.883,-5.202 -13.665,-8.222 -23.499,-8.222 -26.179,0 -40.391,21.161 -40.391,44.387 0,27.699 17.203,45.247 40.765,45.247 9.109,0 17.063,-2.996 23.154,-8.335 C -3.335,34.02 0,35.597 0,38.419 v 35.682 c 0,1.833 1.486,3.319 3.319,3.319 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path48" />
+        </g>
+        <g
+           id="g50"
+           transform="translate(949.9541,376.2646)">
+          <path
+             d="m 0,0 c 0,-5.523 -4.478,-10 -10,-10 -5.523,0 -10,4.477 -10,10 0,5.522 4.477,10 10,10 C -4.478,10 0,5.522 0,0 m -15.883,-18.785 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319 v -80.587 c 0,-1.833 -1.487,-3.32 -3.32,-3.32 h -11.874 c -1.833,0 -3.319,1.487 -3.319,3.32 v 80.587 c 0,1.833 1.486,3.319 3.319,3.319"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path52" />
+        </g>
+        <g
+           id="g54"
+           transform="translate(979.041,313.6084)">
+          <path
+             d="m 0,0 c 0,-16.516 9.334,-30.623 25.762,-30.623 17.734,0 25.948,13.936 25.948,30.451 0,16.517 -7.094,30.968 -26.135,30.968 C 8.588,30.796 0,16.345 0,0 m -19.041,-0.516 c 0,25.634 17.361,45.591 44.803,45.591 29.869,0 45.176,-19.957 45.176,-44.903 0,-25.118 -16.054,-45.075 -45.176,-45.075 -28.935,0 -44.803,19.785 -44.803,44.387"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path56" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g58">
+      <g
+         id="g60"
+         clip-path="url(#clipPath64)">
+        <g
+           id="g66"
+           transform="translate(525.0752,358.501)">
+          <path
+             d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.263 0.326,3.09 -1.208,6.079 -3.896,7.632 l -6.285,3.632 c -3.77,2.179 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.771 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.442 3.364,2.456 6.996,4.564 10.845,6.274 2.832,1.26 4.645,4.087 4.645,7.188 v 7.253 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.887 v -7.253 c 0,-3.101 1.812,-5.928 4.645,-7.188 3.848,-1.71 7.481,-3.818 10.845,-6.274 2.51,-1.831 5.867,-1.997 8.557,-0.442 l 6.287,3.632 C 53.443,9.679 58.26,8.388 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.59 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.632 0.218,-2.057 0.33,-4.147 0.33,-6.263 0,-2.116 -0.112,-4.205 -0.33,-6.264"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path68" />
+        </g>
+        <g
+           id="g70"
+           transform="translate(568.4053,407.8447)">
+          <path
+             d="m 0,0 -17,-8.491 -37.042,-79.437 21.423,-9.99 37.042,79.437 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path72" />
+        </g>
+        <g
+           id="g74"
+           transform="translate(516.3564,320.6426)">
+          <path
+             d="M 0,0 18.705,-8.723 54.892,68.881 51.03,85.017 36.187,77.603 Z m 19.43,-12.216 c -0.217,0 -0.433,0.047 -0.634,0.141 l -21.423,9.99 c -0.751,0.35 -1.076,1.242 -0.726,1.993 l 37.042,79.437 c 0.143,0.307 0.386,0.556 0.689,0.708 l 17,8.491 c 0.41,0.205 0.89,0.211 1.305,0.018 0.414,-0.194 0.718,-0.566 0.825,-1.01 L 57.931,69.07 c 0.079,-0.33 0.044,-0.676 -0.099,-0.983 L 20.79,-11.35 c -0.168,-0.36 -0.473,-0.639 -0.847,-0.775 -0.166,-0.061 -0.339,-0.091 -0.513,-0.091"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path76" />
+        </g>
+        <g
+           id="g78"
+           transform="translate(535.7866,309.9277)">
+          <path
+             d="m 0,0 -21.423,9.989 -37.042,-79.435 4.423,-18.482 17,8.491 z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path80" />
+        </g>
+        <g
+           id="g82"
+           transform="translate(478.9023,240.3213)">
+          <path
+             d="m 0,0 3.861,-16.136 14.844,7.414 36.186,77.603 -18.704,8.722 z m 2.842,-19.821 c -0.216,0 -0.432,0.047 -0.634,0.14 -0.415,0.194 -0.718,0.566 -0.825,1.011 L -3.04,-0.188 c -0.078,0.329 -0.043,0.675 0.1,0.982 l 37.042,79.435 c 0.349,0.751 1.242,1.076 1.993,0.726 l 21.423,-9.989 c 0.361,-0.168 0.64,-0.473 0.776,-0.847 0.136,-0.373 0.118,-0.786 -0.05,-1.146 L 21.202,-10.464 c -0.143,-0.307 -0.386,-0.557 -0.689,-0.708 l -17,-8.491 c -0.211,-0.106 -0.441,-0.158 -0.671,-0.158"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path84" />
+        </g>
+        <g
+           id="g86"
+           transform="translate(541.7656,314.9219)">
+          <path
+             d="m 0,0 c 0,-9.218 -7.473,-16.69 -16.69,-16.69 -9.218,0 -16.691,7.472 -16.691,16.69 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path88" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/website/static/logo.svg b/website/static/logo.svg
new file mode 100644
index 0000000..543eb0c
--- /dev/null
+++ b/website/static/logo.svg
@@ -0,0 +1,239 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="1181.2769"
+   height="247.79251"
+   viewBox="0 0 1181.2769 247.79251"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath16">
+      <path
+         d="M 0,630 H 1200 V 0 H 0 Z"
+         id="path14" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath96">
+      <path
+         d="M 410.129,207.977 H 624.177 V 422.024 H 410.129 Z"
+         id="path94" />
+    </clipPath>
+  </defs>
+  <g
+     id="g8"
+     transform="matrix(1.3333333,0,0,-1.3333333,-209.36172,543.79306)">
+    <g
+       id="g10">
+      <g
+         id="g12"
+         clip-path="url(#clipPath16)">
+        <g
+           id="g18"
+           transform="translate(224.4053,313.6836)">
+          <path
+             d="m 0,0 c 0,22.193 -11.968,30.28 -23.375,30.28 -14.959,0 -23.749,-11.871 -23.749,-29.075 0,-19.269 11.594,-27.699 23.001,-27.699 C -12.155,-26.494 0,-17.893 0,0 m 15.006,43.871 c 1.833,0 3.32,-1.486 3.32,-3.32 v -76.508 c 0,-28.387 -20.196,-38.602 -44.319,-38.602 -10.021,0 -21.107,1.47 -30.145,5.366 -0.433,0.186 -0.709,0.618 -0.709,1.089 l 2,14.243 c 0,0.884 0.936,1.458 1.718,1.043 7.85,-4.171 16.044,-6.257 25.266,-6.257 17.391,0 27.863,5.398 27.863,23.291 0,2.866 -3.378,4.372 -5.524,2.471 -5.548,-4.914 -12.87,-7.633 -21.965,-7.633 -19.822,0 -38.895,13.763 -38.895,41.806 0,25.29 15.147,44.215 38.895,44.215 9.531,0 16.72,-2.931 21.964,-7.818 C -3.429,35.304 0,36.87 0,39.734 v 0.817 c 0,1.834 1.486,3.32 3.319,3.32 z"
+             style="display:inline;fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path20" />
+        </g>
+        <g
+           id="g22"
+           transform="translate(224.4053,313.6836)">
+          <path
+             d="m 0,0 c 0,22.193 -11.968,30.28 -23.375,30.28 -14.959,0 -23.749,-11.871 -23.749,-29.075 0,-19.269 11.594,-27.699 23.001,-27.699 C -12.155,-26.494 0,-17.893 0,0 Z m 15.006,43.871 c 1.833,0 3.32,-1.486 3.32,-3.32 v -76.508 c 0,-28.387 -20.196,-38.602 -44.319,-38.602 -10.021,0 -21.107,1.47 -30.145,5.366 -0.433,0.186 -0.709,0.618 -0.709,1.089 l 2,14.243 c 0,0.884 0.936,1.458 1.718,1.043 7.85,-4.171 16.044,-6.257 25.266,-6.257 17.391,0 27.863,5.398 27.863,23.291 0,2.866 -3.378,4.372 -5.524,2.471 -5.548,-4.914 -12.87,-7.633 -21.965,-7.633 -19.822,0 -38.895,13.763 -38.895,41.806 0,25.29 15.147,44.215 38.895,44.215 9.531,0 16.72,-2.931 21.964,-7.818 C -3.429,35.304 0,36.87 0,39.734 v 0.817 c 0,1.834 1.486,3.32 3.319,3.32 z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path24" />
+        </g>
+        <g
+           id="g26"
+           transform="translate(325.7568,314.3716)">
+          <path
+             d="m 0,0 c 0,18.581 -10.659,29.592 -24.497,29.592 -12.341,0 -26.179,-7.399 -26.179,-29.764 0,-22.021 14.025,-30.279 25.432,-30.279 C -11.033,-30.451 0,-19.957 0,0 m -50.676,38.597 c 0,-2.85 3.367,-4.388 5.499,-2.495 5.86,5.202 13.751,8.285 23.673,8.285 25.431,0 40.391,-19.097 40.391,-44.215 0,-25.978 -15.708,-45.419 -40.765,-45.419 -9.372,0 -17.28,2.888 -23.33,8.232 -2.121,1.873 -5.468,0.301 -5.468,-2.528 v -34.556 c 0,-1.833 -1.486,-3.319 -3.32,-3.319 h -11.686 c -1.834,0 -3.319,1.486 -3.319,3.319 V 39.863 c 0,1.834 1.485,3.32 3.319,3.32 h 11.686 c 1.834,0 3.32,-1.486 3.32,-3.32 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path28" />
+        </g>
+        <g
+           id="g30"
+           transform="translate(325.7568,314.3716)">
+          <path
+             d="m 0,0 c 0,18.581 -10.659,29.592 -24.497,29.592 -12.341,0 -26.179,-7.399 -26.179,-29.764 0,-22.021 14.025,-30.279 25.432,-30.279 C -11.033,-30.451 0,-19.957 0,0 Z m -50.676,38.597 c 0,-2.85 3.367,-4.388 5.499,-2.495 5.86,5.202 13.751,8.285 23.673,8.285 25.431,0 40.391,-19.097 40.391,-44.215 0,-25.978 -15.708,-45.419 -40.765,-45.419 -9.372,0 -17.28,2.888 -23.33,8.232 -2.121,1.873 -5.468,0.301 -5.468,-2.528 v -34.556 c 0,-1.833 -1.486,-3.319 -3.32,-3.319 h -11.686 c -1.834,0 -3.319,1.486 -3.319,3.319 V 39.863 c 0,1.834 1.485,3.32 3.319,3.32 h 11.686 c 1.834,0 3.32,-1.486 3.32,-3.32 z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path32" />
+        </g>
+        <g
+           id="g34"
+           transform="translate(422.8999,270.3291)">
+          <path
+             d="m 0,0 h -12.5 c -1.125,0 -2.173,0.569 -2.785,1.513 l -17.064,26.305 c -1.289,1.989 -4.187,2.024 -5.525,0.068 L -55.951,1.445 C -56.569,0.541 -57.595,0 -58.691,0 h -11.917 c -2.715,0 -4.282,3.08 -2.683,5.274 l 27.106,37.191 c 0.837,1.148 0.85,2.703 0.031,3.866 l -25.24,35.836 c -1.549,2.199 0.024,5.23 2.714,5.23 h 12.548 c 1.128,0 2.18,-0.573 2.791,-1.522 l 16.089,-24.997 c 1.297,-2.015 4.236,-2.033 5.559,-0.035 l 16.591,25.067 c 0.615,0.929 1.655,1.487 2.769,1.487 H -0.09 c 2.717,0 4.283,-3.086 2.678,-5.279 l -26.32,-35.966 c -0.846,-1.156 -0.855,-2.725 -0.022,-3.89 L 2.7,5.249 C 4.271,3.053 2.7,0 0,0"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path36" />
+        </g>
+        <g
+           id="g38"
+           transform="translate(422.8999,270.3291)">
+          <path
+             d="m 0,0 h -12.5 c -1.125,0 -2.173,0.569 -2.785,1.513 l -17.064,26.305 c -1.289,1.989 -4.187,2.024 -5.525,0.068 L -55.951,1.445 C -56.569,0.541 -57.595,0 -58.691,0 h -11.917 c -2.715,0 -4.282,3.08 -2.683,5.274 l 27.106,37.191 c 0.837,1.148 0.85,2.703 0.031,3.866 l -25.24,35.836 c -1.549,2.199 0.024,5.23 2.714,5.23 h 12.548 c 1.128,0 2.18,-0.573 2.791,-1.522 l 16.089,-24.997 c 1.297,-2.015 4.236,-2.033 5.559,-0.035 l 16.591,25.067 c 0.615,0.929 1.655,1.487 2.769,1.487 H -0.09 c 2.717,0 4.283,-3.086 2.678,-5.279 l -26.32,-35.966 c -0.846,-1.156 -0.855,-2.725 -0.022,-3.89 L 2.7,5.249 C 4.271,3.053 2.7,0 0,0 Z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path40" />
+        </g>
+        <g
+           id="g42"
+           transform="translate(653.999,347.6792)">
+          <path
+             d="m 0,0 c 0,-1.817 -1.458,-3.296 -3.274,-3.318 -4.091,-0.051 -11.165,-0.129 -16.198,-0.129 -7.328,0 -11.601,-4.129 -11.601,-9.979 0,-7.742 7.785,-10.839 15.877,-14.968 9.923,-4.989 19.235,-11.354 19.235,-24.945 0,-15.828 -10.686,-24.947 -27.174,-24.947 -8.079,0 -15.698,0.308 -20.764,2.186 -1.293,0.479 -2.136,1.728 -2.136,3.107 v 8.33 c 0,2.353 2.387,3.979 4.558,3.075 5.266,-2.194 11.511,-2.934 17.579,-2.934 8.243,0 12.518,4.129 12.518,9.979 0,7.914 -7.176,11.182 -16.946,15.828 -8.855,4.129 -18.167,10.665 -18.167,24.773 0,15.828 12.06,24.602 26.716,24.602 7.286,0 10.416,-0.255 16.672,-0.663 C -1.36,9.883 0,8.434 0,6.685 Z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path44" />
+        </g>
+        <g
+           id="g46"
+           transform="translate(653.999,347.6792)">
+          <path
+             d="m 0,0 c 0,-1.817 -1.458,-3.296 -3.274,-3.318 -4.091,-0.051 -11.165,-0.129 -16.198,-0.129 -7.328,0 -11.601,-4.129 -11.601,-9.979 0,-7.742 7.785,-10.839 15.877,-14.968 9.923,-4.989 19.235,-11.354 19.235,-24.945 0,-15.828 -10.686,-24.947 -27.174,-24.947 -8.079,0 -15.698,0.308 -20.764,2.186 -1.293,0.479 -2.136,1.728 -2.136,3.107 v 8.33 c 0,2.353 2.387,3.979 4.558,3.075 5.266,-2.194 11.511,-2.934 17.579,-2.934 8.243,0 12.518,4.129 12.518,9.979 0,7.914 -7.176,11.182 -16.946,15.828 -8.855,4.129 -18.167,10.665 -18.167,24.773 0,15.828 12.06,24.602 26.716,24.602 7.286,0 10.416,-0.255 16.672,-0.663 C -1.36,9.883 0,8.434 0,6.685 Z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path48" />
+        </g>
+        <g
+           id="g50"
+           transform="translate(695.2998,296.4043)">
+          <path
+             d="m 0,0 c 0,-8.258 4.488,-12.559 13.09,-12.559 2.787,0 5.79,0.531 8.472,1.51 2.156,0.786 4.43,-0.83 4.43,-3.124 v -7.54 c 0,-1.396 -0.868,-2.652 -2.183,-3.123 -4.047,-1.45 -9.36,-2.175 -12.963,-2.175 -20.383,0 -29.359,9.979 -29.359,27.355 V 44.68 c 0,1.834 -1.486,3.32 -3.319,3.32 h -5.134 c -1.833,0 -3.319,1.486 -3.319,3.319 v 6.436 c 0,1.834 1.486,3.32 3.319,3.32 h 5.134 c 1.833,0 3.319,1.486 3.319,3.319 v 14.694 c 0,1.834 1.487,3.32 3.32,3.32 H -3.319 C -1.486,82.408 0,80.922 0,79.088 V 64.394 c 0,-1.833 1.486,-3.319 3.319,-3.319 h 18.232 c 1.833,0 3.319,-1.486 3.319,-3.32 V 51.319 C 24.87,49.486 23.384,48 21.551,48 H 3.319 C 1.486,48 0,46.514 0,44.68 Z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path52" />
+        </g>
+        <g
+           id="g54"
+           transform="translate(695.2998,296.4043)">
+          <path
+             d="m 0,0 c 0,-8.258 4.488,-12.559 13.09,-12.559 2.787,0 5.79,0.531 8.472,1.51 2.156,0.786 4.43,-0.83 4.43,-3.124 v -7.54 c 0,-1.396 -0.868,-2.652 -2.183,-3.123 -4.047,-1.45 -9.36,-2.175 -12.963,-2.175 -20.383,0 -29.359,9.979 -29.359,27.355 V 44.68 c 0,1.834 -1.486,3.32 -3.319,3.32 h -5.134 c -1.833,0 -3.319,1.486 -3.319,3.319 v 6.436 c 0,1.834 1.486,3.32 3.319,3.32 h 5.134 c 1.833,0 3.319,1.486 3.319,3.319 v 14.694 c 0,1.834 1.487,3.32 3.32,3.32 H -3.319 C -1.486,82.408 0,80.922 0,79.088 V 64.394 c 0,-1.833 1.486,-3.319 3.319,-3.319 h 18.232 c 1.833,0 3.319,-1.486 3.319,-3.32 V 51.319 C 24.87,49.486 23.384,48 21.551,48 H 3.319 C 1.486,48 0,46.514 0,44.68 Z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path56" />
+        </g>
+        <g
+           id="g58"
+           transform="translate(809.0576,354.1597)">
+          <path
+             d="m 0,0 v -80.586 c 0,-1.833 -1.486,-3.32 -3.319,-3.32 h -11.687 c -1.833,0 -3.319,1.487 -3.319,3.32 v 1.383 c 0,2.956 -3.523,4.385 -5.664,2.348 -5.663,-5.389 -13.782,-8.083 -23.882,-8.083 -18.699,0 -30.48,10.667 -30.48,28.731 V 0 c 0,1.833 1.487,3.319 3.32,3.319 h 11.873 c 1.833,0 3.319,-1.486 3.319,-3.319 v -52.078 c 0,-12.214 7.107,-18.409 17.952,-18.409 14.025,0 23.562,9.291 23.562,26.323 V 0 c 0,1.833 1.486,3.319 3.319,3.319 H -3.319 C -1.486,3.319 0,1.833 0,0"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path60" />
+        </g>
+        <g
+           id="g62"
+           transform="translate(809.0576,354.1597)">
+          <path
+             d="m 0,0 v -80.586 c 0,-1.833 -1.486,-3.32 -3.319,-3.32 h -11.687 c -1.833,0 -3.319,1.487 -3.319,3.32 v 1.383 c 0,2.956 -3.523,4.385 -5.664,2.348 -5.663,-5.389 -13.782,-8.083 -23.882,-8.083 -18.699,0 -30.48,10.667 -30.48,28.731 V 0 c 0,1.833 1.487,3.319 3.32,3.319 h 11.873 c 1.833,0 3.319,-1.486 3.319,-3.319 v -52.078 c 0,-12.214 7.107,-18.409 17.952,-18.409 14.025,0 23.562,9.291 23.562,26.323 V 0 c 0,1.833 1.486,3.319 3.319,3.319 H -3.319 C -1.486,3.319 0,1.833 0,0 Z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path64" />
+        </g>
+        <g
+           id="g66"
+           transform="translate(888.3457,314.4683)">
+          <path
+             d="m 0,0 c 0,22.021 -14.586,29.42 -25.245,29.42 -13.838,0 -25.244,-10.151 -25.244,-30.795 0,-17.549 10.658,-29.248 24.683,-29.248 C -12.716,-30.623 0,-22.193 0,0 M 18.513,74.101 V -40.895 c 0,-1.833 -1.487,-3.319 -3.32,-3.319 H 3.319 C 1.486,-44.214 0,-42.728 0,-40.895 v 1.189 c 0,2.843 -3.357,4.391 -5.486,2.509 -5.883,-5.202 -13.665,-8.221 -23.499,-8.221 -26.179,0 -40.391,21.161 -40.391,44.386 0,27.699 17.203,45.247 40.765,45.247 9.109,0 17.063,-2.995 23.154,-8.335 C -3.335,34.02 0,35.597 0,38.419 v 35.682 c 0,1.833 1.486,3.319 3.319,3.319 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path68" />
+        </g>
+        <g
+           id="g70"
+           transform="translate(888.3457,314.4683)">
+          <path
+             d="m 0,0 c 0,22.021 -14.586,29.42 -25.245,29.42 -13.838,0 -25.244,-10.151 -25.244,-30.795 0,-17.549 10.658,-29.248 24.683,-29.248 C -12.716,-30.623 0,-22.193 0,0 Z M 18.513,74.101 V -40.895 c 0,-1.833 -1.487,-3.319 -3.32,-3.319 H 3.319 C 1.486,-44.214 0,-42.728 0,-40.895 v 1.189 c 0,2.843 -3.357,4.391 -5.486,2.509 -5.883,-5.202 -13.665,-8.221 -23.499,-8.221 -26.179,0 -40.391,21.161 -40.391,44.386 0,27.699 17.203,45.247 40.765,45.247 9.109,0 17.063,-2.995 23.154,-8.335 C -3.335,34.02 0,35.597 0,38.419 v 35.682 c 0,1.833 1.486,3.319 3.319,3.319 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319 z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path72" />
+        </g>
+        <g
+           id="g74"
+           transform="translate(941.9541,376.2642)">
+          <path
+             d="m 0,0 c 0,-5.522 -4.478,-10 -10,-10 -5.523,0 -10,4.478 -10,10 0,5.523 4.477,10 10,10 C -4.478,10 0,5.523 0,0 m -15.883,-18.785 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319 v -80.587 c 0,-1.833 -1.487,-3.319 -3.32,-3.319 h -11.874 c -1.833,0 -3.319,1.486 -3.319,3.319 v 80.587 c 0,1.833 1.486,3.319 3.319,3.319"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path76" />
+        </g>
+        <g
+           id="g78"
+           transform="translate(941.9541,376.2642)">
+          <path
+             d="m 0,0 c 0,-5.522 -4.478,-10 -10,-10 -5.523,0 -10,4.478 -10,10 0,5.523 4.477,10 10,10 C -4.478,10 0,5.523 0,0 Z m -15.883,-18.785 h 11.874 c 1.833,0 3.32,-1.486 3.32,-3.319 v -80.587 c 0,-1.833 -1.487,-3.319 -3.32,-3.319 h -11.874 c -1.833,0 -3.319,1.486 -3.319,3.319 v 80.587 c 0,1.833 1.486,3.319 3.319,3.319 z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path80" />
+        </g>
+        <g
+           id="g82"
+           transform="translate(971.041,313.6084)">
+          <path
+             d="m 0,0 c 0,-16.516 9.334,-30.623 25.762,-30.623 17.734,0 25.948,13.936 25.948,30.451 0,16.516 -7.094,30.967 -26.135,30.967 C 8.588,30.795 0,16.344 0,0 m -19.041,-0.516 c 0,25.634 17.361,45.591 44.803,45.591 29.869,0 45.176,-19.957 45.176,-44.903 0,-25.118 -16.054,-45.075 -45.176,-45.075 -28.935,0 -44.803,19.785 -44.803,44.387"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path84" />
+        </g>
+        <g
+           id="g86"
+           transform="translate(971.041,313.6084)">
+          <path
+             d="m 0,0 c 0,-16.516 9.334,-30.623 25.762,-30.623 17.734,0 25.948,13.936 25.948,30.451 0,16.516 -7.094,30.967 -26.135,30.967 C 8.588,30.795 0,16.344 0,0 Z m -19.041,-0.516 c 0,25.634 17.361,45.591 44.803,45.591 29.869,0 45.176,-19.957 45.176,-44.903 0,-25.118 -16.054,-45.075 -45.176,-45.075 -28.935,0 -44.803,19.785 -44.803,44.387 z"
+             style="fill:none;stroke:#3b3735;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path88" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g90">
+      <g
+         id="g92"
+         clip-path="url(#clipPath96)">
+        <g
+           id="g98"
+           transform="translate(517.0752,358.501)">
+          <path
+             d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.264 0.326,3.089 -1.208,6.078 -3.896,7.631 l -6.285,3.632 c -3.77,2.178 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.77 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.443 3.364,2.455 6.996,4.563 10.845,6.273 2.832,1.26 4.645,4.086 4.645,7.189 v 7.252 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.886 v -7.253 c 0,-3.103 1.812,-5.929 4.645,-7.189 3.848,-1.71 7.481,-3.818 10.845,-6.273 2.51,-1.832 5.867,-1.998 8.557,-0.443 l 6.287,3.632 C 53.443,9.679 58.26,8.387 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.591 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.631 0.218,-2.058 0.33,-4.148 0.33,-6.264 0,-2.116 -0.112,-4.205 -0.33,-6.264"
+             style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path100" />
+        </g>
+        <g
+           id="g102"
+           transform="translate(564.8286,389.3633)">
+          <path
+             d="m 0,0 -21.424,9.99 -37.041,-79.436 21.423,-9.991 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path104" />
+        </g>
+        <g
+           id="g106"
+           transform="translate(543.2061,399.4458)">
+          <path
+             d="m 0,0 17.2,8.399 4.621,-18.574 z"
+             style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path108" />
+        </g>
+        <g
+           id="g110"
+           transform="translate(469.3218,240.4814)">
+          <path
+             d="M 0,0 21.423,-9.99 58.465,69.445 37.042,79.436 Z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path112" />
+        </g>
+        <g
+           id="g114"
+           transform="translate(490.9443,230.3984)">
+          <path
+             d="m 0,0 -17.2,-8.398 -4.622,18.574 z"
+             style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path116" />
+        </g>
+        <g
+           id="g118"
+           transform="translate(533.7656,314.9224)">
+          <path
+             d="m 0,0 c 0,-9.218 -7.473,-16.691 -16.69,-16.691 -9.218,0 -16.691,7.473 -16.691,16.691 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
+             style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path120" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/website/static/mapbox-logo-black.svg b/website/static/mapbox-logo-black.svg
new file mode 100644
index 0000000..a0cbd94
--- /dev/null
+++ b/website/static/mapbox-logo-black.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="new" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 180" style="enable-background:new 0 0 800 180;" xml:space="preserve">
+<title>Mapbox_Logo_08</title>
+<g>
+	<g>
+		<path d="M594.6,49.8c-9.9,0-19.4,4.1-26.3,11.3V23c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2v103c0,1.2,1,2.2,2.2,2.2
+			h13.4c1.2,0,2.2-1,2.2-2.2v0v-7.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2S615.5,49.8,594.6,49.8z M591.5,114.1
+			c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1S604.2,114.1,591.5,114.1L591.5,114.1z"
+			/>
+		<path d="M681.7,49.8c-22.6,0-40.9,18-40.9,40.2s18.3,40.2,40.9,40.2c22.6,0,40.9-18,40.9-40.2S704.3,49.8,681.7,49.8z
+			 M681.6,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1s23.1,10.8,23.1,24.1S694.3,114.1,681.6,114.1L681.6,114.1z"/>
+		<path d="M431.6,51.8h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v7.1c-6.9-7.2-16.3-11.3-26.3-11.3c-20.9,0-37.8,18-37.8,40.2
+			s16.9,40.2,37.8,40.2c9.9,0,19.4-4.1,26.3-11.3v7.1c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0V54
+			C433.8,52.8,432.8,51.8,431.6,51.8z M392.8,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1c12.7,0,23,10.6,23.1,23.8v0.6
+			C415.8,103.5,405.5,114.1,392.8,114.1L392.8,114.1z"/>
+		<path d="M498.5,49.8c-9.9,0-19.4,4.1-26.3,11.3V54c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v103
+			c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0v-38.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S519.4,49.8,498.5,49.8z M495.4,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S508.2,114.1,495.4,114.1L495.4,114.1z"/>
+		<path d="M311.8,49.8c-10,0.1-19.1,5.9-23.4,15c-4.9-9.3-14.7-15.1-25.2-15c-8.2,0-15.9,4-20.7,10.6V54c0-1.2-1-2.2-2.2-2.2l0,0
+			h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v72c0,1.2,1,2.2,2.2,2.2h0h13.4c1.2,0,2.2-1,2.2-2.2v0V82.9c0.5-9.6,7.2-17.3,15.4-17.3
+			c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-44.8c1.2-8.8,7.5-15.6,15.2-15.6
+			c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-49.5
+			C339.9,61.7,327.3,49.8,311.8,49.8z"/>
+		<path d="M794.7,125.1l-23.2-35.3l23-35c0.6-0.9,0.3-2.2-0.6-2.8c-0.3-0.2-0.7-0.3-1.1-0.3h-15.5c-1.2,0-2.3,0.6-2.9,1.6L760.9,76
+			l-13.5-22.6c-0.6-1-1.7-1.6-2.9-1.6h-15.5c-1.1,0-2,0.9-2,2c0,0.4,0.1,0.8,0.3,1.1l23,35l-23.2,35.3c-0.6,0.9-0.3,2.2,0.6,2.8
+			c0.3,0.2,0.7,0.3,1.1,0.3h15.5c1.2,0,2.3-0.6,2.9-1.6l13.8-23l13.8,23c0.6,1,1.7,1.6,2.9,1.6H793c1.1,0,2-0.9,2-2
+			C795,125.9,794.9,125.5,794.7,125.1z"/>
+	</g>
+	<g>
+		<path d="M93.9,1.1C44.8,1.1,5,40.9,5,90s39.8,88.9,88.9,88.9s88.9-39.8,88.9-88.9C182.8,40.9,143,1.1,93.9,1.1z M136.1,111.8
+			c-30.4,30.4-84.7,20.7-84.7,20.7s-9.8-54.2,20.7-84.7C89,30.9,117,31.6,134.7,49.2S153,94.9,136.1,111.8L136.1,111.8z"/>
+		<polygon points="104.1,53.2 95.4,71.1 77.5,79.8 95.4,88.5 104.1,106.4 112.8,88.5 130.7,79.8 112.8,71.1 		"/>
+	</g>
+</g>
+</svg>
diff --git a/website/static/mapbox-logo-white.svg b/website/static/mapbox-logo-white.svg
new file mode 100644
index 0000000..8d62aef
--- /dev/null
+++ b/website/static/mapbox-logo-white.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="new" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 180" style="enable-background:new 0 0 800 180;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>Mapbox_Logo_08</title>
+<g>
+	<g>
+		<path class="st0" d="M594.6,49.8c-9.9,0-19.4,4.1-26.3,11.3V23c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2v103
+			c0,1.2,1,2.2,2.2,2.2h13.4c1.2,0,2.2-1,2.2-2.2v0v-7.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S615.5,49.8,594.6,49.8z M591.5,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S604.2,114.1,591.5,114.1L591.5,114.1z"/>
+		<path class="st0" d="M681.7,49.8c-22.6,0-40.9,18-40.9,40.2s18.3,40.2,40.9,40.2c22.6,0,40.9-18,40.9-40.2S704.3,49.8,681.7,49.8z
+			 M681.6,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1s23.1,10.8,23.1,24.1S694.3,114.1,681.6,114.1L681.6,114.1z"/>
+		<path class="st0" d="M431.6,51.8h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v7.1c-6.9-7.2-16.3-11.3-26.3-11.3
+			c-20.9,0-37.8,18-37.8,40.2s16.9,40.2,37.8,40.2c9.9,0,19.4-4.1,26.3-11.3v7.1c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2
+			v0V54C433.8,52.8,432.8,51.8,431.6,51.8z M392.8,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1c12.7,0,23,10.6,23.1,23.8
+			v0.6C415.8,103.5,405.5,114.1,392.8,114.1L392.8,114.1z"/>
+		<path class="st0" d="M498.5,49.8c-9.9,0-19.4,4.1-26.3,11.3V54c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0
+			v103c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0v-38.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S519.4,49.8,498.5,49.8z M495.4,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S508.2,114.1,495.4,114.1L495.4,114.1z"/>
+		<path class="st0" d="M311.8,49.8c-10,0.1-19.1,5.9-23.4,15c-4.9-9.3-14.7-15.1-25.2-15c-8.2,0-15.9,4-20.7,10.6V54
+			c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v72c0,1.2,1,2.2,2.2,2.2h0h13.4c1.2,0,2.2-1,2.2-2.2v0V82.9
+			c0.5-9.6,7.2-17.3,15.4-17.3c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-44.8
+			c1.2-8.8,7.5-15.6,15.2-15.6c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-49.5
+			C339.9,61.7,327.3,49.8,311.8,49.8z"/>
+		<path class="st0" d="M794.7,125.1l-23.2-35.3l23-35c0.6-0.9,0.3-2.2-0.6-2.8c-0.3-0.2-0.7-0.3-1.1-0.3h-15.5
+			c-1.2,0-2.3,0.6-2.9,1.6L760.9,76l-13.5-22.6c-0.6-1-1.7-1.6-2.9-1.6h-15.5c-1.1,0-2,0.9-2,2c0,0.4,0.1,0.8,0.3,1.1l23,35
+			l-23.2,35.3c-0.6,0.9-0.3,2.2,0.6,2.8c0.3,0.2,0.7,0.3,1.1,0.3h15.5c1.2,0,2.3-0.6,2.9-1.6l13.8-23l13.8,23c0.6,1,1.7,1.6,2.9,1.6
+			H793c1.1,0,2-0.9,2-2C795,125.9,794.9,125.5,794.7,125.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M93.9,1.1C44.8,1.1,5,40.9,5,90s39.8,88.9,88.9,88.9s88.9-39.8,88.9-88.9C182.8,40.9,143,1.1,93.9,1.1z
+			 M136.1,111.8c-30.4,30.4-84.7,20.7-84.7,20.7s-9.8-54.2,20.7-84.7C89,30.9,117,31.6,134.7,49.2S153,94.9,136.1,111.8L136.1,111.8
+			z"/>
+		<polygon class="st0" points="104.1,53.2 95.4,71.1 77.5,79.8 95.4,88.5 104.1,106.4 112.8,88.5 130.7,79.8 112.8,71.1 		"/>
+	</g>
+</g>
+</svg>
diff --git a/website/static/og_logo.png b/website/static/og_logo.png
new file mode 100644
index 0000000..63ee1a1
Binary files /dev/null and b/website/static/og_logo.png differ
diff --git a/website/static/robots.txt b/website/static/robots.txt
new file mode 100644
index 0000000..a7e54aa
--- /dev/null
+++ b/website/static/robots.txt
@@ -0,0 +1,6 @@
+User-agent: *
+Disallow: /*?*
+Disallow: /embed
+Disallow: /*/embed
+Disallow: /404
+Sitemap: https://gpx.studio/sitemap.xml
diff --git a/website/svelte.config.js b/website/svelte.config.js
new file mode 100644
index 0000000..b779364
--- /dev/null
+++ b/website/svelte.config.js
@@ -0,0 +1,32 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from 'mdsvex';
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+    extensions: ['.mdx']
+};
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    extensions: ['.svelte', ...mdsvexOptions.extensions],
+    preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
+    kit: {
+        adapter: adapter({
+            pages: 'build',
+            assets: 'build',
+            precompress: false,
+            strict: true
+        }),
+        paths: {
+            base: process.argv.includes('dev') ? '' : process.env.BASE_PATH,
+            relative: false,
+        },
+        prerender: {
+            entries: ['/', '/404'],
+            crawl: true,
+        }
+    }
+};
+
+export default config;
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
new file mode 100644
index 0000000..f5ef535
--- /dev/null
+++ b/website/tailwind.config.js
@@ -0,0 +1,65 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+    darkMode: ["class"],
+    content: ["./src/**/*.{html,js,svelte,ts}"],
+    safelist: ["dark"],
+    theme: {
+        extend: {
+            colors: {
+                border: "hsl(var(--border) / <alpha-value>)",
+                input: "hsl(var(--input) / <alpha-value>)",
+                ring: "hsl(var(--ring) / <alpha-value>)",
+                background: "hsl(var(--background) / <alpha-value>)",
+                foreground: "hsl(var(--foreground) / <alpha-value>)",
+                primary: {
+                    DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+                    foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+                    foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+                    foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+                    foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+                    foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+                    foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card) / <alpha-value>)",
+                    foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+                },
+                support: "rgb(var(--support))",
+                link: "rgb(var(--link))"
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)"
+            },
+            fontFamily: {
+                sans: [...fontFamily.sans]
+            },
+            screens: {
+                "xs": "540px",
+            }
+        },
+        supports: {
+            dvh: 'height: 100dvh',
+        }
+    },
+};
+
+export default config;
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 0000000..fc93cbd
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/website/vite.config.ts b/website/vite.config.ts
new file mode 100644
index 0000000..a658458
--- /dev/null
+++ b/website/vite.config.ts
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { enhancedImages } from '@sveltejs/enhanced-img';
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+export default defineConfig({
+    plugins: [nodePolyfills(), enhancedImages(), sveltekit()]
+});