diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx
new file mode 100644
index 00000000000000..69bc425374dc45
--- /dev/null
+++ b/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/* eslint-disable react/function-component-definition */
+
+import { Story } from '@storybook/react';
+import { HttpStart } from 'kibana/public';
+import React from 'react';
+import TutorialConfigAgent from './';
+import { APIReturnType } from '../..//services/rest/createCallApmApi';
+
+export type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>;
+
+interface Args {
+  variantId: string;
+  environment: 'cloud' | 'onprem';
+  addAgents: boolean;
+  addPolicyOnCloudAgent: boolean;
+}
+
+const policyElasticAgentOnCloudAgent: APIResponseType['agents'][0] = {
+  id: 'policy-elastic-agent-on-cloud',
+  name: 'Elastic Cloud agent policy',
+  apmServerUrl: 'apm_cloud_url',
+  secretToken: 'apm_cloud_token',
+};
+
+const _agents: APIResponseType['agents'] = [
+  {
+    id: '1',
+    name: 'agent foo',
+    apmServerUrl: 'foo',
+    secretToken: 'foo',
+  },
+  {
+    id: '2',
+    name: 'agent bar',
+    apmServerUrl: 'bar',
+    secretToken: 'bar',
+  },
+];
+
+function Wrapper({
+  addAgents,
+  variantId,
+  environment,
+  addPolicyOnCloudAgent,
+}: Args) {
+  const http = ({
+    get: () => ({
+      agents: [
+        ...(addAgents ? _agents : []),
+        ...(addPolicyOnCloudAgent ? [policyElasticAgentOnCloudAgent] : []),
+      ],
+      cloudStandaloneSetup: {
+        apmServerUrl: 'cloud_url',
+        secretToken: 'foo',
+      },
+    }),
+  } as unknown) as HttpStart;
+  return (
+    <TutorialConfigAgent
+      http={http}
+      basePath="http://localhost:5601"
+      isCloudEnabled={environment === 'cloud'}
+      variantId={variantId}
+    />
+  );
+}
+export const Integration: Story<Args> = (_args) => {
+  return <Wrapper {..._args} />;
+};
+
+Integration.args = {
+  variantId: 'java',
+  environment: 'onprem',
+  addAgents: false,
+  addPolicyOnCloudAgent: false,
+};
+
+export default {
+  title: 'app/Tutorial/AgentConfig',
+  component: TutorialConfigAgent,
+  argTypes: {
+    variantId: {
+      control: {
+        type: 'select',
+        options: [
+          'java',
+          'node',
+          'django',
+          'flask',
+          'rails',
+          'rack',
+          'go',
+          'dotnet',
+          'php',
+          'js',
+          'js_script',
+        ],
+      },
+    },
+    environment: {
+      control: { type: 'select', options: ['onprem', 'cloud'] },
+    },
+    addAgents: {
+      control: { type: 'inline-radio', options: [true, false] },
+    },
+    addPolicyOnCloudAgent: {
+      control: { type: 'inline-radio', options: [true, false] },
+    },
+  },
+};
diff --git a/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx
new file mode 100644
index 00000000000000..80e742295faded
--- /dev/null
+++ b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/* eslint-disable react/function-component-definition */
+
+import { Story } from '@storybook/react';
+import React from 'react';
+import { HttpStart } from 'kibana/public';
+import TutorialFleetInstructions from '.';
+
+interface Args {
+  hasFleetPolicyWithApmIntegration: boolean;
+}
+
+function Wrapper({ hasFleetPolicyWithApmIntegration }: Args) {
+  const http = ({
+    get: () => ({ hasData: hasFleetPolicyWithApmIntegration }),
+  } as unknown) as HttpStart;
+  return (
+    <TutorialFleetInstructions
+      http={http}
+      basePath="http://localhost:5601"
+      isDarkTheme={false}
+    />
+  );
+}
+
+export default {
+  title: 'app/Tutorial/FleetInstructions',
+  component: TutorialFleetInstructions,
+  argTypes: {
+    hasFleetPolicyWithApmIntegration: {
+      control: { type: 'inline-radio', options: [true, false] },
+    },
+  },
+};
+
+export const Instructions: Story<Args> = (_args) => {
+  return <Wrapper {..._args} />;
+};
+
+Instructions.args = {
+  hasFleetPolicyWithApmIntegration: true,
+};