diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 2476973fa5..23d408706d 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -103,15 +103,22 @@ const MCPDetailContent: FC<Props> = ({
       return
     if (!detail)
       return
-    const res = await authorizeMcp({
-      provider_id: detail.id,
-    })
-    if (res.result === 'success')
-      handleUpdateTools()
+    try {
+      const res = await authorizeMcp({
+        provider_id: detail.id,
+      })
+      if (res.result === 'success')
+        handleUpdateTools()
 
-    else if (res.authorization_url)
-      openOAuthPopup(res.authorization_url, handleOAuthCallback)
-  }, [onFirstCreate, isCurrentWorkspaceManager, detail, authorizeMcp, handleUpdateTools, handleOAuthCallback])
+      else if (res.authorization_url)
+        openOAuthPopup(res.authorization_url, handleOAuthCallback)
+    }
+    catch {
+      // On authorization error, refresh the parent component state
+      // to update the connection status indicator
+      onUpdate()
+    }
+  }, [onFirstCreate, isCurrentWorkspaceManager, detail, authorizeMcp, handleUpdateTools, handleOAuthCallback, onUpdate])
 
   const handleUpdate = useCallback(async (data: any) => {
     if (!detail)