diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 4bdb1e47f..6f07749b8 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -948,9 +948,9 @@
     </div>
   </div>
 </div>
-<div id="versionHistoryWrapper" class="popupWrapper hidden">
-  <div id="versionHistory"></div>
-</div>
+<dialog id="versionHistoryModal" class="modalWrapper hidden">
+  <div class="modal"></div>
+</dialog>
 <dialog id="supportModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Support Monkeytype</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 299bae88a..74be88966 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -1289,29 +1289,11 @@
   }
 }
 
-#versionHistoryWrapper {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.75);
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: grid;
-  justify-content: center;
-  align-items: start;
-  padding: 5rem 0;
-
-  #versionHistory {
-    width: 75vw;
-    height: 100%;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
+#versionHistoryModal {
+  .modal {
     @extend .ffscroll;
     overflow-y: scroll;
+    min-width: 800px;
 
     hr {
       background: var(--sub-alt-color);
diff --git a/frontend/src/ts/event-handlers/footer.ts b/frontend/src/ts/event-handlers/footer.ts
index 87a311012..f2cef87f4 100644
--- a/frontend/src/ts/event-handlers/footer.ts
+++ b/frontend/src/ts/event-handlers/footer.ts
@@ -5,6 +5,7 @@ import * as Notifications from "../elements/notifications";
 import { getCommandline } from "../utils/async-modules";
 import * as SupportPopup from "../modals/support";
 import * as ContactModal from "../modals/contact";
+import * as VersionHistoryModal from "../modals/version-history";
 import { envConfig } from "../constants/env-config";
 
 document
@@ -21,6 +22,8 @@ document
     const event = e as MouseEvent;
     if (event.shiftKey) {
       alert(envConfig.clientVersion);
+    } else {
+      VersionHistoryModal.show();
     }
   });
 
@@ -61,3 +64,9 @@ document
   ?.addEventListener("click", () => {
     ContactModal.show();
   });
+
+document
+  .querySelector("footer #newVersionIndicator")
+  ?.addEventListener("click", () => {
+    document.querySelector("#newVersionIndicator")?.classList.add("hidden");
+  });
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 076b4c4a2..b04ec723a 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -22,7 +22,6 @@ import * as Result from "./test/result";
 import "./controllers/account-controller";
 import { enable } from "./states/glarses-mode";
 import "./test/caps-warning";
-import "./popups/version-popup";
 import "./popups/edit-preset-popup";
 import "./popups/set-streak-hour-offset";
 import "./popups/simple-popups";
diff --git a/frontend/src/ts/modals/version-history.ts b/frontend/src/ts/modals/version-history.ts
new file mode 100644
index 000000000..01360ec45
--- /dev/null
+++ b/frontend/src/ts/modals/version-history.ts
@@ -0,0 +1,57 @@
+import format from "date-fns/format";
+import { getReleasesFromGitHub } from "../utils/misc";
+import AnimatedModal from "../utils/animated-modal";
+
+export function show(): void {
+  void modal.show({
+    beforeAnimation: async () => {
+      $("#versionHistoryModal .modal").html(`
+    <div class="preloader">
+      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+    </div
+  `);
+      getReleasesFromGitHub()
+        .then((releases) => {
+          $("#versionHistoryModal .modal").html(`<div class="releases"></div`);
+          releases.forEach((release: MonkeyTypes.GithubRelease) => {
+            if (!release.draft && !release.prerelease) {
+              let body = release.body;
+
+              body = body.replace(/\r\n/g, "<br>");
+              //replace ### title with h3 title h3
+              body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
+              body = body.replace(/<\/h3><br>/gi, "</h3>");
+              //remove - at the start of a line
+              body = body.replace(/^- /gm, "");
+              //replace **bold** with bold
+              body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
+              //replace links with a tags
+              body = body.replace(
+                /\[(.*?)\]\((.*?)\)/g,
+                '<a href="$2" target="_blank">$1</a>'
+              );
+
+              $("#versionHistoryModal .modal .releases").append(`
+        <div class="release">
+          <div class="title">${release.name}</div>
+          <div class="date">${format(
+            new Date(release.published_at),
+            "dd MMM yyyy"
+          )}</div>
+          <div class="body">${body}</div>
+        </div>
+      `);
+            }
+          });
+        })
+        .catch((e) => {
+          $("#versionHistoryModal .modal").html(
+            `<div class="releases">Failed to fetch version history:<br>${e.message}</div`
+          );
+        });
+      $("#newVersionIndicator").addClass("hidden");
+    },
+  });
+}
+
+const modal = new AnimatedModal("versionHistoryModal", "popups");
diff --git a/frontend/src/ts/popups/version-popup.ts b/frontend/src/ts/popups/version-popup.ts
deleted file mode 100644
index 1ebda64a5..000000000
--- a/frontend/src/ts/popups/version-popup.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import format from "date-fns/format";
-import { getReleasesFromGitHub, isPopupVisible } from "../utils/misc";
-import * as Skeleton from "../utils/skeleton";
-
-const wrapperId = "versionHistoryWrapper";
-
-function show(): void {
-  Skeleton.append(wrapperId, "popups");
-  $("#versionHistory").html(`
-    <div class="preloader">
-      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-    </div
-  `);
-  getReleasesFromGitHub()
-    .then((releases) => {
-      $("#versionHistory").html(`<div class="releases"></div`);
-      releases.forEach((release: MonkeyTypes.GithubRelease) => {
-        if (!release.draft && !release.prerelease) {
-          let body = release.body;
-
-          body = body.replace(/\r\n/g, "<br>");
-          //replace ### title with h3 title h3
-          body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
-          body = body.replace(/<\/h3><br>/gi, "</h3>");
-          //remove - at the start of a line
-          body = body.replace(/^- /gm, "");
-          //replace **bold** with bold
-          body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
-          //replace links with a tags
-          body = body.replace(
-            /\[(.*?)\]\((.*?)\)/g,
-            '<a href="$2" target="_blank">$1</a>'
-          );
-
-          $("#versionHistory .releases").append(`
-        <div class="release">
-          <div class="title">${release.name}</div>
-          <div class="date">${format(
-            new Date(release.published_at),
-            "dd MMM yyyy"
-          )}</div>
-          <div class="body">${body}</div>
-        </div>
-      `);
-        }
-      });
-    })
-    .catch((e) => {
-      $("#versionHistory").html(
-        `<div class="releases">Failed to fetch version history:<br>${e.message}</div`
-      );
-    });
-  $("#versionHistoryWrapper")
-    .css("opacity", 0)
-    .removeClass("hidden")
-    .animate({ opacity: 1 }, 125);
-  $("#newVersionIndicator").addClass("hidden");
-}
-
-function hide(): void {
-  $("#versionHistoryWrapper")
-    .css("opacity", 1)
-    .animate({ opacity: 0 }, 125, () => {
-      $("#versionHistoryWrapper").addClass("hidden");
-      $("#versionHistory").html("");
-      Skeleton.remove(wrapperId);
-    });
-}
-
-$("footer").on("click", "#newVersionIndicator", () => {
-  $("#newVersionIndicator").addClass("hidden");
-});
-
-$("footer").on("click", "button.currentVersion", (e) => {
-  if (e.shiftKey) return;
-  show();
-});
-
-$("#popups").on("click", "#versionHistoryWrapper", (e) => {
-  if ($(e.target).attr("id") === "versionHistoryWrapper") {
-    hide();
-  }
-});
-
-$(document).on("keydown", (event) => {
-  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-    event.preventDefault();
-  }
-});
-
-Skeleton.save(wrapperId);