diff --git a/app/web/static/js/app.js b/app/web/static/js/app.js
index d4e95d3..714aaf4 100644
--- a/app/web/static/js/app.js
+++ b/app/web/static/js/app.js
@@ -49,6 +49,23 @@ class LLMMonitorApp {
             }
             this.showModelDetails(decodeURIComponent(modelKey));
         });
+
+        // Chiusura modal con pulsante X
+        document.getElementById("model-details-close")?.addEventListener("click", () => {
+            this.hideModelDetails();
+        });
+
+        // Chiusura modal con click su overlay
+        document.getElementById("model-details-backdrop")?.addEventListener("click", () => {
+            this.hideModelDetails();
+        });
+
+        // Chiusura modal con tasto Esc
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+                this.hideModelDetails();
+            }
+        });
     }
 
     // Caricare dati da localStorage
@@ -195,11 +212,11 @@ class LLMMonitorApp {
     }
 
     showModelDetails(modelName) {
-        const detailsSection = document.getElementById("model-details-section");
+        const detailsModal = document.getElementById("model-details-modal");
         const detailsName = document.getElementById("model-details-name");
         const detailsContent = document.getElementById("model-details-content");
 
-        if (!detailsSection || !detailsName || !detailsContent || !this.lastData.models) {
+        if (!detailsModal || !detailsName || !detailsContent || !this.lastData.models) {
             return;
         }
 
@@ -207,9 +224,9 @@ class LLMMonitorApp {
         const showData = showByModel[modelName];
         this.selectedModelName = modelName;
 
-        detailsSection.classList.remove("hidden");
+        detailsModal.classList.remove("hidden");
+        document.body.classList.add("overflow-hidden");
         detailsName.textContent = modelName;
-        detailsSection.scrollIntoView({ behavior: "smooth", block: "start" });
 
         if (!showData) {
             detailsContent.textContent = "Dettagli show non disponibili per questo modello.";
@@ -219,6 +236,16 @@ class LLMMonitorApp {
         detailsContent.textContent = JSON.stringify(showData, null, 2);
     }
 
+    hideModelDetails() {
+        const detailsModal = document.getElementById("model-details-modal");
+        if (!detailsModal || detailsModal.classList.contains("hidden")) {
+            return;
+        }
+
+        detailsModal.classList.add("hidden");
+        document.body.classList.remove("overflow-hidden");
+    }
+
     // Formattare bytes
     formatBytes(bytes) {
         if (bytes === 0) return "0 B";
diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index a479f33..a77aab7 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -75,15 +75,6 @@
                     </div>
                 </div>
 
-                <!-- Model Show Details -->
-                <div id="model-details-section" class="mt-8 bg-gray-800 rounded-lg border border-gray-700 p-6 hidden">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-bold">Dettagli Modello</h3>
-                        <span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
-                    </div>
-                    <pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap"></pre>
-                </div>
-
                 <!-- API Documentation Section -->
                 <div class="mt-8 bg-blue-900 bg-opacity-20 border border-blue-700 rounded-lg p-6">
                     <h3 class="text-lg font-bold mb-4">📚 Documentazione API</h3>
@@ -108,6 +99,23 @@
         </footer>
     </div>
 
+    <!-- Model Show Details Modal -->
+    <div id="model-details-modal" class="hidden fixed inset-0 z-50">
+        <div id="model-details-backdrop" class="absolute inset-0 bg-black/70"></div>
+        <div class="relative min-h-screen flex items-center justify-center p-4">
+            <div id="model-details-section" class="w-full max-w-4xl bg-gray-800 rounded-lg border border-gray-700 p-6 shadow-xl">
+                <div class="flex items-center justify-between mb-4">
+                    <div>
+                        <h3 class="text-lg font-bold">Dettagli Modello</h3>
+                        <span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
+                    </div>
+                    <button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Chiudi modal">×</button>
+                </div>
+                <pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-[70vh] whitespace-pre-wrap"></pre>
+            </div>
+        </div>
+    </div>
+
     <!-- LLM Monitor Application -->
     <!-- Web Worker for background data sync -->
     <!-- localStorage for client-side persistence -->