diff --git a/website/src/lib/docs/id/getting-started.mdx b/website/src/lib/docs/id/getting-started.mdx
new file mode 100644
index 00000000..956a4ebc
--- /dev/null
+++ b/website/src/lib/docs/id/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.studio**!
+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.studio 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 tree 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.