diff --git a/client_src/css/main.css b/client_src/css/main.css
index 86e5ec4..507f7ea 100644
--- a/client_src/css/main.css
+++ b/client_src/css/main.css
@@ -5,6 +5,7 @@
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
 
+@import "./nanomodal.css";
 @import "./popup.css";
 
 /** Ensure that some assets are copied that aren't by default **/
diff --git a/client_src/css/nanomodal.css b/client_src/css/nanomodal.css
new file mode 100644
index 0000000..20ae1e8
--- /dev/null
+++ b/client_src/css/nanomodal.css
@@ -0,0 +1,5 @@
+.nanoModal {
+	max-width: 50vw;
+	max-height: 70vh;
+	overflow-y: scroll;
+}
diff --git a/client_src/js/Config.mjs b/client_src/js/Config.mjs
index eee51fa..69cc8d1 100644
--- a/client_src/js/Config.mjs
+++ b/client_src/js/Config.mjs
@@ -2,7 +2,7 @@
 
 export default {
 	version: "__VERSION__",
-	buid_date: new Date("__BUILD_DATE__"),
+	build_date: new Date("__BUILD_DATE__"),
 	// The url of api.php. Can be relative.
 	api_root: "../api.php",
 	// The default location to show on the map when loading the page.
diff --git a/client_src/js/UI.mjs b/client_src/js/UI.mjs
index 8d03f20..2d44918 100644
--- a/client_src/js/UI.mjs
+++ b/client_src/js/UI.mjs
@@ -1,6 +1,7 @@
 "use strict";
 
 import SmartSettings from 'smartsettings';
+import NanoModal from 'nanomodal';
 
 import Config from './Config.mjs';
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
@@ -34,7 +35,6 @@ class UI {
 				}).bind(this)
 			},
 			{
-				// TODO: Add a setting for the different reading types here
 				type: "select",
 				name: "Reading Type",
 				items: this.reading_types.map((type) => type.friendly_text),
@@ -43,6 +43,15 @@ class UI {
 					
 					this.map_manager.heatmap.update_reading_type(new_type);
 				}).bind(this)
+			},
+			{
+				type: "button",
+				name: `${Config.version}, built ${Config.build_date.toDateString()}`,
+				callback: (async (_event) => {
+					NanoModal(
+						await GetFromUrl(`${Config.api_root}?action=changelog`)
+					).show();
+				})
 			}
 		]);
 		this.ui_panel.setIndex("Reading Type", this.reading_types.findIndex((type) => type.id == "PM25"));
diff --git a/package-lock.json b/package-lock.json
index 9330c3d..0c2c4c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1820,6 +1820,11 @@
         }
       }
     },
+    "nanomodal": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/nanomodal/-/nanomodal-5.1.1.tgz",
+      "integrity": "sha1-qiEiUSr49vpr3G8y1nqm3whvfK0="
+    },
     "normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
diff --git a/package.json b/package.json
index 9b6ef6b..ec21d11 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "leaflet-timedimension": "^1.1.0",
     "leaflet.markercluster": "^1.4.1",
     "moment": "^2.23.0",
+    "nanomodal": "^5.1.1",
     "smartsettings": "^1.2.3"
   },
   "devDependencies": {