diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index d57288db3..e67da7783 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -81,12 +81,12 @@ const CredentialPanel = ({
   }, [authorized, authRemoved, current_credential_name, hasCredential])
 
   const color = useMemo(() => {
-    if (authRemoved)
+    if (authRemoved || !hasCredential)
       return 'red'
     if (notAllowedToUse)
       return 'gray'
     return 'green'
-  }, [authRemoved, notAllowedToUse])
+  }, [authRemoved, notAllowedToUse, hasCredential])
 
   return (
     <>