diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
index 00cd9e3f1e0ddc..2ab8cb4a78d86c 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
@@ -43,13 +43,13 @@ enum TASK_STATE_COLOR {
 
 export const getTaskStateBadge = (
   state: DataFrameAnalyticsStats['state'],
-  reason?: DataFrameAnalyticsStats['reason']
+  failureReason?: DataFrameAnalyticsStats['failure_reason']
 ) => {
   const color = TASK_STATE_COLOR[state];
 
-  if (isDataFrameAnalyticsFailed(state) && reason !== undefined) {
+  if (isDataFrameAnalyticsFailed(state) && failureReason !== undefined) {
     return (
-      <EuiToolTip content={reason}>
+      <EuiToolTip content={failureReason}>
         <EuiBadge className="mlTaskStateBadge" color={color}>
           {state}
         </EuiBadge>
@@ -229,7 +229,7 @@ export const getColumns = (
       sortable: (item: DataFrameAnalyticsListRow) => item.stats.state,
       truncateText: true,
       render(item: DataFrameAnalyticsListRow) {
-        return getTaskStateBadge(item.stats.state, item.stats.reason);
+        return getTaskStateBadge(item.stats.state, item.stats.failure_reason);
       },
       width: '100px',
       'data-test-subj': 'mlAnalyticsTableColumnStatus',
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts
index ff7da8d67852fb..2c3ded52eba9b2 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts
@@ -50,7 +50,7 @@ export interface DataFrameAnalyticsStats {
     transport_address: string;
   };
   progress: ProgressSection[];
-  reason?: string;
+  failure_reason?: string;
   state: DATA_FRAME_TASK_STATE;
 }
 
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
index 8772be698bf58a..ab1946a6b25e32 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
@@ -24,6 +24,7 @@ import {
   loadEvalData,
   Eval,
 } from '../../../../common';
+import { getTaskStateBadge } from './columns';
 import { isCompletedAnalyticsJob } from './common';
 import {
   isRegressionAnalysis,
@@ -158,7 +159,11 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       defaultMessage: 'State',
     }),
     items: Object.entries(stateValues).map(s => {
-      return { title: s[0].toString(), description: getItemDescription(s[1]) };
+      if (s[0].toString() === 'state') {
+        return { title: s[0].toString(), description: getTaskStateBadge(getItemDescription(s[1])) };
+      } else {
+        return { title: s[0].toString(), description: getItemDescription(s[1]) };
+      }
     }),
     position: 'left',
   };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/messages.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/messages.tsx
index f228d8fe900976..65691c3e494860 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/messages.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/messages.tsx
@@ -4,27 +4,36 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, FC } from 'react';
+import React, { FC } from 'react';
 
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiCodeBlock, EuiSpacer } from '@elastic/eui';
 
 import { FormMessage } from '../../hooks/use_create_analytics_form/state'; // State
 
 interface Props {
-  messages: any; // TODO: fix --> something like State['requestMessages'];
+  messages: FormMessage[];
 }
 
-export const Messages: FC<Props> = ({ messages }) =>
-  messages.map((requestMessage: FormMessage, i: number) => (
-    <Fragment key={i}>
-      <EuiCallOut
-        title={requestMessage.message}
-        color={requestMessage.error !== undefined ? 'danger' : 'primary'}
-        iconType={requestMessage.error !== undefined ? 'alert' : 'checkInCircleFilled'}
-        size="s"
-      >
-        {requestMessage.error !== undefined ? <p>{requestMessage.error}</p> : null}
-      </EuiCallOut>
-      <EuiSpacer size="s" />
-    </Fragment>
-  ));
+export const Messages: FC<Props> = ({ messages }) => {
+  return (
+    <>
+      {messages.map((requestMessage, i) => (
+        <>
+          <EuiCallOut
+            title={requestMessage.message}
+            color={requestMessage.error !== undefined ? 'danger' : 'primary'}
+            iconType={requestMessage.error !== undefined ? 'alert' : 'checkInCircleFilled'}
+            size="s"
+          >
+            {requestMessage.error !== undefined && (
+              <EuiCodeBlock language="json" fontSize="s" paddingSize="s" isCopyable>
+                {requestMessage.error}
+              </EuiCodeBlock>
+            )}
+          </EuiCallOut>
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
index 74161d7c48c246..1bf3a03796fd39 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
@@ -39,12 +39,25 @@ export interface CreateAnalyticsFormProps {
   state: State;
 }
 
+interface ErrorResponse {
+  body: {
+    statusCode: number;
+    error: string;
+    message: string;
+  };
+  name: string;
+}
+
+const isErrorResponse = (arg: any): arg is ErrorResponse => {
+  return arg?.body?.error !== undefined && arg?.body?.message !== undefined;
+};
+
 export function getErrorMessage(error: any) {
-  if (typeof error === 'object' && typeof error.message === 'string') {
-    return error.message;
+  if (isErrorResponse(error)) {
+    return `${error.body.error}: ${error.body.message}`;
+  } else {
+    return JSON.stringify(error, null, 2);
   }
-
-  return JSON.stringify(error);
 }
 
 export const useCreateAnalyticsForm = (): CreateAnalyticsFormProps => {
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js b/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
index a4300de5abbbbb..c5b0f0b4691b75 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
+++ b/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -177,12 +177,22 @@ export class FileDataVisualizerView extends Component {
       });
     } catch (error) {
       console.error(error);
+
+      let serverErrorMsg;
+      const isErrorResponse =
+        error?.body?.error !== undefined && error?.body?.message !== undefined;
+      if (isErrorResponse === true) {
+        serverErrorMsg = `${error.body.error}: ${error.body.message}`;
+      } else {
+        serverErrorMsg = JSON.stringify(error, null, 2);
+      }
+
       this.setState({
         results: undefined,
         loaded: false,
         loading: false,
         fileCouldNotBeRead: true,
-        serverErrorMessage: error.message,
+        serverErrorMessage: serverErrorMsg,
       });
 
       // as long as the previous overrides are different to the current overrides,