diff --git a/app.js b/app.js
index 4101462..a75b93e 100644
--- a/app.js
+++ b/app.js
@@ -144,7 +144,7 @@ app.get("/api/building/:id", requireLogin, async (req, res) => {
     const buildingInfo = info[0] || {};
     res.json({
       name: buildingInfo.name || "Gebäude",
-      type: buildingId,
+      type: Number(buildingId), // als Number damit buildingModules[type] im Frontend matcht
       level: building.level,
       points: building.points,
       nextLevelPoints: nextLevel[0]?.required_points || null,
@@ -319,11 +319,6 @@ app.get("/api/buildings", requireLogin, async (req, res) => {
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
-
-/* ========================
-   Static Files
-======================== */
-
 app.use(express.static(path.join(__dirname, "public")));
 
 /* ========================
diff --git a/public/js/buildings/arena.js b/public/js/buildings/arena.js
index 79d2db8..957a852 100644
--- a/public/js/buildings/arena.js
+++ b/public/js/buildings/arena.js
@@ -259,7 +259,7 @@ async function handle1v1Click(card) {
     me = await res.json();
   } catch (err) {
     console.error("[1v1] Spielerdaten konnten nicht geladen werden:", err);
-    showArenaError("Spielerdaten konnten nicht geladen werden.");
+    showArenaError("Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
     return;
   }
 
@@ -378,16 +378,16 @@ function openArenaPopup(src, opponentName, matchId) {
 /* ── UI Hilfsfunktionen ────────────────────────────────────────────────────── */
 function setCardSearching(card, searching) {
   const label = card.querySelector(".arena-mode-label");
-  const desc  = card.querySelector(".arena-mode-desc");
+  const desc = card.querySelector(".arena-mode-desc");
 
   if (searching) {
     card.classList.add("searching");
     label.textContent = "⏳ Suche…";
-    desc.textContent  = "Warte auf passenden Gegner…";
+    desc.textContent = "Warte auf passenden Gegner…";
   } else {
     card.classList.remove("searching");
     label.textContent = "1v1";
-    desc.textContent  = "Einzelkampf – Beweis deine Stärke im Duell";
+    desc.textContent = "Einzelkampf – Beweis deine Stärke im Duell";
   }
 }
 
@@ -396,9 +396,9 @@ function showQueueStatus(myLevel, poolSize) {
   if (!box) return;
 
   const range = 5;
-  const min   = Math.max(1, myLevel - range);
-  const max   = myLevel + range;
-  const pool  = poolSize ? ` · ${poolSize} Spieler im Pool` : "";
+  const min = Math.max(1, myLevel - range);
+  const max = myLevel + range;
+  const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : "";
 
   box.style.display = "block";
   box.innerHTML = `
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index 6747a50..fcc2f9e 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -1,3 +1,4 @@
+import { loadArena } from "./buildings/arena.js";
 import { loadCharacterHouse } from "./buildings/character-house.js";
 import { loadBlackmarket } from "./buildings/blackmarket.js";
 import { loadMine } from "./buildings/mine.js";
@@ -8,12 +9,16 @@ const tooltip = document.getElementById("map-tooltip");
 const tooltipCache = {};
 
 // Tooltip verstecken wenn Maus über Quickmenu, Popup oder QM-Popups fährt
-document.getElementById("quickmenu-panel")?.addEventListener("mouseenter", () => {
-  tooltip.style.display = "none";
-});
-document.getElementById("building-popup")?.addEventListener("mouseenter", () => {
-  tooltip.style.display = "none";
-});
+document
+  .getElementById("quickmenu-panel")
+  ?.addEventListener("mouseenter", () => {
+    tooltip.style.display = "none";
+  });
+document
+  .getElementById("building-popup")
+  ?.addEventListener("mouseenter", () => {
+    tooltip.style.display = "none";
+  });
 document.querySelectorAll(".qm-popup").forEach((p) => {
   p.addEventListener("mouseenter", () => {
     tooltip.style.display = "none";
@@ -24,9 +29,10 @@ document.getElementById("qm-overlay")?.addEventListener("mouseenter", () => {
 });
 
 const buildingModules = {
-  11: loadCharacterHouse,   // Tabs ausblenden, eigenes UI
-  12: loadBlackmarket, // Tabs ausblenden, eigenes UI
-  10: loadMine,       // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
+  1: loadArena, // Arena – eigenes UI, Tabs ausblenden
+  10: loadMine, // Mine  – Tabs bleiben sichtbar
+  11: loadCharacterHouse, // Charakterhaus – eigenes UI, Tabs ausblenden
+  12: loadBlackmarket, // Schwarzmarkt  – eigenes UI, Tabs ausblenden
 };
 
 // Gebäude die ihre eigenen Tabs behalten sollen
@@ -98,7 +104,7 @@ async function openBuildingPopup(url) {
         tabs.style.display = "none";
         infoTab.innerHTML = `<div class="building-ui"></div>`;
       }
-      buildingModules[buildingType](url.split('/').pop());
+      buildingModules[buildingType](url.split("/").pop());
     }
 
     // Punkte-Check: Upgrade nur möglich wenn genug Punkte vorhanden
@@ -132,8 +138,8 @@ async function openBuildingPopup(url) {
         </div>
       </div>
 
-      <button class="popup-upgrade-btn" id="upgrade-btn" data-building="${url.split('/').pop()}"
-        ${!canUpgrade ? 'disabled style="opacity:0.4;cursor:not-allowed;"' : ''}>
+      <button class="popup-upgrade-btn" id="upgrade-btn" data-building="${url.split("/").pop()}"
+        ${!canUpgrade ? 'disabled style="opacity:0.4;cursor:not-allowed;"' : ""}>
         ⚒ UPGRADE STARTEN ⚒
       </button>
       ${!hasEnoughPoints ? `<p style="color:#ff6666;font-size:12px;margin-top:8px;text-align:center;">Noch ${data.upgradeRequiredPoints - data.points} Punkte bis zum Upgrade.</p>` : ""}
@@ -174,7 +180,11 @@ document.addEventListener("click", async (e) => {
     const data = await res.json();
 
     if (!res.ok || data.error) {
-      window.showNotification(data.error || "Upgrade fehlgeschlagen.", "Upgrade", "⚒️");
+      window.showNotification(
+        data.error || "Upgrade fehlgeschlagen.",
+        "Upgrade",
+        "⚒️",
+      );
       btn.disabled = false;
       btn.textContent = "⚒ UPGRADE STARTEN ⚒";
       return;
@@ -183,7 +193,7 @@ document.addEventListener("click", async (e) => {
     window.showNotification(
       `Upgrade erfolgreich!\nNeues Level: ${data.newLevel}\n\nKosten: ${data.cost.wood} Holz, ${data.cost.stone} Stein, ${data.cost.gold} Gold`,
       "Upgrade",
-      "⚒️"
+      "⚒️",
     );
 
     // Popup mit frischen Daten neu laden
@@ -191,10 +201,13 @@ document.addEventListener("click", async (e) => {
 
     // HUD aktualisieren
     import("/js/hud.js").then(({ loadHud }) => loadHud());
-
   } catch (err) {
     console.error("Upgrade Fehler:", err);
-    window.showNotification("Fehler beim Upgrade. Bitte erneut versuchen.", "Fehler", "⚠️");
+    window.showNotification(
+      "Fehler beim Upgrade. Bitte erneut versuchen.",
+      "Fehler",
+      "⚠️",
+    );
     btn.disabled = false;
     btn.textContent = "⚒ UPGRADE STARTEN ⚒";
   }
@@ -275,7 +288,7 @@ document.querySelectorAll(".building").forEach((building) => {
     if (y + th > window.innerHeight - 10) y = e.clientY - th - 10;
 
     tooltip.style.left = x + "px";
-    tooltip.style.top  = y + "px";
+    tooltip.style.top = y + "px";
   });
 
   building.addEventListener("mouseleave", () => {
diff --git a/views/launcher.ejs b/views/launcher.ejs
index 55d2e66..26835d3 100644
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@@ -89,6 +89,7 @@
     <link rel="stylesheet" href="/css/launcher.css" />
     <link rel="stylesheet" href="/css/global.css" />
     <link rel="stylesheet" href="/css/building.css" />
+    <link rel="stylesheet" href="/css/arena.css" />
     <link rel="stylesheet" href="/css/popup.css" />
     <link rel="stylesheet" href="/css/quickmenu.css" />
     <link rel="stylesheet" href="/css/events.css" />
@@ -991,12 +992,12 @@
       })();
     </script>
 
-    <script type="module" src="/js/map-ui.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>
       window.playerName = "<%= character.name %>";
     </script>
     <script src="/js/chat.js"></script>
+    <script type="module" src="/js/map-ui.js"></script>
     <script type="module" src="/js/quickmenu.js"></script>
     <script type="module">
       import { loadHud } from "/js/hud.js";