diff --git a/src/App.js b/src/App.js
index 7456d46..77a51f9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,25 +25,44 @@ import Map from './Map.js';
 import Rooms from './Rooms.js';
 
 function ChangeFloor({ currentFloor, callbackFloorChanged }) {
+  const [sites, setSites] = React.useState([]);
   const handleFloorChanged = (event) => {
     callbackFloorChanged(event.target.value);
   };
 
+  React.useEffect(() => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/get_all_floors/")
+      .then(response => response.json())
+      .then(data => {
+        setSites(data);
+      });
+  }, []);
+
+  var items = [];
+
+  sites.forEach(site => {
+    site.buildings.forEach(building => {
+      building.floors.forEach(floor => {
+        items.push(
+          <MenuItem value={floor.id}>{site.name} / {building.name} / {floor.name}</MenuItem>
+        )
+      })
+    })
+
+  });
+
   return <>
     <div style={{ padding: '24px' }}>
       <Typography component="h2" variant="h5" gutterBottom>
         Changer d'étage
       </Typography>
-
       <Select
         value={currentFloor}
         label="Étage"
         onChange={handleFloorChanged}
         fullWidth
       >
-        <MenuItem value={9}>Monod - Premier étage</MenuItem>
-        <MenuItem value={13}>Monod - Troisième étage</MenuItem>
-        <MenuItem value={14}>Monod - Quatrième étage</MenuItem>
+        {items}
       </Select>
     </div>
   </>