diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index b06ad37..55a3b62 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -42,6 +42,9 @@
   let managedPassword = $state("");
   let autoCheckUpdates = $state(true);
 
+  let saving = $state(false);
+  let saveMessage = $state("");
+
   // Fetched device lists
   let audioDevices = $state<{ id: string; name: string }[]>([]);
   let computeDevices = $state<{ id: string; name: string }[]>([]);
@@ -192,11 +195,16 @@
       },
     };
 
+    saving = true;
+    saveMessage = "";
     try {
-      await configStore.saveConfig(updates);
-      onClose();
+      await configStore.updateConfig(updates);
+      saveMessage = "Settings saved!";
+      setTimeout(() => onClose(), 600);
     } catch (err) {
       console.error("Failed to save settings:", err);
+      saveMessage = `Error: ${err}`;
+      saving = false;
     }
   }
 
@@ -643,8 +651,13 @@
     </div>
 
     <div class="settings-footer">
-      <button onclick={handleCancel}>Cancel</button>
-      <button class="primary" onclick={handleSave}>Save</button>
+      {#if saveMessage}
+        <span class="save-message" class:error={saveMessage.startsWith("Error")}>{saveMessage}</span>
+      {/if}
+      <button onclick={handleCancel} disabled={saving}>Cancel</button>
+      <button class="primary" onclick={handleSave} disabled={saving}>
+        {saving ? "Saving..." : "Save"}
+      </button>
     </div>
   </div>
 </div>
@@ -788,10 +801,21 @@
 
   .settings-footer {
     display: flex;
+    align-items: center;
     justify-content: flex-end;
     gap: 8px;
     padding: 16px 20px;
     border-top: 1px solid var(--border-color);
     flex-shrink: 0;
   }
+
+  .save-message {
+    margin-right: auto;
+    font-size: 13px;
+    color: #4CAF50;
+  }
+
+  .save-message.error {
+    color: #f44336;
+  }
 </style>