diff --git a/assets/css/style.css b/assets/css/style.css
index f959d14..aac2f3d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -442,6 +442,10 @@ Full-Width Styles
     list-style: square;
 }
 
+#map {
+    height: 600px;
+}
+
 /*******************************************************************************
 Small Device Styles
 *******************************************************************************/
diff --git a/assets/scripts/map.js b/assets/scripts/map.js
new file mode 100644
index 0000000..1671856
--- /dev/null
+++ b/assets/scripts/map.js
@@ -0,0 +1,19 @@
+
+var hoverColor = "#c5a360";
+var normalColor = "#d9cfc7";
+
+function clicked(id){
+    $("#infoBox").load("includes/map_descriptions/" + id + ".html");
+    $('html, body').animate({
+        scrollTop: $("#infoBox").offset().top
+    }, 300);
+}
+
+function hover_in(id){
+    console.log(id);
+    $("#" + id).css("fill", hoverColor);
+}
+
+function hover_out(id){
+    $("#" + id).css("fill", normalColor);
+}
\ No newline at end of file
diff --git a/includes/map_descriptions/r7.html b/includes/map_descriptions/r7.html
new file mode 100644
index 0000000..8d50c81
--- /dev/null
+++ b/includes/map_descriptions/r7.html
@@ -0,0 +1 @@
+<h3>Le R7</h3>
\ No newline at end of file
diff --git a/includes/sidenav.html b/includes/sidenav.html
index 8e52ca1..bdccf20 100644
--- a/includes/sidenav.html
+++ b/includes/sidenav.html
@@ -5,6 +5,9 @@
         <a href="planning.php" id="planning" class="page-link"><span class="sidenav-content"><i
                 class="fas fa-calendar-alt sidenav-icon"></i> Le
             Planning</span></a>
+        <a href="map.php" id="map" class="page-link"><span class="sidenav-content"><i
+                class="fas fa-map sidenav-icon"></i> Le
+            Plan</span></a>
         <a href="parrainage.php" id="parrainage" class="page-link"><span class="sidenav-content"><i
                 class="fas fa-user-plus sidenav-icon"></i> Le
             Parrainage</span></a>
diff --git a/map.php b/map.php
new file mode 100644
index 0000000..ed8e5e4
--- /dev/null
+++ b/map.php
@@ -0,0 +1,21 @@
+<?php
+ob_start(); // Start reading html
+?>
+<h1>Le Plan</h1>
+<p>
+    Voici le plan de ton nouveau campus, que tu va connaitre par coeur en quelques jours. (fond de carte issue du site
+    <a
+            href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">Open Street Map</a>
+</p>
+<?php echo file_get_contents("assets/images/map.svg"); ?>
+
+<h1>Informations</h1>
+<div id="infoBox">
+    <p>Clique sur un bâtiment pour afficher ses informations</p>
+</div>
+
+<script type="text/javascript" src="assets/scripts/map.js"></script>
+<?php
+$pageContent = ob_get_clean(); // Store html content in variable
+include("template.php"); // Display template with variable content
+?>