diff --git a/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx b/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx
index 12a68807c4..fa69cf84b3 100644
--- a/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx
+++ b/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx
@@ -88,20 +88,23 @@ export function ConfigureProvidersGrid() {
     }
 
     try {
-      // Always delete the old key first when editing
-      const deleteResponse = await fetch(getApiUrl('/secrets/delete'), {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Secret-Key': getSecretKey(),
-        },
-        body: JSON.stringify({ key: keyName }),
-      });
+      // Delete existing key if provider is already configured
+      const isUpdate = providers.find((p) => p.id === selectedForSetup)?.isConfigured;
+      if (isUpdate) {
+        const deleteResponse = await fetch(getApiUrl('/secrets/delete'), {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Secret-Key': getSecretKey(),
+          },
+          body: JSON.stringify({ key: keyName }),
+        });
 
-      if (!deleteResponse.ok) {
-        const errorText = await deleteResponse.text();
-        console.error('Delete response error:', errorText);
-        throw new Error('Failed to delete old key');
+        if (!deleteResponse.ok) {
+          const errorText = await deleteResponse.text();
+          console.error('Delete response error:', errorText);
+          throw new Error('Failed to delete old key');
+        }
       }
 
       // Store new key
@@ -123,17 +126,23 @@ export function ConfigureProvidersGrid() {
         throw new Error('Failed to store new key');
       }
 
-      toast.success(`Successfully updated API key for ${provider}`);
+      toast.success(
+        isUpdate
+          ? `Successfully updated API key for ${provider}`
+          : `Successfully added API key for ${provider}`
+      );
 
       const updatedKeys = await getActiveProviders();
       setActiveKeys(updatedKeys);
 
       setShowSetupModal(false);
       setSelectedForSetup(null);
-      setModalMode('setup'); // Reset modal mode
+      setModalMode('setup');
     } catch (error) {
       console.error('Error handling modal submit:', error);
-      toast.error(`Failed to update API key for ${provider}`);
+      toast.error(
+        `Failed to ${providers.find((p) => p.id === selectedForSetup)?.isConfigured ? 'update' : 'add'} API key for ${provider}`
+      );
     }
   };
 
@@ -202,7 +211,7 @@ export function ConfigureProvidersGrid() {
       {showSetupModal && selectedForSetup && (
         <div className="relative z-[9999]">
           <ProviderSetupModal
-            provider={providers.find((p) => p.id === selectedForSetup)?.name}
+            provider={providers.find((p) => p.id === selectedForSetup)?.name || ''}
             model="Example Model"
             endpoint="Example Endpoint"
             title={