diff --git a/src/plugins/home/common/constants.ts b/src/plugins/home/common/constants.ts
index d80988c000c0f..c44e5b8e95789 100644
--- a/src/plugins/home/common/constants.ts
+++ b/src/plugins/home/common/constants.ts
@@ -8,3 +8,10 @@
 
 export const PLUGIN_ID = 'home';
 export const HOME_APP_BASE_PATH = `/app/${PLUGIN_ID}`;
+
+export enum TutorialsCategory {
+  LOGGING = 'logging',
+  SECURITY_SOLUTION = 'security',
+  METRICS = 'metrics',
+  OTHER = 'other',
+}
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
index 247f43df76d3b..1243693fe4853 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -1,5 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`props Beats badge should not show 1`] = `
+<Fragment>
+  <div>
+    <EuiButtonEmpty
+      flush="left"
+      iconType="arrowLeft"
+      size="xs"
+    >
+      <FormattedMessage
+        defaultMessage="Browse all integrations"
+        id="home.tutorial.introduction.browseAllIntegrationsButton"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+  </div>
+  <EuiSpacer />
+  <EuiPageHeader
+    description={
+      <React.Fragment>
+        <Content
+          text="this is a great tutorial about..."
+        />
+      </React.Fragment>
+    }
+    pageTitle={
+      <React.Fragment>
+        Great tutorial
+        <React.Fragment>
+           
+          <EuiBetaBadge
+            label="Beta"
+          />
+        </React.Fragment>
+      </React.Fragment>
+    }
+  />
+</Fragment>
+`;
+
+exports[`props Beats badge should show 1`] = `
+<Fragment>
+  <div>
+    <EuiButtonEmpty
+      flush="left"
+      iconType="arrowLeft"
+      size="xs"
+    >
+      <FormattedMessage
+        defaultMessage="Browse all integrations"
+        id="home.tutorial.introduction.browseAllIntegrationsButton"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+  </div>
+  <EuiSpacer />
+  <EuiPageHeader
+    description={
+      <React.Fragment>
+        <Content
+          text="this is a great tutorial about..."
+        />
+      </React.Fragment>
+    }
+    pageTitle={
+      <React.Fragment>
+        Great tutorial
+        <React.Fragment>
+           
+          <EuiBetaBadge
+            label="Beta"
+          />
+        </React.Fragment>
+        <React.Fragment>
+           
+          <EuiBadge>
+            <FormattedMessage
+              defaultMessage="Beats"
+              id="home.tutorial.introduction.beatsBadgeLabel"
+              values={Object {}}
+            />
+          </EuiBadge>
+        </React.Fragment>
+      </React.Fragment>
+    }
+  />
+</Fragment>
+`;
+
 exports[`props exportedFieldsUrl 1`] = `
 <Fragment>
   <div>
diff --git a/src/plugins/home/public/application/components/tutorial/introduction.js b/src/plugins/home/public/application/components/tutorial/introduction.js
index 59c1454579e23..fbd1eaabb3efe 100644
--- a/src/plugins/home/public/application/components/tutorial/introduction.js
+++ b/src/plugins/home/public/application/components/tutorial/introduction.js
@@ -16,9 +16,11 @@ import {
   EuiPageHeader,
   EuiButtonEmpty,
   EuiSpacer,
+  EuiBadge,
 } from '@elastic/eui';
 
 import { FormattedMessage, injectI18n } from '@kbn/i18n-react';
+import { TutorialsCategory } from '../../../../common/constants';
 
 function IntroductionUI({
   description,
@@ -30,6 +32,7 @@ function IntroductionUI({
   intl,
   notices,
   basePath,
+  category,
 }) {
   let rightSideItems;
   if (previewUrl) {
@@ -98,6 +101,18 @@ function IntroductionUI({
                 {betaBadge}
               </>
             )}
+
+            {category === TutorialsCategory.LOGGING || category === TutorialsCategory.METRICS ? (
+              <>
+                &nbsp;
+                <EuiBadge>
+                  <FormattedMessage
+                    id="home.tutorial.introduction.beatsBadgeLabel"
+                    defaultMessage="Beats"
+                  />
+                </EuiBadge>
+              </>
+            ) : null}
           </>
         }
         description={
diff --git a/src/plugins/home/public/application/components/tutorial/introduction.test.js b/src/plugins/home/public/application/components/tutorial/introduction.test.js
index 49293fa13b015..70b4856a8b2fd 100644
--- a/src/plugins/home/public/application/components/tutorial/introduction.test.js
+++ b/src/plugins/home/public/application/components/tutorial/introduction.test.js
@@ -11,6 +11,7 @@ import { shallowWithIntl } from '@kbn/test/jest';
 
 import { Introduction } from './introduction';
 import { httpServiceMock } from '../../../../../../core/public/mocks';
+import { TutorialsCategory } from '../../../../common/constants';
 
 const basePathMock = httpServiceMock.createBasePath();
 
@@ -73,4 +74,30 @@ describe('props', () => {
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
   });
+
+  test('Beats badge should show', () => {
+    const component = shallowWithIntl(
+      <Introduction.WrappedComponent
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        basePath={basePathMock}
+        isBeta={true}
+        category={TutorialsCategory.METRICS}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Beats badge should not show', () => {
+    const component = shallowWithIntl(
+      <Introduction.WrappedComponent
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        basePath={basePathMock}
+        isBeta={true}
+        category={TutorialsCategory.SECURITY_SOLUTION}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/plugins/home/public/application/components/tutorial/tutorial.js b/src/plugins/home/public/application/components/tutorial/tutorial.js
index 14043338a9429..00cbf013856da 100644
--- a/src/plugins/home/public/application/components/tutorial/tutorial.js
+++ b/src/plugins/home/public/application/components/tutorial/tutorial.js
@@ -414,6 +414,7 @@ class TutorialUi extends React.Component {
       content = (
         <div>
           <Introduction
+            category={this.state.tutorial.category}
             title={this.state.tutorial.name}
             description={this.props.replaceTemplateStrings(this.state.tutorial.longDescription)}
             previewUrl={previewUrl}
diff --git a/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts b/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts
index aeebecf6cab32..e4012c1ab2ef3 100644
--- a/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts
+++ b/src/plugins/home/server/services/tutorials/lib/tutorials_registry_types.ts
@@ -8,6 +8,8 @@
 
 import type { KibanaRequest } from 'src/core/server';
 import type { TutorialSchema } from './tutorial_schema';
+export { TutorialsCategory } from '../../../../common/constants';
+
 export type {
   TutorialSchema,
   ArtifactsSchema,
@@ -19,13 +21,6 @@ export type {
   Instruction,
 } from './tutorial_schema';
 
-/** @public */
-export enum TutorialsCategory {
-  LOGGING = 'logging',
-  SECURITY_SOLUTION = 'security',
-  METRICS = 'metrics',
-  OTHER = 'other',
-}
 export type Platform = 'WINDOWS' | 'OSX' | 'DEB' | 'RPM';
 
 export interface TutorialContext {
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
index 98d73bcb70920..507ed57006c4a 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
@@ -10,6 +10,7 @@ import { Redirect, Route, Switch, useLocation, useParams, useHistory } from 'rea
 import styled from 'styled-components';
 import type { EuiToolTipProps } from '@elastic/eui';
 import {
+  EuiBadge,
   EuiBetaBadge,
   EuiButton,
   EuiButtonEmpty,
@@ -209,11 +210,22 @@ export function Detail() {
             </FlexItemWithMaxHeight>
             <EuiFlexItem>
               <EuiFlexGroup alignItems="center" gutterSize="m">
-                <FlexItemWithMinWidth grow={false}>
-                  <EuiText>
-                    {/* Render space in place of package name while package info loads to prevent layout from jumping around */}
-                    <h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
-                  </EuiText>
+                <FlexItemWithMinWidth grow={true}>
+                  <EuiFlexGroup alignItems="center">
+                    <EuiFlexItem grow={false}>
+                      <EuiText>
+                        {/* Render space in place of package name while package info loads to prevent layout from jumping around */}
+                        <h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiBadge color="default">
+                        {i18n.translate('xpack.fleet.epm.elasticAgentBadgeLabel', {
+                          defaultMessage: 'Elastic Agent',
+                        })}
+                      </EuiBadge>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </FlexItemWithMinWidth>
                 {packageInfo?.release && packageInfo.release !== 'ga' ? (
                   <EuiFlexItem grow={false}>