diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/02.tsx
new file mode 100644
index 000000000..f089a4639
--- /dev/null
+++ b/packages/web/components/templates/onboarding/02.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import Link from 'next/link'
+import OnboardingLayout2 from '../OnboardingLayout2'
+import MobileInstallHelp from '../../elements/MobileInstallHelp'
+import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
+import { StyledAnchor } from '../../elements/StyledText'
+import { Box } from '../../elements/LayoutPrimitives'
+
+const OnboardingPage2 = () => {
+  return (
+    <OnboardingLayout2
+      pageNumber={2}
+      title="Save links to read later"
+      subTitle="Save any link to your library using our apps and browser extensions"
+      description='Install our apps and browser extensions'
+      image={
+        <img
+          src='/static/images/onboarding/browser-extension.svg'
+          alt="Browser Extension"
+        />
+      }
+    >
+      <Box css={{
+        "@lgDown": {
+          marginBottom: 100,
+        }
+      }}>
+        <Box
+          css={{
+            margin: '27px 0',
+            '@lg': {
+              border: '1px solid rgba(0, 0, 0, 0.06)',
+              boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
+            },
+            backgroundColor: 'White',
+          }}
+        >
+          <Box
+            css={{
+              '@lgDown': {
+                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
+                border: '1px solid rgba(0, 0, 0, 0.06)',
+              },
+            }}
+          >
+            <MobileInstallHelp onboarding />
+          </Box>
+          <Box
+            css={{
+              '@lgDown': {
+                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
+                border: '1px solid rgba(0, 0, 0, 0.06)',
+                marginTop: '8px',
+              },
+            }}
+          >
+            <ExtensionsInstallHelp onboarding />
+          </Box>
+        </Box>
+        <Box
+          css={{
+            '@lg': {
+              marginBottom: '20px',
+            },
+          }}
+        >
+          <Link passHref href="#">
+            <StyledAnchor
+              css={{
+                fontWeight: '400',
+                fontSize: '14px',
+                lineHeight: '17.5px',
+                color: 'rgba(10, 8, 6, 0.8)',
+                textDecoration: 'underline',
+              }}
+            >
+              Email me instructions
+            </StyledAnchor>
+          </Link>
+        </Box>
+      </Box>
+    </OnboardingLayout2>
+  )
+}
+
+export default OnboardingPage2
diff --git a/packages/web/pages/onboarding/02.tsx b/packages/web/pages/onboarding/02.tsx
index 89e52578d..07e8adbd4 100644
--- a/packages/web/pages/onboarding/02.tsx
+++ b/packages/web/pages/onboarding/02.tsx
@@ -1,86 +1,5 @@
-import React from 'react'
-import { Box } from '../../components/elements/LayoutPrimitives'
-import { StyledAnchor } from '../../components/elements/StyledText'
-import ExtensionInstallHelp from '../../components/elements/ExtensionsInstallHelp'
-import MobileInstallHelp from '../../components/elements/MobileInstallHelp'
-import Link from 'next/link'
-import OnboardingLayout2 from '../../components/templates/OnboardingLayout2'
+import OnboardingPage2 from "../../components/templates/onboarding/02";
 
-const OnboardingPage2 = () => {
-  return (
-    <OnboardingLayout2
-      pageNumber={2}
-      title="Save links to read later"
-      subTitle="Save any link to your library using our apps and browser extensions"
-      description='Install our apps and browser extensions'
-      image={
-        <img
-          src='/static/images/onboarding/browser-extension.svg'
-          alt="Browser Extension"
-        />
-      }
-    >
-      <Box css={{
-        "@lgDown": {
-          marginBottom: 100,
-        }
-      }}>
-        <Box
-          css={{
-            margin: '27px 0',
-            '@lg': {
-              border: '1px solid rgba(0, 0, 0, 0.06)',
-              boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-            },
-            backgroundColor: 'White',
-          }}
-        >
-          <Box
-            css={{
-              '@lgDown': {
-                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-                border: '1px solid rgba(0, 0, 0, 0.06)',
-              },
-            }}
-          >
-            <MobileInstallHelp onboarding />
-          </Box>
-          <Box
-            css={{
-              '@lgDown': {
-                boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-                border: '1px solid rgba(0, 0, 0, 0.06)',
-                marginTop: '8px',
-              },
-            }}
-          >
-            <ExtensionInstallHelp onboarding />
-          </Box>
-        </Box>
-        <Box
-          css={{
-            '@lg': {
-              marginBottom: '20px',
-            },
-          }}
-        >
-          <Link passHref href="#">
-            <StyledAnchor
-              css={{
-                fontWeight: '400',
-                fontSize: '14px',
-                lineHeight: '17.5px',
-                color: 'rgba(10, 8, 6, 0.8)',
-                textDecoration: 'underline',
-              }}
-            >
-              Email me instructions
-            </StyledAnchor>
-          </Link>
-        </Box>
-      </Box>
-    </OnboardingLayout2>
-  )
+export default function OnboardingPage02() {
+  return <OnboardingPage2 />
 }
-
-export default OnboardingPage2
diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
new file mode 100644
index 000000000..0e470fa59
--- /dev/null
+++ b/packages/web/stories/OnboardingLayout.stories.tsx
@@ -0,0 +1,41 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import OnboardingLayout from '../components/templates/OnboardingLayout2'
+
+export default {
+  title: 'Components/OnboardingLayout',
+  component: OnboardingLayout,
+  argTypes: {
+    pageNumber: {
+      description: 'The current page number of the onboarding process',
+    },
+    title: {
+      description: 'The title of the current onboading screen',
+    },
+    subTitle: {
+      description: 'The subtitle of the current onboading screen',
+    },
+    description: {
+      description: 'The description of the current onboading screen',
+    },
+    children: {
+      description: 'The right column on the page',
+    },
+    image: {
+      description: 'The image on the left column on the page',
+    },
+  },
+} as ComponentMeta<typeof OnboardingLayout>
+
+const Template: ComponentStory<typeof OnboardingLayout> = (args) => (
+  <OnboardingLayout {...args}>{args.children}</OnboardingLayout>
+)
+
+export const OnboardingLayoutStory = Template.bind({})
+OnboardingLayoutStory.args = {
+  pageNumber: 2,
+  title: 'Save links to read later',
+  subTitle:
+    'Save any link to your library using our apps and browser extensions',
+  description: 'Install our apps and browser extensions',
+  children: <div>This is where the child is rendered.</div>
+}
diff --git a/packages/web/stories/OnboardingPage2Story.stories.tsx b/packages/web/stories/OnboardingPage2Story.stories.tsx
new file mode 100644
index 000000000..5122b6ec7
--- /dev/null
+++ b/packages/web/stories/OnboardingPage2Story.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import OnboardingPage2 from '../components/templates/onboarding/02'
+
+export default {
+  title: 'Components/OnboardingPage2Story',
+  component: OnboardingPage2,
+} as ComponentMeta<typeof OnboardingPage2>
+
+export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
+  return (
+    <OnboardingPage2 />
+  )
+}