diff --git a/docs/assets/grenouille_bleue.png b/docs/assets/grenouille_bleue.png
new file mode 100644
index 000000000..06746f952
Binary files /dev/null and b/docs/assets/grenouille_bleue.png differ
diff --git a/docs/assets/images/android-chrome-192x192.png b/docs/assets/images/android-chrome-192x192.png
new file mode 100755
index 000000000..24b79905f
Binary files /dev/null and b/docs/assets/images/android-chrome-192x192.png differ
diff --git a/docs/assets/images/android-chrome-512x512.png b/docs/assets/images/android-chrome-512x512.png
new file mode 100755
index 000000000..df7b68d00
Binary files /dev/null and b/docs/assets/images/android-chrome-512x512.png differ
diff --git a/docs/assets/images/apple-touch-icon.png b/docs/assets/images/apple-touch-icon.png
new file mode 100755
index 000000000..9d50ea8ce
Binary files /dev/null and b/docs/assets/images/apple-touch-icon.png differ
diff --git a/docs/assets/images/favicon-16x16.png b/docs/assets/images/favicon-16x16.png
new file mode 100755
index 000000000..da06df161
Binary files /dev/null and b/docs/assets/images/favicon-16x16.png differ
diff --git a/docs/assets/images/favicon-32x32.png b/docs/assets/images/favicon-32x32.png
new file mode 100755
index 000000000..46e39ffcc
Binary files /dev/null and b/docs/assets/images/favicon-32x32.png differ
diff --git a/docs/assets/images/favicon.png b/docs/assets/images/favicon.png
new file mode 100755
index 000000000..46e39ffcc
Binary files /dev/null and b/docs/assets/images/favicon.png differ
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
new file mode 100644
index 000000000..fd7da62b7
--- /dev/null
+++ b/docs/stylesheets/extra.css
@@ -0,0 +1,28 @@
+div.md-sidebar--secondary,
+div.md-sidebar--secondary div {
+    background-color: rgb(217, 217, 217);
+    border-radius: 8px;
+}
+
+div.md-sidebar--secondary div.md-sidebar__scrollwrap {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.md-content h1,
+.md-content h2,
+.md-content h3 {
+    margin-block-start: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-weight: bold;
+}
+
+.md-content ul {
+    margin-top: 0px;
+}
+
+.md-content h3+p {
+    margin-block-start: 0px;
+    margin-top: 0px;
+}
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index b682a4b20..eab94264e 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -1,33 +1,45 @@
 site_name: ScoDoc
 
 theme:
-  name: mkdocs
+  # name: mkdocs
+  name: material
   navigation_depth: 3
+  features:
+    - navigation.tabs
+    - toc.follow
+    - navigation.top
+  palette:
+    primary: light blue
+  language: fr
+  logo: assets/images/android-chrome-192x192.png
+
+extra_css:
+  - stylesheets/extra.css
 
 nav:
-  - Documentation: 
-    - 'Guide utilisateur': GuideUtilisateur.md
-    - 'Tutos vidéos': https://www.youtube.com/playlist?list=PLw49h6RbvswhasBk9bXj7PzOD8GDW3kG1
-    - 'Responsables de formations': GuideAdminFormation.md
-    - 'FAQ': FAQ.md
-  
-  - Installation: 
-    - 'Guide administration': GuideAdminSys.md
-    - 'Installation': GuideInstallDebian11.md
-    - 'Mises à jour': MisesAJour.md
-    - 'Interfaces SI': InterrogationPortail.md
-    - 'Publication des notes': PublicationEtudiants.md
-    - 'Export Apogée': ScoDocApogee.md
+  - Accueil: index.md
+  - Documentation:
+      - "Guide utilisateur": GuideUtilisateur.md
+      - "Tutos vidéos": https://www.youtube.com/playlist?list=PLw49h6RbvswhasBk9bXj7PzOD8GDW3kG1
+      - "Responsables de formations": GuideAdminFormation.md
+      - "FAQ": FAQ.md
 
-  - Association: 
-    - 'Association 1901': AssociationScoDoc.md
-    - 'Utilisateurs': UtilisateursScoDoc.md
+  - Installation:
+      - "Guide administration": GuideAdminSys.md
+      - "Installation": GuideInstallDebian11.md
+      - "Mises à jour": MisesAJour.md
+      - "Interfaces SI": InterrogationPortail.md
+      - "Publication des notes": PublicationEtudiants.md
+      - "Export Apogée": ScoDocApogee.md
+
+  - Association:
+      - "Association 1901": AssociationScoDoc.md
+      - "Utilisateurs": UtilisateursScoDoc.md
 
   - Développement:
-    - 'Git': https://scodoc.org/git
-    - 'Guide Développeurs': GuideDeveloppeurs.md
-    - 'API (interfaçages autres logiciels)': ScoDoc9API.md
-
+      - "Git": https://scodoc.org/git
+      - "Guide Développeurs": GuideDeveloppeurs.md
+      - "API (interfaçages autres logiciels)": ScoDoc9API.md
 
   - FAQ: FAQ.md
 
@@ -35,7 +47,7 @@ nav:
 
 # Pour LaTex, juste faire pip install python-markdown-math
 # dans l'environnement choisi (mkdocs)
-#extra_javascript: 
+#extra_javascript:
 #    - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML
 
 extra_javascript:
@@ -45,5 +57,12 @@ extra_javascript:
 
 markdown_extensions:
   - pymdownx.arithmatex:
-      generic: true  
+      generic: true
   - footnotes
+  - pymdownx.tasklist:
+      custom_checkbox: true
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format