diff --git a/src/client/components/ActivityDetail.tsx b/src/client/components/ActivityDetail.tsx
index 4df590e5..b99b9653 100644
--- a/src/client/components/ActivityDetail.tsx
+++ b/src/client/components/ActivityDetail.tsx
@@ -10,11 +10,13 @@ import { PlayApiCommon, PlayApiCommonDetailed } from "../../core/Api";
 
 export interface ActivityDetailProps {
     activity: PlayApiCommonDetailed
+    componentType: 'source' | 'client'
 }
 
 export const ActivityDetails = (props: ActivityDetailProps) => {
     const {
         activity,
+        componentType,
         activity: {
             error,
             input: {
@@ -64,7 +66,7 @@ export const ActivityDetails = (props: ActivityDetailProps) => {
                 </Flex>
                 <Accordion.ItemContent>
                     <Accordion.ItemBody>
-                        <ActivityTimeline activity={activity} collapsibleOpen={collapsibleOpen} />
+                        <ActivityTimeline activity={activity} collapsibleOpen={collapsibleOpen} componentType={componentType} />
                     </Accordion.ItemBody>
                 </Accordion.ItemContent>
             </Accordion.Item>
diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index 5f0b98a2..66252e18 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -127,14 +127,14 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                                     <Tabs.Root size="sm" variant="outline" defaultValue="play">
                                         <Tabs.List>
                                             <Tabs.Trigger value="play">Play</Tabs.Trigger>
-                                            <Tabs.Trigger value="source">Source Data</Tabs.Trigger>
+                                            {ogInput !== undefined ? <Tabs.Trigger value="source">Source Data</Tabs.Trigger> : null}
                                         </Tabs.List>
                                         <Tabs.Content value="play">
                                             <PlayData play={original} />
                                         </Tabs.Content>
-                                        <Tabs.Content value="source">
+                                        {ogInput !== undefined ?  (<Tabs.Content value="source">
                                             <ChakraCodeBlockShort code={ogInput} />
-                                        </Tabs.Content>
+                                        </Tabs.Content>) : null }
                                     </Tabs.Root>
                                 </Card.Body>
                             </Card.Root>
diff --git a/src/stories/ActivityDetails.stories.tsx b/src/stories/ActivityDetails.stories.tsx
new file mode 100644
index 00000000..2aa90319
--- /dev/null
+++ b/src/stories/ActivityDetails.stories.tsx
@@ -0,0 +1,64 @@
+import preview from "../../.storybook/preview.js";
+import React from 'react';
+
+import { fn } from 'storybook/test';
+import { Container } from '@chakra-ui/react';
+import { ActivityTimeline } from "../client/components/ActivityTimeline";
+import {Provider} from "../client/components/Provider";
+import { generateJsonPlays } from "../core/PlayTestUtils.js";
+import { generatePlayApiCommonDetailed } from "../core/tests/utils/apiFixtures.js";
+import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../core/tests/utils/fixtures.js";
+import { asJsonPlayObject } from '../core/PlayMarshalUtils.js';
+import { ActivityDetails } from "../client/components/ActivityDetail.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = preview.meta({
+  title: 'Examples/ActivityDetails',
+  component: ActivityDetails,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'padded',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  args: {
+     activity: generatePlayApiCommonDetailed(),
+     componentType: 'source' as const
+  },
+  argTypes: {
+    componentType: {
+      control: { type: 'select' },
+      options: ['source', 'client'],
+    }
+  },
+  render: function Render(args, { loaded: { activity } }) {
+     return (<ActivityDetails {...args}  activity={activity}/>) 
+    },
+decorators: [
+    (Story) => (<Provider><Container maxWidth="2xl"><Story/></Container></Provider>),
+  ]
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+});
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const ActivityDetailStory = meta.story({
+    loaders: [
+    async (ctx) => {
+      const play = asJsonPlayObject(await playWithLifecycleScrobble(generatePlayWithLifecycle(
+        {
+        lifecycleSteps: {
+          preCompare: 1,
+          postCompare: 1,
+        }
+      }
+      )));
+      return {
+        activity: generatePlayApiCommonDetailed({
+        playOpts: [{play: play}],
+        inputOpts: [{play: play}]
+      }),
+    };
+    }
+  ],
+});
\ No newline at end of file