diff --git a/docs/css/styles.css b/docs/css/styles.css
index 88c5cbce62afa921da02e7a549f143739e266ddf..916ab87bf34cec3575018bc5d35d2e7be2277830 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -1372,4 +1372,11 @@ a:hover.back-to-top {
     font-size: 1.2rem;
     font-weight: 400;
     text-transform: none;
+}
+
+.mockup {
+    display:inline;
+    margin:1rem 1rem 1rem 0;
+    border:1px solid black;
+    border-radius:1rem;
 }
\ No newline at end of file
diff --git a/docs/guide/app/getting-started.md b/docs/guide/app/getting-started.md
new file mode 100644
index 0000000000000000000000000000000000000000..05b991743c980f5898f96e4956538484e00348a3
--- /dev/null
+++ b/docs/guide/app/getting-started.md
@@ -0,0 +1,44 @@
+# Démarrage
+
+Bienvenue sur ePoc, l'application mobile d'apprentissage sur mobile proposée par Inria. Cette page vous guidera à travers les fonctionnalités principales de l'application.
+
+## Page d'accueil
+
+La page d'accueil liste toutes les ePocs proposés par Inria. Vous pouvez également importer vos propres ePocs ou ceux de la communauté en utilisant le bouton d'importation.
+
+Pour plus de détails sur l'importation d'ePocs, consultez la page de documentation [import.md](import.md).
+
+![Page d'accueil](/images/app-accueil.png){ width="300" class="mockup" }
+![Page d'accueil import](/images/app-accueil-import.png){ width="300" class="mockup" }
+
+## Page de présentation des cours
+
+Chaque cours dispose d'une page de présentation où vous pouvez retrouver :
+
+- Un teaser du cours
+- Les objectifs pédagogiques
+- Les auteurs du cours
+- Un résumé de la formation
+
+![Page de présentation](/images/app-epoc-overview.png){ width="300" class="mockup" }
+
+## Télécharger et lancer une formation
+
+Pour télécharger un ePoc et lancer la formation, suivez ces étapes :
+
+1. Sélectionnez le cours que vous souhaitez suivre.
+2. Cliquez sur le bouton de téléchargement.
+3. Une fois le téléchargement terminé, cliquez sur "Découvrir".
+
+## Menu contextuel d'un ePoc
+
+Chaque ePoc dispose d'un menu contextuel permettant un accès rapide à plusieurs fonctionnalités :
+
+- **Score** : Consultez votre progression et vos résultats.
+- **Licence** : Accédez aux informations de licence du cours.
+- **Supprimer** : Supprimez le cours de votre bibliothèque.
+- **Mettre à jour** : Mettez à jour le contenu du cours (non disponible pour les ePocs importés).
+
+![Menu contextuel](/images/app-epoc-menu.png){ width="300" class="mockup" }
+
+Nous espérons que cette introduction vous aidera à démarrer avec ePoc. Bonne formation !
diff --git a/docs/guide/app/import.md b/docs/guide/app/import.md
new file mode 100644
index 0000000000000000000000000000000000000000..4d04209c61d3251a6327ec1e668892532a04ace1
--- /dev/null
+++ b/docs/guide/app/import.md
@@ -0,0 +1,33 @@
+# Importer des ePocs
+
+Cette page vous guide à travers le processus d'importation d'un ePoc dans l'application. Vous pouvez importer des ePocs depuis un lien, un QR code ou un fichier local sur votre smartphone.
+
+## Importer un ePoc depuis un lien
+
+1. **Obtenir le lien** : Assurez-vous d'avoir un lien direct vers un fichier `.epoc` ou `.zip` accessible publiquement.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un lien".
+3. **Coller le lien** : Collez le lien dans le champ prévu à cet effet.
+4. **Télécharger** : L'application téléchargera et importera automatiquement le fichier.
+5. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Importer un ePoc depuis un QR code
+
+1. **Obtenir le QR code** : Assurez-vous d'avoir un QR code pointant vers un fichier `.epoc` ou `.zip` accessible publiquement.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un QR code".
+3. **Scanner le QR code** : Utilisez l'appareil photo pour scanner le code.
+4. **Télécharger** : L'application reconnaîtra le lien et téléchargera automatiquement le fichier.
+5. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Importer un ePoc depuis un fichier local
+
+1. **Télécharger le fichier** : Assurez-vous d'avoir le fichier `.epoc` ou `.zip` téléchargé sur votre smartphone.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un fichier"
+3. **Sélectionner le fichier** : Naviguer dans vos fichiers locaux et sélectionner le fichier téléchargé
+4. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Remarques importantes
+
+- **Accessibilité publique** : Le lien ou le QR code doit pointer vers un fichier accessible publiquement. L'application ne supporte pas l'import depuis des services cloud ou serveurs nécessitant une authentification.
+- **Formats supportés** : Les formats supportés pour l'importation sont `.epoc` et `.zip`.
+
+Nous espérons que ce guide vous aidera à importer facilement vos ePocs. Si vous avez des questions ou rencontrez des problèmes, n'hésitez pas à nous contacter pour obtenir de l'aide.
diff --git a/docs/images/app-accueil-import.png b/docs/images/app-accueil-import.png
new file mode 100644
index 0000000000000000000000000000000000000000..af1a83565e1e01b21dcbf496ee07f295152f884d
Binary files /dev/null and b/docs/images/app-accueil-import.png differ
diff --git a/docs/images/app-accueil.png b/docs/images/app-accueil.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3512fd38e38ee0716b4ebe6e0dc570bed0c060d
Binary files /dev/null and b/docs/images/app-accueil.png differ
diff --git a/docs/images/app-epoc-menu.png b/docs/images/app-epoc-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..eae7a0bb0638203bff39314cb7ec026268a6068e
Binary files /dev/null and b/docs/images/app-epoc-menu.png differ
diff --git a/docs/images/app-epoc-overview.png b/docs/images/app-epoc-overview.png
new file mode 100644
index 0000000000000000000000000000000000000000..80a5a36fa83d4a42c3111fc09aba11e25fce35aa
Binary files /dev/null and b/docs/images/app-epoc-overview.png differ
diff --git a/mkdocs.yml b/mkdocs.yml
index 6b45457d7d5873bf47eccab80a0520e34ec67a59..f175b2693464c8d096806224f1d549b0eaafe1d2 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -21,6 +21,10 @@ extra:
   editor_link_linux: https://github.com/inrialearninglab/epoc-editor/releases/download/${EDITOR_VERSION}-beta/epoc-editor_${EDITOR_VERSION}-beta_linux_x86_64.AppImage
 exclude_docs: |
   !.well-known
+markdown_extensions:
+  - attr_list
+  - md_in_html
+  - pymdownx.blocks.caption
 plugins:
   - awesome-pages
   - search
diff --git a/requirements.txt b/requirements.txt
index 93df9b86475533e0d4c76c8dd0b314db480c406a..eebdb9a6f2a6198741e7fe5fe2ca89a7ef0e4f29 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,5 @@
 mkdocs
 mkdocs-material
 mkdocs-awesome-pages-plugin
-mkdocs-static-i18n
\ No newline at end of file
+mkdocs-static-i18n
+pymdown-extensions
\ No newline at end of file