diff --git a/parcoursup-app/src/api/parcoursup.js b/parcoursup-app/src/api/parcoursup.js
index 48cb142..812eafb 100644
--- a/parcoursup-app/src/api/parcoursup.js
+++ b/parcoursup-app/src/api/parcoursup.js
@@ -10,4 +10,11 @@ export async function recupereFormations(motCle, limit = 20)
   const data = await response.json();
   
   return data.results;
+}
+
+export async function recupereFormation(id) {
+  const url = `${API_BASE}?where=cod_aff_form="${id}"&limit=1`
+  const response = await fetch(url)
+  const data = await response.json()
+  return data.results[0]
 }
\ No newline at end of file
diff --git a/parcoursup-app/src/components/carte-formations.riot b/parcoursup-app/src/components/carte-formations.riot
index c1d38a7..18fd771 100644
--- a/parcoursup-app/src/components/carte-formations.riot
+++ b/parcoursup-app/src/components/carte-formations.riot
@@ -1,6 +1,6 @@
 <carte-formations>
 
-  <div id="carte" style="height: 500px; width: 600px;"></div>
+  <div id="carte" style="height: 500px; width: 1000px;"></div>
 
 
 
@@ -8,8 +8,6 @@
 
     import L from 'leaflet'
     import 'leaflet/dist/leaflet.css'
-    import markerIcon from 'leaflet/dist/images/marker-icon.png'
-    import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
 
 
@@ -69,12 +67,13 @@
             
             if (lat && lon) 
             {
-              L.marker([lat, lon]).addTo(this.carte).bindPopup
+              L.marker([lat, lon]).addTo(this.carte).bindPopup  
               (
                 `
-                <b>${f.fil_lib_voe_acc}</b><br>
-                ${f.g_ea_lib_vx}<br>
-                ${f.ville_etab}
+                  <b>${f.fil_lib_voe_acc}</b><br>
+                  ${f.g_ea_lib_vx}<br>
+                  ${f.ville_etab}<br>
+                  <a href="#/formation/${f.cod_aff_form}">Voir le détail</a>
                 `
               )
             }
diff --git a/parcoursup-app/src/components/ligne-resultat.riot b/parcoursup-app/src/components/ligne-resultat.riot
index a6098c4..ad688fb 100644
--- a/parcoursup-app/src/components/ligne-resultat.riot
+++ b/parcoursup-app/src/components/ligne-resultat.riot
@@ -1,18 +1,17 @@
 <ligne-resultat>
 
 
-
   <div class="ligne-resultat">
 
     <h3>{ props.formation.fil_lib_voe_acc } — { props.formation.g_ea_lib_vx }</h3>
     <p>{ props.formation.ville_etab } ({ props.formation.dep_lib })</p>
     <p>Taux d'accès : { props.formation.taux_acces_ens }%</p>
+    <a href={ '#/formation/' + props.formation.cod_aff_form }>Voir le détail</a>
 
   </div>
 
 
 
-
   <style>
 
     .ligne-resultat 
@@ -22,8 +21,6 @@
       margin: 5px 0;
     }
 
-
-
   </style>
-
+  
 </ligne-resultat>
\ No newline at end of file
diff --git a/parcoursup-app/src/components/page-details.riot b/parcoursup-app/src/components/page-detail.riot
similarity index 100%
rename from parcoursup-app/src/components/page-details.riot
rename to parcoursup-app/src/components/page-detail.riot
diff --git a/parcoursup-app/src/main.js b/parcoursup-app/src/main.js
index e920851..f8c6c1c 100644
--- a/parcoursup-app/src/main.js
+++ b/parcoursup-app/src/main.js
@@ -1,4 +1,29 @@
-import { component } from 'riot'
+import { component, unmount } from 'riot'
 import App from './components/app.riot'
+import PageDetail from './components/page-detail.riot'
 
-component(App)(document.getElementById('app'))
\ No newline at end of file
+const app = document.getElementById('app')
+let currentComponent = null
+
+function navigate() 
+{
+  const hash = window.location.hash
+
+  if (currentComponent) 
+  {
+    unmount(app, true)
+  }
+
+  if (hash.startsWith('#/formation/')) 
+  {
+    const id = hash.replace('#/formation/', '')
+    currentComponent = component(PageDetail)(app, { id })
+  } 
+  else 
+  {
+    currentComponent = component(App)(app)
+  }
+}
+
+window.addEventListener('hashchange', navigate)
+navigate()
\ No newline at end of file