diff --git a/static/css/style.css b/static/css/style.css
index a19e720e..10859ed3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6,7 +6,7 @@
 
     /* Color System */
     --lora-accent: oklch(68% 0.28 256);
-    --lora-surface: oklch(100% 0 0 / 0.4);
+    --lora-surface: oklch(100% 0 0 / 0.95);
     --lora-border: oklch(90% 0.02 256 / 0.15);
     --lora-text: oklch(95% 0.02 256);
     --lora-error: oklch(75% 0.32 29);
@@ -299,6 +299,7 @@ body.modal-open {
     border-radius: 12px;
     padding: var(--space-3);
     border: 1px solid var(--lora-border);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .carousel {
@@ -424,15 +425,79 @@ body.modal-open {
 }
 
 .model-link a {
-    color: #34b4eb;
+    color: var(--lora-accent);
     text-decoration: none;
-    font-size: 1.3em;
-    opacity: 0.9;
+    font-size: 1.1em;
     transition: opacity 0.2s;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    text-shadow: none;
 }
 
 .model-link a:hover {
+    opacity: 0.8;
+    text-decoration: none;
+}
+
+.modal-content h2 {
+    color: var(--text-color);
+    margin-bottom: var(--space-2);
+    font-size: 1.5em;
+}
+
+.description {
+    color: var(--text-color);
+    margin: var(--space-2) 0;
+    line-height: 1.4;
+}
+
+.trigger-words {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+}
+
+.trigger-words strong {
+    display: block;
+    margin-bottom: var(--space-1);
+    color: var(--text-color);
+}
+
+.word-list {
+    color: var(--lora-accent);
+    font-size: 1.1em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+.copy-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-1);
+    margin-left: var(--space-1);
+    color: var(--lora-accent);
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.copy-btn:hover {
+    opacity: 1;
+}
+
+.close {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    font-size: 1.5em;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.close:hover {
     opacity: 1;
-    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index adbba196..75fd2f9c 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -170,39 +170,41 @@ document.querySelectorAll('.lora-card').forEach(card => {
 });
 
 function showModal(lora) {
-  const modal = document.getElementById('loraModal');
-  modal.innerHTML = `
-    <div class="modal-content">
-      <h2>${lora.model.name}</h2>
-      <div class="carousel">
-        ${lora.images.map(img => img.type === 'video' ? `<video controls autoplay muted loop><source src="${img.url}" type="video/mp4">Your browser does not support the video tag.</video>` : `<img src="${img.url}" alt="Preview">`).join('')}
-      </div>
-      <div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
-      <div class="trigger-words">
-        <strong>Trigger Words:</strong>
-        <span class="word-list">${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
-        <button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : ''}')">
+    const modal = document.getElementById('loraModal');
+    modal.innerHTML = `
+      <div class="modal-content">
+        <h2>${lora.model.name}</h2>
+        <div class="carousel">
+          ${lora.images.map(img => img.type === 'video' ? `<video controls autoplay muted loop><source src="${img.url}" type="video/mp4">Your browser does not support the video tag.</video>` : `<img src="${img.url}" alt="Preview">`).join('')}
+        </div>
+        <div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
+        <div class="trigger-words">
+          <strong>Trigger Words:</strong>
+          <span class="word-list">${lora.trainedWords?.length ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
+          ${lora.trainedWords?.length ? `
+          <button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords.join(', ').toUpperCase()}')">
             <svg width="16" height="16" viewBox="0 0 24 24">
                 <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
             </svg>
-        </button>
+          </button>
+          ` : ''}
+        </div>
+        <div class="model-link">
+          <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>
+        </div>
+        <button class="close" onclick="closeModal()">&times;</button>
       </div>
-      <div class="model-link">
-        <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>
-      </div>
-      <button class="close" onclick="closeModal()">&times;</button>
-    </div>
-  `;
-  modal.style.display = 'block';
-  document.body.classList.add('modal-open');
+    `;
+    modal.style.display = 'block';
+    document.body.classList.add('modal-open');
 
-  // 添加点击事件监听器
-  modal.onclick = function(event) {
-    // 如果点击的是模态窗口的背景（不是内容区域），则关闭模态窗口
-    if (event.target === modal) {
-      closeModal();
-    }
-  };
+    // 添加点击事件监听器
+    modal.onclick = function (event) {
+        // 如果点击的是模态窗口的背景（不是内容区域），则关闭模态窗口
+        if (event.target === modal) {
+            closeModal();
+        }
+    };
 }
 
 function closeModal() {