diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index a1a93e3eba542..36b301823f136 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -9,7 +9,7 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup, EuiLink } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Synopsis } from './synopsis';
@@ -224,7 +224,17 @@ class TutorialDirectoryUi extends React.Component {
           description: (
             <FormattedMessage
               id="home.tutorial.addDataToKibanaDescription"
-              defaultMessage="In addition to adding integrations, you can try our sample data, or upload your own data."
+              defaultMessage="In addition to adding {integrationsLink}, you can try our sample data or upload your own data."
+              values={{
+                integrationsLink: (
+                  <EuiLink href={this.props.addBasePath(`/app/integrations/browse`)}>
+                    <FormattedMessage
+                      id="home.tutorial.addDataToKibanaDescription.integrations"
+                      defaultMessage="integrations"
+                    />
+                  </EuiLink>
+                ),
+              }}
             />
           ),
           tabs,
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 30703a4a5ebb7..8e1d0cb92e006 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
@@ -15,16 +15,11 @@ exports[`ElasticAgentCard props button 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
         Button
-        <EuiButton
-          fill={true}
-        >
-          Button
-        </EuiButton>
-      </div>
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -55,15 +50,11 @@ exports[`ElasticAgentCard props category 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse/custom"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -94,16 +85,11 @@ exports[`ElasticAgentCard props href 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
         Button
-        <EuiButton
-          fill={true}
-        >
-          Button
-        </EuiButton>
-      </div>
+      </EuiButton>
     }
     href="#"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -135,15 +121,11 @@ exports[`ElasticAgentCard props recommended 1`] = `
     betaBadgeLabel="Recommended"
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@@ -174,15 +156,11 @@ exports[`ElasticAgentCard renders 1`] = `
   <EuiCard
     description="Use Elastic Agent for a simple, unified way to collect data from your machines."
     footer={
-      <div
-        className="eui-textCenter"
+      <EuiButton
+        fill={true}
       >
-        <EuiButton
-          fill={true}
-        >
-          Add Elastic Agent
-        </EuiButton>
-      </div>
+        Add Elastic Agent
+      </EuiButton>
     }
     href="/app/integrations/browse"
     image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
index 6959e2e29095a..fccbbe3a9e8ee 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NoDataCard props button 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -25,31 +25,27 @@ exports[`NoDataCard props button 1`] = `
   <div
     class="euiCard__footer"
   >
-    <div
-      class="eui-textCenter"
+    <button
+      class="euiButton euiButton--primary euiButton--fill"
+      type="button"
     >
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Button
-          </span>
+          Button
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 `;
 
 exports[`NoDataCard props href 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable"
 >
   <div
     class="euiCard__content"
@@ -79,31 +75,27 @@ exports[`NoDataCard props href 1`] = `
   <div
     class="euiCard__footer"
   >
-    <div
-      class="eui-textCenter"
+    <button
+      class="euiButton euiButton--primary euiButton--fill"
+      type="button"
     >
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Button
-          </span>
+          Button
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 `;
 
 exports[`NoDataCard props recommended 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasBetaBadge"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
 >
   <div
     class="euiCard__content"
@@ -134,19 +126,12 @@ exports[`NoDataCard props recommended 1`] = `
       Recommended
     </span>
   </span>
-  <div
-    class="euiCard__footer"
-  >
-    <div
-      class="eui-textCenter"
-    />
-  </div>
 </div>
 `;
 
 exports[`NoDataCard renders 1`] = `
 <div
-  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned"
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
 >
   <div
     class="euiCard__content"
@@ -166,12 +151,5 @@ exports[`NoDataCard renders 1`] = `
       </p>
     </div>
   </div>
-  <div
-    class="euiCard__footer"
-  >
-    <div
-      class="eui-textCenter"
-    />
-  </div>
 </div>
 `;
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 d429f9d712081..b9d412fe4df89 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
@@ -44,7 +44,6 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
       <EuiCard
         paddingSize="l"
         image={image}
-        textAlign="left"
         title={
           <EuiTextColor color="default">
             {i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', {
@@ -93,12 +92,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
           defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`,
         })}
         betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-        footer={
-          <div className="eui-textCenter">
-            {button}
-            {footer}
-          </div>
-        }
+        footer={footer}
         layout={layout as 'vertical' | undefined}
         {...cardRest}
       />
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
index ad40a4f8f5499..9cc38cc5f6038 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
@@ -27,7 +27,6 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
   return (
     <EuiCard
       paddingSize="l"
-      textAlign="left"
       // TODO: we should require both title and description to be passed in by consumers since defaults are not adequate.
       // see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140
       title={title!}
@@ -35,7 +34,7 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
         defaultMessage: `Proceed without collecting data`,
       })}
       betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-      footer={<div className="eui-textCenter">{footer}</div>}
+      footer={footer}
       layout={layout as 'vertical' | undefined}
       {...cardRest}
     />
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
index f1bc12e74cf4e..d4b50536d0d09 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
@@ -1,5 +1,5 @@
 .kbnNoDataPageContents__item:only-child {
-  min-width: 400px;
+  min-width: ($euiSize * 22.5);
 
   @include euiBreakpoint('xs', 's') {
     min-width: auto;