diff --git a/index.html b/index.html
index 0747f98..a3ec7aa 100644
--- a/index.html
+++ b/index.html
@@ -910,6 +910,7 @@
                 <div id="map" class="leaflet-sidebar-map">
                     <div id="notification_jar">
                         <div id="message"></div>
+                        <div id="whats_new_message"></div>
                         <div id="overpass_loading_indicator"></div>
                     </div>
                     <div id="preview" hidden data-i18n="map.preview">Preview</div>
diff --git a/js/WhatsNew.js b/js/WhatsNew.js
index 2010b2d..fba931c 100644
--- a/js/WhatsNew.js
+++ b/js/WhatsNew.js
@@ -1,18 +1,24 @@
 BR.WhatsNew = {
     init: function () {
         var self = this;
-        self.prepare(self.hasNewVersions());
-        $('#whatsnew').on('hidden.bs.modal', function () {
-            localStorage.setItem('changelogVersion', self.getLatestVersion());
-            // next time popup is open, by default we will see everything
-            self.prepare(false);
+        self.dismissableMessage = new BR.Message('whats_new_message', {
+            onClosed: function () {
+                document.getElementsByClassName('version')[0].classList.remove('version-new');
+                localStorage.setItem('changelogVersion', self.getLatestVersion());
+                // next time popup is open, by default we will see everything
+                self.prepare(false);
+            },
         });
         $('#whatsnew').on('shown.bs.modal', function () {
-            BR.message.hide();
-            document.getElementsByClassName('version')[0].classList.remove('version-new');
+            self.dismissableMessage.hide();
         });
+        if (!self.getCurrentVersion()) {
+            localStorage.setItem('changelogVersion', self.getLatestVersion());
+        }
+        self.prepare(self.hasNewVersions());
+
         if (self.hasNewVersions()) {
-            BR.message.showInfo(i18next.t('whatsnew.new-version'));
+            self.dismissableMessage.showInfo(i18next.t('whatsnew.new-version'));
             document.getElementsByClassName('version')[0].classList.add('version-new');
         }
     },
@@ -21,20 +27,21 @@ BR.WhatsNew = {
         return BR.changelog.match('<h2 id="(.*)">')[1];
     },
 
+    getCurrentVersion: function () {
+        return localStorage.getItem('changelogVersion');
+    },
+
     hasNewVersions: function () {
         if (!BR.Util.localStorageAvailable()) return false;
 
-        var currentVersion = localStorage.getItem('changelogVersion');
-
-        return !currentVersion || currentVersion < this.getLatestVersion();
+        return this.getCurrentVersion() && this.getCurrentVersion() < this.getLatestVersion();
     },
 
     prepare: function (newOnly) {
-        var currentVersion = localStorage.getItem('changelogVersion');
         var container = document.querySelector('#whatsnew .modal-body');
         var cl = BR.changelog;
-        if (newOnly && currentVersion) {
-            var head = '<h2 id="' + currentVersion + '">';
+        if (newOnly && this.getCurrentVersion()) {
+            var head = '<h2 id="' + this.getCurrentVersion() + '">';
             cl = cl.substring(0, cl.indexOf(head));
         }
         container.innerHTML = cl;
diff --git a/js/control/Message.js b/js/control/Message.js
index 2867dd2..9b91109 100644
--- a/js/control/Message.js
+++ b/js/control/Message.js
@@ -3,6 +3,7 @@ BR.Message = L.Class.extend({
         // true to manually attach click event to close button,
         // Bootstrap data-api's auto-initialization doesn't work in Controls because of stopPropagation
         alert: false,
+        onClosed: null,
     },
 
     initialize: function (id, options) {
@@ -18,12 +19,16 @@ BR.Message = L.Class.extend({
             case 'error':
                 iconClass = 'fa-times-circle';
                 alertClass = 'alert-danger';
+                break;
             case 'warning':
                 iconClass = 'fa-exclamation-triangle';
                 alertClass = 'alert-warning';
+                break;
+            default:
             case 'info':
                 iconClass = 'fa-info-circle';
                 alertClass = 'alert-info';
+                break;
         }
 
         L.DomEvent.disableClickPropagation(ele);
@@ -41,6 +46,10 @@ BR.Message = L.Class.extend({
             msg +
             '</div>';
 
+        if (this.options.onClosed) {
+            $('#' + this.id + ' .alert').on('closed.bs.alert', this.options.onClosed);
+        }
+
         if (this.options.alert) {
             $('#' + this.id + ' .alert').alert();
         }