diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 02be4484c29cf88285f5611fc33106dc8ef640d8..c1c63c6f0d38c9a926cd6ecaffd15fd64b8d6430 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/spatial/static/spatial/js/gridmap.js
@@ -167,9 +167,22 @@ function getLayersForCurrentTimestamp()
  * @param {*} inputModelId model Id, e.g. PSILARTEMP
  * @param {*} mapAttribution background map source information (displayed in the map)
  */
-async function initGridMap(inputModelId, wmsURL, mapAttribution) {
+async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
+
+    let today = getSystemTime().format("YYYY-MM-DD");
+    if (year < getSystemTime().year()) {
+        today = year + "-12-31";
+    }
+    const wmsYearUrl = `${wmsURL}/${year}/`;
+    // Check if the map already exists and remove it
+    if (typeof map !== 'undefined') {
+        map.setTarget(null);
+    }
+    WMSLayersDateBucket = {};
+    timestamps = undefined;
+    todayLayerIndex = undefined;
+
     modelId = inputModelId;
-    console.info("Init grid map " + inputModelId)
     let backgroundLayer = new ol.layer.Tile({
 		source: new ol.source.OSM({
             attributions: [mapAttribution]
@@ -179,9 +192,9 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
     // Get layers from WMS service
     let parser = new ol.format.WMSCapabilities();
     //console.info(mapserverURL + modelId + "?service=WMS&version=1.3.0&request=GetCapabilities");
-    let response = await fetch(wmsURL + "?service=WMS&version=1.3.0&request=GetCapabilities&language=" + settings.currentLanguage);
-    //let response = await fetch(wmsURL + "?service=WMS&request=GetCapabilities&language={{language.code}}");
-    //console.info(wmsURL + "?service=WMS&request=GetCapabilities&language=en");
+    let response = await fetch(wmsYearUrl + "?service=WMS&version=1.3.0&request=GetCapabilities&language=" + settings.currentLanguage);
+    //let response = await fetch(wmsYearUrl + "?service=WMS&request=GetCapabilities&language={{language.code}}");
+    //console.info(wmsYearUrl + "?service=WMS&request=GetCapabilities&language=en");
     //console.info(response.status); // Response is 200 even if a model doesn't exist on the mapserver
     let txt = await response.text();
 
@@ -192,7 +205,7 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
     {
         let capabilities = parser.read(txt);
         isDataReturned = capabilities.Capability.Layer != undefined;
-        
+
         let WMSLayers = isDataReturned ? capabilities.Capability.Layer.Layer : [];
 
         if(isDataReturned)
@@ -292,7 +305,7 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
                 layers.push(
                     new ol.layer.Image({
                         source: new ol.source.ImageWMS({
-                            url: wmsURL,
+                            url: wmsYearUrl,
                             params: { "LAYERS": modelId + "." + currentLayerParam + "." + dateStr, "TRANSPARENT": "TRUE" },
                             serverType: "mapserver",
                             ratio: 1,
@@ -408,7 +421,6 @@ async function initGridMap(inputModelId, wmsURL, mapAttribution) {
         document.getElementById("slidecontainer").style.display="none";
         if(! wmsServiceSuccess)
         {
-            alert("Got here");
             document.getElementById("errorMessageContainer").innerHTML="ERROR: Response from server was " + txt;
         }
         else // Service OK, but no data (layers)
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index fc929189d7b844d599570c72d034170210b67281..d442a80b953e9acb12138b13ca2069298af69b60 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/spatial/templates/spatial/gridmap.html
@@ -22,10 +22,29 @@
 <script type="text/javascript" src="{% static "spatial/js/gridmap.js" %}"></script>
 <script type="text/javascript">
 	$(document).ready(function() {
+		// Populate the year select element
+		const currentYear = getSystemTime().year();
+		const startYear = 2024;
+		const yearSelect = document.getElementById('year');
+		for (let year = startYear; year <= currentYear; year++) {
+			const option = document.createElement('option');
+			option.value = year;
+			option.textContent = year;
+			if (year === currentYear) {
+				option.selected = true;
+			}
+			yearSelect.appendChild(option);
+		}
+
+		yearSelect.addEventListener('change', function() {
+			const selectedYear = yearSelect.value;
+			initGridMap("{{model_id}}", "{{url}}", selectedYear, "{{settings.MAP_ATTRIBUTION|safe}}");
+		});
+
 		const longitude = {{settings.MAP_CENTER_LONGITUDE|unlocalize}};
 		const latitude = {{settings.MAP_CENTER_LATITUDE|unlocalize}};
 		const zoomLevel = {{settings.MAP_ZOOMLEVEL}};
-		initGridMap("{{model_id}}","{{url}}", "{{settings.MAP_ATTRIBUTION|safe}}");
+		initGridMap("{{model_id}}","{{url}}", currentYear, "{{settings.MAP_ATTRIBUTION|safe}}");
 	});
 </script>
 {% endblock %}
@@ -35,6 +54,12 @@
 		<h2 id="modelTitle"></h2>
 		<div id="modelAbstractPreamble"></div>
 	</div>
+	<div class="col-md-12 form-inline">
+		<div class="form-group">
+			<label for="year">Velg år</label>
+			<select class="form-control" name="year" id="year"></select>
+		</div>
+	</div>
 	<!-- Start map container -->
 	<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px; padding-top: 15px; padding-bottom: 15px;">
 		<div id="slidecontainer" class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px; margin-bottom: 15px;">