diff --git a/frontend/src/extensions/external-lib-app-extensions/vega-lite/__snapshots__/vega-lite-markdown-extension.spec.tsx.snap b/frontend/src/extensions/external-lib-app-extensions/vega-lite/__snapshots__/vega-lite-markdown-extension.spec.tsx.snap
index 5c0dadf7d..fb33bbf08 100644
--- a/frontend/src/extensions/external-lib-app-extensions/vega-lite/__snapshots__/vega-lite-markdown-extension.spec.tsx.snap
+++ b/frontend/src/extensions/external-lib-app-extensions/vega-lite/__snapshots__/vega-lite-markdown-extension.spec.tsx.snap
@@ -15,3 +15,19 @@ exports[`Vega-Lite markdown extensions renders a vega-lite codeblock 1`] = `
 
 </div>
 `;
+
+exports[`Vega-Lite markdown extensions shows an error on invalid json 1`] = `
+<div>
+  <pre>
+    <span>
+      this is a mock for vega lite
+      <code>
+        wpieoghwpoegj
+
+      </code>
+    </span>
+  </pre>
+  
+
+</div>
+`;
diff --git a/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx b/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
index f006f27d8..0bce2588e 100644
--- a/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
@@ -8,10 +8,10 @@ import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { Logger } from '../../../utils/logger'
 import React, { useEffect, useRef } from 'react'
-import { Alert } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { useAsync } from 'react-use'
 import type { VisualizationSpec } from 'vega-embed'
+import { TranslatedApplicationErrorAlert } from '../../../components/common/application-error-alert/translated-application-error-alert'
 
 const log = new Logger('VegaChart')
 
@@ -60,9 +60,7 @@ export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
   return (
     <AsyncLoadingBoundary loading={libLoading || !vegaEmbed} error={libLoadingError} componentName={'Vega Lite'}>
       <ShowIf condition={!!renderingError}>
-        <Alert variant={'danger'}>
-          <Trans i18nKey={'renderer.vega-lite.errorJson'} />
-        </Alert>
+        <TranslatedApplicationErrorAlert errorI18nKey={'renderer.vega-lite.errorJson'} />
       </ShowIf>
       <div className={'text-center'}>
         <div ref={diagramContainer} />