diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap b/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap
index 74be4594642a5..6f9f2dcc9e2e3 100644
--- a/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap
+++ b/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_card_footer.test.tsx.snap
@@ -12,8 +12,32 @@ exports[`guide card footer snapshots should render the footer when the guide has
   <EuiSpacer
     size="l"
   />
-  <div
-    className="eui-textCenter"
+  <EuiFlexGroup
+    justifyContent="center"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButton
+        color="primary"
+        data-test-subj="onboarding--guideCard--view--search"
+        fill={true}
+        onClick={[Function]}
+        size="m"
+      >
+        View guide
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
+
+exports[`guide card footer snapshots should render the footer when the guide has not started yet 1`] = `
+<EuiFlexGroup
+  justifyContent="center"
+>
+  <EuiFlexItem
+    grow={false}
   >
     <EuiButton
       color="primary"
@@ -24,24 +48,8 @@ exports[`guide card footer snapshots should render the footer when the guide has
     >
       View guide
     </EuiButton>
-  </div>
-</Fragment>
-`;
-
-exports[`guide card footer snapshots should render the footer when the guide has not started yet 1`] = `
-<div
-  className="eui-textCenter"
->
-  <EuiButton
-    color="primary"
-    data-test-subj="onboarding--guideCard--view--search"
-    fill={true}
-    onClick={[Function]}
-    size="m"
-  >
-    View guide
-  </EuiButton>
-</div>
+  </EuiFlexItem>
+</EuiFlexGroup>
 `;
 
 exports[`guide card footer snapshots should render the footer when the guide is in progress 1`] = `
@@ -69,19 +77,23 @@ exports[`guide card footer snapshots should render the footer when the guide is
   <EuiSpacer
     size="l"
   />
-  <div
-    className="eui-textCenter"
+  <EuiFlexGroup
+    justifyContent="center"
   >
-    <EuiButton
-      color="primary"
-      data-test-subj="onboarding--guideCard--continue--search"
-      fill={true}
-      onClick={[Function]}
-      size="m"
+    <EuiFlexItem
+      grow={false}
     >
-      Continue
-    </EuiButton>
-  </div>
+      <EuiButton
+        color="primary"
+        data-test-subj="onboarding--guideCard--continue--search"
+        fill={true}
+        onClick={[Function]}
+        size="m"
+      >
+        Continue
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </Fragment>
 `;
 
@@ -110,34 +122,42 @@ exports[`guide card footer snapshots should render the footer when the guide is
   <EuiSpacer
     size="l"
   />
-  <div
-    className="eui-textCenter"
+  <EuiFlexGroup
+    justifyContent="center"
   >
-    <EuiButton
-      color="primary"
-      data-test-subj="onboarding--guideCard--continue--search"
-      fill={true}
-      onClick={[Function]}
-      size="m"
+    <EuiFlexItem
+      grow={false}
     >
-      Continue
-    </EuiButton>
-  </div>
+      <EuiButton
+        color="primary"
+        data-test-subj="onboarding--guideCard--continue--search"
+        fill={true}
+        onClick={[Function]}
+        size="m"
+      >
+        Continue
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </Fragment>
 `;
 
 exports[`guide card footer snapshots should render the footer when the guided onboarding has not started yet 1`] = `
-<div
-  className="eui-textCenter"
+<EuiFlexGroup
+  justifyContent="center"
 >
-  <EuiButton
-    color="primary"
-    data-test-subj="onboarding--guideCard--view--search"
-    fill={true}
-    onClick={[Function]}
-    size="m"
+  <EuiFlexItem
+    grow={false}
   >
-    View guide
-  </EuiButton>
-</div>
+    <EuiButton
+      color="primary"
+      data-test-subj="onboarding--guideCard--view--search"
+      fill={true}
+      onClick={[Function]}
+      size="m"
+    >
+      View guide
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
 `;
diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx b/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
index b123e86688811..b109db15c0aba 100644
--- a/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
+++ b/packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
-import { EuiButton, EuiProgress, EuiSpacer } from '@elastic/eui';
+import { EuiButton, EuiProgress, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { GuideId, GuideState } from '../../types';
 import { UseCase } from './use_case_card';
@@ -54,16 +54,18 @@ export interface GuideCardFooterProps {
 export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFooterProps) => {
   const guideState = guides.find((guide) => guide.guideId === (useCase as GuideId));
   const viewGuideButton = (
-    <div className="eui-textCenter">
-      <EuiButton
-        // Used for FS tracking
-        data-test-subj={`onboarding--guideCard--view--${useCase}`}
-        fill
-        onClick={() => activateGuide(useCase, guideState)}
-      >
-        {viewGuideLabel}
-      </EuiButton>
-    </div>
+    <EuiFlexGroup justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          // Used for FS tracking
+          data-test-subj={`onboarding--guideCard--view--${useCase}`}
+          fill
+          onClick={() => activateGuide(useCase, guideState)}
+        >
+          {viewGuideLabel}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
   // guide has not started yet
   if (!guideState || guideState.status === 'not_started') {
@@ -108,16 +110,18 @@ export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFoo
         }}
       />
       <EuiSpacer size="l" />
-      <div className="eui-textCenter">
-        <EuiButton
-          // Used for FS tracking
-          data-test-subj={`onboarding--guideCard--continue--${useCase}`}
-          fill
-          onClick={() => activateGuide(useCase, guideState)}
-        >
-          {continueGuideLabel}
-        </EuiButton>
-      </div>
+      <EuiFlexGroup justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            // Used for FS tracking
+            data-test-subj={`onboarding--guideCard--continue--${useCase}`}
+            fill
+            onClick={() => activateGuide(useCase, guideState)}
+          >
+            {continueGuideLabel}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </>
   );
 };