diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index c961899..c1b437a 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -163,12 +163,12 @@
     </div>
   </main>
 
-  <div id="ping-modal" class="fixed inset-0 z-50 hidden">
-    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closePingModal()"></div>
-    <div class="absolute inset-4 sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-full sm:max-w-3xl sm:max-h-[85vh] card-static overflow-y-auto">
-      <div class="sticky top-0 bg-surface-solid flex items-center justify-between px-5 py-3 border-b divider">
-        <h3 class="text-sm font-medium text-gray-200">Ping Details</h3>
-        <button onclick="closePingModal()" class="text-gray-500 hover:text-gray-300 text-lg leading-none">&times;</button>
+  <div id="ping-modal" class="hidden" style="position:fixed;inset:0;z-index:9999">
+    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)" onclick="closePingModal()"></div>
+    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:800px;max-height:85vh;overflow-y:auto;background:#141418;border:1px solid #232329;border-radius:12px">
+      <div style="position:sticky;top:0;background:#141418;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #1e1e24">
+        <h3 style="font-size:14px;font-weight:500;color:#e5e7eb">Ping Details</h3>
+        <button onclick="closePingModal()" style="color:#6b7280;font-size:18px;cursor:pointer;background:none;border:none">&times;</button>
       </div>
       <div id="ping-modal-body" class="p-6 text-sm"></div>
     </div>