diff --git a/src/popup.html b/src/popup.html
index 89bba80c..90ca7abc 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -64,6 +64,12 @@ <h1 class="setup-title">Initialize Copilot</h1>
             </button>
           </div>
 
+          <span
+            id="api-key-error"
+            style="color: #ef4444; font-size: 12px; display: none; margin-top: 4px"
+            >API key cannot be empty</span
+          >
+
           <button id="save-keys" class="setup-btn">
             <span>Save Configuration</span>
             <span class="btn-icon">→</span>
diff --git a/src/popup.ts b/src/popup.ts
index 756caabf..c5a449f5 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -105,6 +105,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     if (!apiKey) {
       shakeElement(apiKeyInput);
+      const errorMsg = document.getElementById("api-key-error");
+      if (errorMsg) errorMsg.style.display = "block";
       return;
     }
     //Validation.
@@ -753,3 +755,14 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   });
 });
+
+// Clear error message when user starts typing
+const apiInputBox = document.getElementById("api-key-input");
+if (apiInputBox) {
+  apiInputBox.addEventListener("input", () => {
+    const errorMsg = document.getElementById("api-key-error");
+    if (errorMsg && errorMsg.style.display === "block") {
+      errorMsg.style.display = "none";
+    }
+  });
+}