diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
index 4d422de257..0f346021b6 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
@@ -32,7 +32,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
   handleJsonWrapperClick,
   tooltipContent,
 }) => {
-  const errorMessage = getErrorMessageFromActionResponse(
+  const [errorTitle, errorMessage] = getErrorMessageFromActionResponse(
     actionResponse,
     action.pluginType,
   );
@@ -79,7 +79,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
             Request has failed to execute
             {errorMessage && ":"}
           </Styled.ErrorDefaultMessage>
-          <div data-testid="t--response-error">{errorMessage}</div>
+          <div data-testid="t--response-error">{errorTitle}</div>
           <LogHelper
             logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
             message={`${errorMessage}`}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
index 9f877f1e59..be4d512e21 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
@@ -1,32 +1,52 @@
+// Type imports
 import type { ActionResponse } from "api/ActionAPI";
+
+// Application-specific imports
 import { PluginType } from "entities/Plugin";
 import { DEFAULT_ERROR_MESSAGE } from "../constants";
 
+/**
+ * Checks if the plugin type is supported for detailed error handling
+ */
+const isSupportedPluginTypeForErrorDetails = (
+  pluginType?: PluginType,
+): boolean => {
+  return (
+    pluginType === PluginType.DB ||
+    pluginType === PluginType.SAAS ||
+    pluginType === PluginType.EXTERNAL_SAAS ||
+    pluginType === PluginType.API
+  );
+};
+
 /**
  * Retrieves the error message from the action response.
+ * Returns a tuple of [errorTitle, errorMessage]
  */
 export const getErrorMessageFromActionResponse = (
   actionResponse?: ActionResponse,
   pluginType?: PluginType,
 ) => {
-  // Return default error message if action response is not provided
-  if (!actionResponse) return DEFAULT_ERROR_MESSAGE;
-
-  const { body, pluginErrorDetails } = actionResponse;
-
-  if (pluginErrorDetails) {
-    // Return downstream error message if available
-    // Otherwise, return Appsmith error message
-    return (
-      pluginErrorDetails.downstreamErrorMessage ||
-      pluginErrorDetails.appsmithErrorMessage
-    );
+  if (!actionResponse) {
+    return [DEFAULT_ERROR_MESSAGE, DEFAULT_ERROR_MESSAGE];
   }
 
-  // Return body if plugin type is DB/SAAS/ExternalSAAS, otherwise return default error message
-  return pluginType === PluginType.DB ||
-    pluginType === PluginType.SAAS ||
-    pluginType === PluginType.EXTERNAL_SAAS
+  const { body, pluginErrorDetails, statusCode } = actionResponse;
+
+  // Determine base error message based on plugin type
+  let errorMessage = isSupportedPluginTypeForErrorDetails(pluginType)
     ? body
     : DEFAULT_ERROR_MESSAGE;
+
+  // Override with plugin-specific error details if available
+  if (pluginErrorDetails) {
+    errorMessage =
+      pluginErrorDetails.downstreamErrorMessage ||
+      pluginErrorDetails.appsmithErrorMessage;
+  }
+
+  // For API plugin types, use status code as the title
+  const errorTitle = pluginType === PluginType.API ? statusCode : errorMessage;
+
+  return [errorTitle, errorMessage];
 };