diff --git a/src/css/map.css b/src/css/map.css
index 6ea1722..fa8611f 100644
--- a/src/css/map.css
+++ b/src/css/map.css
@@ -114,7 +114,7 @@ a.img-and-text-link:hover span {
 }
 
 .legend {
-    height: 52px;
+    height: 77px;
     width: 130px;
     background-color: #fff;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);
diff --git a/src/img/grey-marker.png b/src/img/grey-marker.png
new file mode 100644
index 0000000..4768415
Binary files /dev/null and b/src/img/grey-marker.png differ
diff --git a/src/index.html b/src/index.html
index 8b2fdb2..b183544 100644
--- a/src/index.html
+++ b/src/index.html
@@ -114,9 +114,13 @@
         <div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div>
         <span style="position: absolute; left: 25px; top: 30px;">Enkel week</span>
       </div>
+      <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
+        <div style="height: 10px; width: 10px; background: rgb(120,120,120); margin-top: 1px; margin-left: 5px;"></div>
+        <span style="position: absolute; left: 25px; top: 55px;">Opent binnenkort</span>
+      </div>
       <div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday">
         <div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div>
-        <span style="position: absolute; left: 25px; top: 53px;">Tijdens kerstvakantie</span>
+        <span style="position: absolute; left: 25px; top: 80px;">Tijdens kerstvakantie</span>
       </div>
     </div>
   </script>
diff --git a/src/js/map.js b/src/js/map.js
index ecabb83..ea4c634 100644
--- a/src/js/map.js
+++ b/src/js/map.js
@@ -19,10 +19,16 @@ $(document).ready(function() {
             iconUrl: "img/christmas-marker.png"
         }
     });
+    var GreyIcon = L.Icon.Default.extend({
+        options: {
+            iconUrl: "img/grey-marker.png"
+        }
+    });
 
     var blueIcon = new BlueIcon();
     var redIcon = new RedIcon();
     var christmasIcon = new ChristmasIcon();
+    var greyIcon = new GreyIcon();
 
     var now = new Date();
     var christmasSeason =
@@ -41,7 +47,13 @@ $(document).ready(function() {
         var icon = redIcon;
         var iconDescription = "red";
         if (feature.properties) {
-            if (feature.properties.holidays && christmasSeason) {
+            var startingDateString =feature.properties.period.start;
+            var month = (parseInt(startingDateString.substring(3,5))-1);
+            var startingDate = new Date("20"+startingDateString.substring(6,8),month,startingDateString.substring(0,2));
+            if (Date.now()<startingDate) {
+                icon = greyIcon;
+                iconDescription = "grey";
+            } else if (feature.properties.holidays && christmasSeason) {
                 icon = christmasIcon;
                 iconDescription = "christmas";
             } else if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {