diff --git a/packages/kbn-shared-ux-components/src/empty_state/assets/index.tsx b/packages/kbn-shared-ux-components/src/empty_state/assets/index.tsx
index 001efa143b1cc..e42627da6983f 100644
--- a/packages/kbn-shared-ux-components/src/empty_state/assets/index.tsx
+++ b/packages/kbn-shared-ux-components/src/empty_state/assets/index.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 
 import { withSuspense } from '@kbn/shared-ux-utility';
 
@@ -20,5 +20,5 @@ export const LazyDataViewIllustration = React.lazy(() =>
 
 export const DataViewIllustration = withSuspense(
   LazyDataViewIllustration,
-  <EuiLoadingSpinner size="xl" />
+  <EuiPanel color="subdued" style={{ width: 226, height: 206 }} />
 );
diff --git a/packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.component.test.tsx b/packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.component.test.tsx
index 1d8028d4889a0..87dd68e202bc2 100644
--- a/packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.component.test.tsx
+++ b/packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.component.test.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { EuiButton, EuiPanel } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { NoDataViews } from './no_data_views.component';
 import { DocumentationLink } from './documentation_link';
 
@@ -21,7 +21,7 @@ describe('<NoDataViewsComponent />', () => {
         dataViewsDocLink={'dummy'}
       />
     );
-    expect(component.find(EuiPanel).length).toBe(1);
+    expect(component.find(EuiEmptyPrompt).length).toBe(1);
     expect(component.find(EuiButton).length).toBe(1);
     expect(component.find(DocumentationLink).length).toBe(1);
   });
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
index ab465d9a6c5b2..c871196b92282 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
@@ -4,7 +4,21 @@ exports[`ElasticAgentCardComponent props button 1`] = `
 <NoDataCard
   button="Button"
   description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-  image="test-file-stub"
+  image={
+    <EuiImage
+      alt=""
+      size="fullWidth"
+      style={
+        Object {
+          "background": "aliceblue",
+          "height": 240,
+          "objectFit": "cover",
+          "width": "max(100%, 360px)",
+        }
+      }
+      url="test-file-stub"
+    />
+  }
   title="Add Elastic Agent"
 />
 `;
@@ -13,7 +27,21 @@ exports[`ElasticAgentCardComponent props href 1`] = `
 <NoDataCard
   description="Use Elastic Agent for a simple, unified way to collect data from your machines."
   href="some path"
-  image="test-file-stub"
+  image={
+    <EuiImage
+      alt=""
+      size="fullWidth"
+      style={
+        Object {
+          "background": "aliceblue",
+          "height": 240,
+          "objectFit": "cover",
+          "width": "max(100%, 360px)",
+        }
+      }
+      url="test-file-stub"
+    />
+  }
   title="Add Elastic Agent"
 />
 `;
@@ -21,7 +49,21 @@ exports[`ElasticAgentCardComponent props href 1`] = `
 exports[`ElasticAgentCardComponent renders 1`] = `
 <NoDataCard
   description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-  image="test-file-stub"
+  image={
+    <EuiImage
+      alt=""
+      size="fullWidth"
+      style={
+        Object {
+          "background": "aliceblue",
+          "height": 240,
+          "objectFit": "cover",
+          "width": "max(100%, 360px)",
+        }
+      }
+      url="test-file-stub"
+    />
+  }
   title="Add Elastic Agent"
 />
 `;
@@ -35,7 +77,21 @@ exports[`ElasticAgentCardComponent renders with canAccessFleet false 1`] = `
       This integration is not yet enabled. Your administrator has the required permissions to turn it on.
     </EuiTextColor>
   }
-  image="test-file-stub"
+  image={
+    <EuiImage
+      alt=""
+      size="fullWidth"
+      style={
+        Object {
+          "background": "aliceblue",
+          "height": 240,
+          "objectFit": "cover",
+          "width": "max(100%, 360px)",
+        }
+      }
+      url="test-file-stub"
+    />
+  }
   isDisabled={true}
   title={
     <EuiTextColor
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
index b15f254a5274a..903e3aa2783a6 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
@@ -182,7 +182,21 @@ exports[`ElasticAgentCard renders 1`] = `
                 <NoDataCard
                   description="Use Elastic Agent for a simple, unified way to collect data from your machines."
                   href="/app/integrations/browse"
-                  image="test-file-stub"
+                  image={
+                    <EuiImage
+                      alt=""
+                      size="fullWidth"
+                      style={
+                        Object {
+                          "background": "aliceblue",
+                          "height": 240,
+                          "objectFit": "cover",
+                          "width": "max(100%, 360px)",
+                        }
+                      }
+                      url="test-file-stub"
+                    />
+                  }
                   title="Add Elastic Agent"
                 >
                   <EuiCard
@@ -201,7 +215,21 @@ exports[`ElasticAgentCard renders 1`] = `
                       </EuiButton>
                     }
                     href="/app/integrations/browse"
-                    image="test-file-stub"
+                    image={
+                      <EuiImage
+                        alt=""
+                        size="fullWidth"
+                        style={
+                          Object {
+                            "background": "aliceblue",
+                            "height": 240,
+                            "objectFit": "cover",
+                            "width": "max(100%, 360px)",
+                          }
+                        }
+                        url="test-file-stub"
+                      />
+                    }
                     paddingSize="l"
                     title="Add Elastic Agent"
                   >
@@ -287,10 +315,37 @@ exports[`ElasticAgentCard renders 1`] = `
                             <div
                               className="euiCard__image"
                             >
-                              <img
+                              <EuiImage
                                 alt=""
-                                src="test-file-stub"
-                              />
+                                size="fullWidth"
+                                style={
+                                  Object {
+                                    "background": "aliceblue",
+                                    "height": 240,
+                                    "objectFit": "cover",
+                                    "width": "max(100%, 360px)",
+                                  }
+                                }
+                                url="test-file-stub"
+                              >
+                                <figure
+                                  className="euiImage euiImage--fullWidth"
+                                >
+                                  <img
+                                    alt=""
+                                    className="euiImage__img"
+                                    src="test-file-stub"
+                                    style={
+                                      Object {
+                                        "background": "aliceblue",
+                                        "height": 240,
+                                        "objectFit": "cover",
+                                        "width": "max(100%, 360px)",
+                                      }
+                                    }
+                                  />
+                                </figure>
+                              </EuiImage>
                             </div>
                           </div>
                           <div
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
index 7b046bbe3fe8c..316d746e47867 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiImage, EuiTextColor } from '@elastic/eui';
 import { ElasticAgentCardProps } from './types';
 import { NoDataCard } from './no_data_card';
 import ElasticAgentCardIllustration from './assets/elastic_agent_card.svg';
@@ -64,5 +64,19 @@ export const ElasticAgentCardComponent: FunctionComponent<ElasticAgentCardCompon
         isDisabled: true,
       };
 
-  return <NoDataCard image={ElasticAgentCardIllustration} {...props} {...cardRest} />;
+  const image = (
+    <EuiImage
+      size="fullWidth"
+      style={{
+        width: 'max(100%, 360px)',
+        height: 240,
+        objectFit: 'cover',
+        background: 'aliceblue',
+      }}
+      url={ElasticAgentCardIllustration}
+      alt=""
+    />
+  );
+
+  return <NoDataCard image={image} {...props} {...cardRest} />;
 };
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
index f6dcf46b27d8c..c11c1a11e7369 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
@@ -27,7 +27,21 @@ exports[`ElasticAgentCard props button 1`] = `
       </EuiButton>
     }
     href="/app/integrations/browse"
-    image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+    image={
+      <EuiImage
+        alt=""
+        size="fullWidth"
+        style={
+          Object {
+            "background": "aliceblue",
+            "height": 240,
+            "objectFit": "cover",
+            "width": "max(100%, 360px)",
+          }
+        }
+        url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+      />
+    }
     paddingSize="l"
     title={
       <EuiScreenReaderOnly>
@@ -67,7 +81,21 @@ exports[`ElasticAgentCard props category 1`] = `
       </EuiButton>
     }
     href="/app/integrations/browse/custom"
-    image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+    image={
+      <EuiImage
+        alt=""
+        size="fullWidth"
+        style={
+          Object {
+            "background": "aliceblue",
+            "height": 240,
+            "objectFit": "cover",
+            "width": "max(100%, 360px)",
+          }
+        }
+        url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+      />
+    }
     paddingSize="l"
     title={
       <EuiScreenReaderOnly>
@@ -107,7 +135,21 @@ exports[`ElasticAgentCard props href 1`] = `
       </EuiButton>
     }
     href="#"
-    image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+    image={
+      <EuiImage
+        alt=""
+        size="fullWidth"
+        style={
+          Object {
+            "background": "aliceblue",
+            "height": 240,
+            "objectFit": "cover",
+            "width": "max(100%, 360px)",
+          }
+        }
+        url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+      />
+    }
     paddingSize="l"
     title={
       <EuiScreenReaderOnly>
@@ -147,7 +189,21 @@ exports[`ElasticAgentCard props recommended 1`] = `
       </EuiButton>
     }
     href="/app/integrations/browse"
-    image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+    image={
+      <EuiImage
+        alt=""
+        size="fullWidth"
+        style={
+          Object {
+            "background": "aliceblue",
+            "height": 240,
+            "objectFit": "cover",
+            "width": "max(100%, 360px)",
+          }
+        }
+        url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+      />
+    }
     paddingSize="l"
     title={
       <EuiScreenReaderOnly>
@@ -187,7 +243,21 @@ exports[`ElasticAgentCard renders 1`] = `
       </EuiButton>
     }
     href="/app/integrations/browse"
-    image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+    image={
+      <EuiImage
+        alt=""
+        size="fullWidth"
+        style={
+          Object {
+            "background": "aliceblue",
+            "height": 240,
+            "objectFit": "cover",
+            "width": "max(100%, 360px)",
+          }
+        }
+        url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
+      />
+    }
     paddingSize="l"
     title={
       <EuiScreenReaderOnly>
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
index 2cec3045c31c1..a8701fb7b7a34 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from '@kbn/core/public';
-import { EuiButton, EuiCard, EuiTextColor, EuiScreenReaderOnly } from '@elastic/eui';
+import { EuiButton, EuiCard, EuiTextColor, EuiScreenReaderOnly, EuiImage } from '@elastic/eui';
 import { useKibana } from '../../../context';
 import { NoDataPageActions, NO_DATA_RECOMMENDED } from '../no_data_page';
 import { RedirectAppLinks } from '../../../app_links';
@@ -35,10 +35,24 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
     services: { http, application },
   } = useKibana<CoreStart>();
   const addBasePath = http.basePath.prepend;
-  const image = addBasePath(`/plugins/kibanaReact/assets/elastic_agent_card.svg`);
+  const imageUrl = addBasePath(`/plugins/kibanaReact/assets/elastic_agent_card.svg`);
   const canAccessFleet = application.capabilities.navLinks.integrations;
   const hasCategory = category ? `/${category}` : '';
 
+  const image = (
+    <EuiImage
+      size="fullWidth"
+      style={{
+        width: 'max(100%, 360px)',
+        height: 240,
+        objectFit: 'cover',
+        background: 'aliceblue',
+      }}
+      url={imageUrl}
+      alt=""
+    />
+  );
+
   if (!canAccessFleet) {
     return (
       <EuiCard