diff --git a/all.php b/all.php
new file mode 100644
index 0000000..d0fb9e1
--- /dev/null
+++ b/all.php
@@ -0,0 +1,79 @@
+<?php include("core.php"); ?>
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Carte OpenStreetMap</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <div class="header">
+        <h1>GÉOLOCALISATION DES BROCANTES RÉFÉRENCÉES</h1>
+        <p>SUR LE SITE <a href="https://www.sabradou.com/" target="_blank">SABRADOU.COM</a></p>
+    </div>
+    <div class="container">
+        <div class="left-column">
+            <form class="form" action="#" method="GET">
+                <label for="calendrier-list">Sélectionnez une date :</label>
+                <select name="calendrier" id="calendrier-list">
+                    <?php $calendrier = getCalendrier(); ?>
+                    <?php foreach ($calendrier as $item): ?>
+                        <option value="<?php echo $item['url']; ?>"><?php echo $item['node']; ?></option>
+                    <?php endforeach; ?>
+                </select>
+                <input type="submit" value="Localiser">
+            </form>
+            <div class="cities-list">
+                <ul>
+                    <?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
+                    <?php foreach ($citiesList as $city): ?>
+                        <li>
+                            <?php echo $city['name']; ?>
+                        </li>
+                    <?php endforeach; ?>
+                </ul>
+            </div>
+        </div>
+        <div class="right-column">
+            <?php
+            if (isset($_GET['calendrier'])) {
+                $jour = $_GET['calendrier'];
+                $citiesList = getCities($jour);
+                $citiesGeoCode = geocode($citiesList);
+                $calendrier = getCalendrier();
+                foreach ($calendrier as $item) {
+                    if ($item['url'] === $jour) {
+                        echo '<div class="header"><h1>Brocantes du ' . $item['node'] . '</h1></div>';
+                        break;
+                    }
+                }
+                ?>
+                <div id="map"></div>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
+                <script>
+                    // Tableau des villes et des coordonnées
+                    var cities = <?php echo json_encode($citiesGeoCode); ?>;
+
+                    // Créer la carte
+                    var map = L.map('map').setView([50.5095, 2.6683], 9);
+
+                    // Ajouter une couche de tuiles OpenStreetMap à la carte
+                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                        attribution: 'Carte OpenStreetMap'
+                    }).addTo(map);
+
+                    // Placer des marqueurs pour chaque ville sur la carte
+                    cities.forEach(function (city) {
+                        var marker = L.marker([city.lat, city.lon]).addTo(map);
+                        marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
+                    });
+                </script>
+            <?php } ?>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index b68874e..6faaad8 100644
--- a/style.css
+++ b/style.css
@@ -6,10 +6,8 @@
 }
 
 .container {
+    display: block;
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
 .form {
@@ -21,3 +19,24 @@
  text-align: center;
 }
 
+.container {
+    display: block;
+    width: 100%;
+}
+
+.left-column {
+    display: flex;
+    width: 20%;
+    padding: 10px;
+}
+
+.right-column {
+    display: flex;
+    width: 80%;
+    padding: 10px;
+}
+
+#map {
+    height: 500px;
+}
+
