diff --git a/src/components/@shared/DebugOutput/index.stories.tsx b/src/components/@shared/DebugOutput/index.stories.tsx
new file mode 100644
index 000000000..887eef4a7
--- /dev/null
+++ b/src/components/@shared/DebugOutput/index.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import DebugOutput, { DebugOutputProps } from '@shared/DebugOutput'
+
+export default {
+  title: 'Component/@shared/DebugOutput',
+  component: DebugOutput
+} as ComponentMeta<typeof DebugOutput>
+
+const Template: ComponentStory<typeof DebugOutput> = (
+  args: DebugOutputProps
+) => <DebugOutput {...args} />
+
+interface Props {
+  args: DebugOutputProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  output: <p>Your Debug Data </p>
+}
+
+export const WithTitle: Props = Template.bind({})
+WithTitle.args = {
+  title: 'Debug Data',
+  output: <p>Your Debug Data </p>
+}
diff --git a/src/components/@shared/DebugOutput.tsx b/src/components/@shared/DebugOutput/index.tsx
similarity index 82%
rename from src/components/@shared/DebugOutput.tsx
rename to src/components/@shared/DebugOutput/index.tsx
index 1b4d359a2..0e57793a7 100644
--- a/src/components/@shared/DebugOutput.tsx
+++ b/src/components/@shared/DebugOutput/index.tsx
@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react'
 
+export interface DebugOutputProps {
+  title?: string
+  output: any
+}
+
 export default function DebugOutput({
   title,
   output
-}: {
-  title?: string
-  output: any
-}): ReactElement {
+}: DebugOutputProps): ReactElement {
   return (
     <div style={{ marginTop: 'var(--spacer)' }}>
       {title && <h5>{title}</h5>}