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 0000000000000..6e97edd68554f
--- /dev/null
+++ b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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) {
+ // TODO mock http
+ const http = ({
+ get: () => ({ hasData: hasFleetPolicyWithApmIntegration }),
+ } as unknown) as HttpStart;
+ return (
+
+ );
+}
+
+export default {
+ title: 'app/Tutorial/FleetInstructions',
+ component: TutorialFleetInstructions,
+ argTypes: {
+ hasFleetPolicyWithApmIntegration: {
+ control: { type: 'inline-radio', options: [true, false] },
+ },
+ },
+};
+
+export const WithApmIntegration: Story = (_args) => {
+ return ;
+};
+
+WithApmIntegration.args = {
+ hasFleetPolicyWithApmIntegration: true,
+};