diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 905db6313f05d03ef1951ea82ff29e4ad8d07fdc..b25232f3d757db7b6bc41cd773033ea0afe6b662 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/spatial/static/spatial/js/gridmap.js
@@ -38,7 +38,8 @@ let parameterLabels = {"WARNING_STATUS": gettext("WARNING_STATUS")};
 let WMSLayersDateBucket = {};
 let map = undefined;
 let popup = undefined;
-
+let popupElement = undefined;
+let currentClickEvent = undefined;
 
 
 /**
@@ -68,6 +69,9 @@ async function switchLayer(dayIndex)
         }
     }
     setCurrentDate(dayIndex);
+    if(popup && currentClickEvent) {
+        await displayQueryResult(currentClickEvent);
+    }
 }
 
 
@@ -178,6 +182,7 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
     if (typeof map !== 'undefined') {
         map.setTarget(null);
     }
+
     WMSLayersDateBucket = {};
     layers = [];
     timestamps = undefined;
@@ -187,6 +192,14 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
     document.getElementById("slidecontainer").style.display="block";
     document.getElementById("errorMessageContainer").style.display="none";
 
+    // Ensure the popup element exists in the DOM
+    popupElement = document.getElementById('popup');
+    if (!popupElement) {
+        popupElement = document.createElement('div');
+        popupElement.id = 'popup';
+        document.getElementById('mapContainer').appendChild(popupElement);
+    }
+
     modelId = inputModelId;
     let backgroundLayer = new ol.layer.Tile({
 		source: new ol.source.OSM({
@@ -388,14 +401,21 @@ async function initGridMap(inputModelId, wmsURL, year, mapAttribution) {
             map.getView().fit(extent, map.getSize());
         }
 
-        popup = new ol.Overlay({
-            element: document.getElementById('popup')
-        });
-        map.addOverlay(popup);
+        if(popupElement) {
+            popup = new ol.Overlay({
+                element: popupElement
+            });
+            map.addOverlay(popup);
 
-        map.on('singleclick', (evt) => {
-            displayQueryResult(evt);
-        });
+            map.on('singleclick', (evt) => {
+                displayQueryResult(evt);
+            });
+            if(currentClickEvent) {
+                await displayQueryResult(currentClickEvent);
+            }
+        } else {
+            console.error("Popup element is not found in DOM")
+        }
 
 
         // Store user's zoom/pan preferences for the next browser session
@@ -449,10 +469,11 @@ myDefaultWhiteList.i = ["aria-hidden", "onclick","style"]
 
 async function displayQueryResult(evt)
 {
+    currentClickEvent = evt
     let popupElement = popup.getElement();
     $(popupElement).popover('destroy');
-    
-    
+
+
     let currentWMSLayer = WMSLayersDateBucket[currentTimestamp][currentParameter];
     let currentWarningStatusLayer = WMSLayersDateBucket[currentTimestamp]["WARNING_STATUS"];
 
@@ -523,7 +544,7 @@ async function displayQueryResult(evt)
         'title': gettext("Map location") + ` [${wgs84Coordinate[1].toFixed(4)}, ${wgs84Coordinate[0].toFixed(4)}] <i class="fa fa-times" style="display: inline-block; cursor: pointer; position: absolute; right: 10px;" aria-hidden="true"  onclick="$(popup.getElement()).popover('destroy');"></i>`,
         'content': '<h4>' + getWarningStatusTitle(currentWarningStatusLayer.Abstract, warningStatus) + '</h4>' + paramHTML
         });
-        $(popupElement).popover('show');
+    $(popupElement).popover('show');
 
 }
 
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index d442a80b953e9acb12138b13ca2069298af69b60..f3355088c9b520052b9d249226341684143750e5 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/spatial/templates/spatial/gridmap.html
@@ -74,7 +74,6 @@
 		</div>
 		<div id="errorMessageContainer" style="display: none; position: absolute; left: 100px; top: 100px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;"></div>
 	</div>
-	<div id="popup" title=""></div>
 	<div class="col-md-12">
 		<div id="modelAbstractBody"></div>
 	</div>