diff --git a/pkg/controller/handlers/toolreference/toolreference.go b/pkg/controller/handlers/toolreference/toolreference.go
index 34ebc62c..d8659ba7 100644
--- a/pkg/controller/handlers/toolreference/toolreference.go
+++ b/pkg/controller/handlers/toolreference/toolreference.go
@@ -3,10 +3,12 @@ package toolreference
 import (
 	"context"
 	"crypto/sha256"
+	"encoding/json"
 	"fmt"
 	"net/url"
 	"os"
 	"path"
+	"regexp"
 	"strings"
 	"time"
 
@@ -385,8 +387,22 @@ func (h *Handler) BackPopulateModels(req router.Request, _ router.Response) erro
 	if err != nil {
 		// Don't error and retry because it will likely fail again. Log the error, and the user can re-sync manually.
 		// Also, the toolRef.Status.Error field will bubble up to the user in the UI.
-		toolRef.Status.Error = err.Error()
-		log.Errorf(err.Error())
+
+		// Check if the model provider returned a properly formatted error message and set it as status
+		re := regexp.MustCompile(`\{.*"error":.*}`)
+		match := re.FindString(err.Error())
+		if match != "" {
+			toolRef.Status.Error = match
+			type errorResponse struct {
+				Error string `json:"error"`
+			}
+			var eR errorResponse
+			if err := json.Unmarshal([]byte(match), &eR); err == nil {
+				toolRef.Status.Error = eR.Error
+			}
+		}
+
+		log.Errorf("%v", err)
 		return nil
 	}
 
diff --git a/ui/admin/app/components/model-providers/ModelProviderForm.tsx b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
index b38cbc52..1c6139e3 100644
--- a/ui/admin/app/components/model-providers/ModelProviderForm.tsx
+++ b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
@@ -199,7 +199,15 @@ export function ModelProviderForm({
                         <AlertDescription>
                             Your configuration was saved, but we were not able
                             to connect to the model provider. Please check your
-                            configuration and try again.
+                            configuration and try again:{" "}
+                            <strong>
+                                {(typeof fetchAvailableModels.error ===
+                                    "object" &&
+                                    "message" in fetchAvailableModels.error &&
+                                    (fetchAvailableModels.error
+                                        .message as string)) ??
+                                    "Unknown error"}
+                            </strong>
                         </AlertDescription>
                     </Alert>
                 </div>
diff --git a/ui/admin/app/hooks/useAsync.tsx b/ui/admin/app/hooks/useAsync.tsx
index d0246107..c9a7999d 100644
--- a/ui/admin/app/hooks/useAsync.tsx
+++ b/ui/admin/app/hooks/useAsync.tsx
@@ -43,6 +43,20 @@ export function useAsync<TData, TParams extends unknown[]>(
                     onSuccess?.(data, params);
                 })
                 .catch((error) => {
+                    if (
+                        error.response &&
+                        typeof error.response.data === "string"
+                    ) {
+                        const errorMessageMatch =
+                            error.response.data.match(/{"error":"(.*?)"}/);
+                        if (errorMessageMatch) {
+                            const errorMessage = JSON.parse(
+                                errorMessageMatch[0]
+                            ).error;
+                            console.log("Error: ", errorMessage);
+                            error.message = errorMessage;
+                        }
+                    }
                     setError(error);
                     onError?.(error, params);
                 })