diff --git a/public/css/building.css b/public/css/building.css
index 67e9567..99a533f 100644
--- a/public/css/building.css
+++ b/public/css/building.css
@@ -39,6 +39,7 @@ body {
 
   width: 900px;
   max-width: 90vw;
+  max-height: 1000px;
 
   background: url("/images/parchment.png") center / cover no-repeat;
 
@@ -50,11 +51,16 @@ body {
     inset 0 0 25px rgba(0, 0, 0, 0.5);
 
   display: none;
+  flex-direction: column;
   z-index: 1000;
 
   animation: popupFade 0.25s ease;
 }
 
+.building-popup.active {
+  display: flex;
+}
+
 /* =========================
    Popup Header
 ========================= */
@@ -128,6 +134,9 @@ body {
   border-radius: 6px;
 
   color: #2b1b0f;
+
+  overflow-y: auto;
+  flex: 1;
 }
 
 .popup-content h3 {
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index aeeac4f..c9ecdb7 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -45,7 +45,7 @@ document.querySelectorAll(".building").forEach((building) => {
 
       popup.style.left = "50%";
       popup.style.top = "50%";
-      popup.style.display = "block";
+      popup.classList.add("active");
 
       resetTabs();
 
@@ -126,7 +126,7 @@ document.querySelectorAll(".tab").forEach((tab) => {
 ================================ */
 
 document.querySelector(".popup-close").onclick = () => {
-  popup.style.display = "none";
+  popup.classList.remove("active");
 };
 
 /* ================================