diff --git a/lightrag/api/static/index.html b/lightrag/api/static/index.html
index 6769ade3..8a4a1421 100644
--- a/lightrag/api/static/index.html
+++ b/lightrag/api/static/index.html
@@ -7,19 +7,30 @@
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
-  <div class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6">
-    <h1 class="text-2xl font-bold text-gray-800 mb-4">RAG WebUI</h1>
+  <div class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6 relative">
+    <!-- Settings Button -->
+    <button id="settingsButton" class="absolute top-4 right-4 text-gray-600 hover:text-gray-800">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 4c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm0 8c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
+      </svg>
+    </button>
 
-    <!-- Bearer Key Section -->
-    <div class="mb-6">
-      <h2 class="text-lg font-semibold text-gray-700 mb-2">Bearer Key</h2>
-      <div class="flex flex-col gap-4">
-        <input type="text" id="bearerKeyInput" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter Bearer Key">
-        <button id="saveBearerKey" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save Key</button>
-        <div id="bearerKeyStatus" class="text-sm text-gray-600"></div>
+    <!-- Modal for Bearer Key -->
+    <div id="settingsModal" class="hidden fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center">
+      <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+        <h2 class="text-lg font-semibold text-gray-700 mb-4">Settings</h2>
+        <div class="flex flex-col gap-4">
+          <input type="text" id="bearerKeyInput" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter Bearer Key">
+          <button id="saveBearerKey" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save Key</button>
+          <button id="closeSettings" class="text-gray-500 hover:text-gray-700 text-sm">Close</button>
+        </div>
+        <div id="bearerKeyStatus" class="mt-2 text-sm text-gray-600"></div>
       </div>
     </div>
 
+    <!-- Main Content -->
+    <h1 class="text-2xl font-bold text-gray-800 mb-4">RAG WebUI</h1>
+
     <!-- File Upload Section -->
     <div class="mb-6">
       <h2 class="text-lg font-semibold text-gray-700 mb-2">Upload Files</h2>
@@ -42,6 +53,19 @@
   </div>
 
   <script>
+    // Modal Handling
+    const settingsButton = document.getElementById('settingsButton');
+    const settingsModal = document.getElementById('settingsModal');
+    const closeSettings = document.getElementById('closeSettings');
+
+    settingsButton.addEventListener('click', () => {
+      settingsModal.classList.remove('hidden');
+    });
+
+    closeSettings.addEventListener('click', () => {
+      settingsModal.classList.add('hidden');
+    });
+
     // Bearer Key Handling
     const bearerKeyInput = document.getElementById('bearerKeyInput');
     const saveBearerKey = document.getElementById('saveBearerKey');
