diff --git a/lightrag/api/static/index.html b/lightrag/api/static/index.html
index 7865d6e7..66dc37bb 100644
--- a/lightrag/api/static/index.html
+++ b/lightrag/api/static/index.html
@@ -385,13 +385,12 @@
     });
 
     function addCopyButtons() {
-        // Adds a copy button to all code tags
         document.querySelectorAll('pre').forEach(pre => {
             if (!pre.querySelector('.copy-button')) {
                 const button = document.createElement('button');
-                button.className = 'copy-button absolute top-2 right-2 p-2 bg-slate-700 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity';
+                button.className = 'copy-button absolute top-1 right-1 p-1 bg-slate-700/80 hover:bg-slate-700 text-white rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity';
                 button.innerHTML = `
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                               d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                     </svg>
@@ -400,21 +399,56 @@
                 pre.style.position = 'relative';
                 pre.classList.add('group');
                 
-                button.addEventListener('click', () => {
-                    navigator.clipboard.writeText(pre.querySelector('code').textContent);
-                    button.innerHTML = `
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                        </svg>
-                    `;
-                    setTimeout(() => {
+                button.addEventListener('click', async () => {
+                    const codeElement = pre.querySelector('code');
+                    if (!codeElement) return;
+    
+                    const text = codeElement.textContent;
+    
+                    try {
+                        // First try using the Clipboard API
+                        if (navigator.clipboard && window.isSecureContext) {
+                            await navigator.clipboard.writeText(text);
+                        } else {
+                            // Fallback for older browsers
+                            const textArea = document.createElement('textarea');
+                            textArea.value = text;
+                            textArea.style.position = 'fixed';
+                            textArea.style.left = '-999999px';
+                            textArea.style.top = '-999999px';
+                            document.body.appendChild(textArea);
+                            textArea.focus();
+                            textArea.select();
+                            try {
+                                document.execCommand('copy');
+                                textArea.remove();
+                            } catch (error) {
+                                console.error('Copy failed:', error);
+                                textArea.remove();
+                                return;
+                            }
+                        }
+    
+                        // Show success feedback
                         button.innerHTML = `
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                             </svg>
                         `;
-                    }, 2000);
+                        
+                        // Reset button after 2 seconds
+                        setTimeout(() => {
+                            button.innerHTML = `
+                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                </svg>
+                            `;
+                        }, 2000);
+    
+                    } catch (err) {
+                        console.error('Copy failed:', err);
+                    }
                 });
                 
                 pre.appendChild(button);
@@ -422,6 +456,7 @@
         });
     }
 
+
     queryForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         const query = queryInput.value.trim();