diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx
index 18632210a..cdc067b12 100644
--- a/packages/web/components/templates/OnboardingLayout.tsx
+++ b/packages/web/components/templates/OnboardingLayout.tsx
@@ -4,6 +4,7 @@ import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
+import Link from 'next/link'
 
 const TOTAL_ONBOARDING_PAGES = 6
 
@@ -29,24 +30,26 @@ export const OnboardingLayout = ({
   reduceSpace
 }: OnboardingLayoutProps) => {
   const NextButton = () => (
-    <Button
-      style="ctaDarkYellow"
-      css={{ 
-        width: '111px',
-        height: '44px',
-        color: 'rgba(10, 8, 6, 0.8)',
-        fontWeight: 600,
-        fontSize: '16px',
-        textDecoration: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-      as="a"
-      href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
-    >
-      Next
-    </Button>
+    <Link href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}>
+      <Button
+        style="ctaDarkYellow"
+        css={{ 
+          width: '111px',
+          height: '44px',
+          color: 'rgba(10, 8, 6, 0.8)',
+          fontWeight: 600,
+          fontSize: '16px',
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        as="a"
+        href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
+      >
+        Next
+      </Button>
+    </Link>
   )
 
   return (
diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
similarity index 86%
rename from packages/web/components/templates/onboarding/03.tsx
rename to packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
index 6d5d9074a..ec3e74291 100644
--- a/packages/web/components/templates/onboarding/03.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
@@ -30,14 +30,17 @@ const optionDetails = [
   },
 ]
 
-const OnboardingPage3 = () => {
+type OnboardingAddNewslettersProps = {
+  pageNumber: number
+}
+
+export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => {
   return (
     <OnboardingLayout
+      pageNumber={props.pageNumber}
       subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
       description="Subscribe to some newsletters now"
       title="Read all your Newsletters in Omnivore"
-      pageNumber={3}
-      nextPage={'/onboarding/05'}
     >
       <VStack css={{
         marginTop: '$4',
@@ -51,4 +54,3 @@ const OnboardingPage3 = () => {
   )
 }
 
-export default OnboardingPage3
diff --git a/packages/web/components/templates/onboarding/05.tsx b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
similarity index 83%
rename from packages/web/components/templates/onboarding/05.tsx
rename to packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
index a8d0998ce..fbf3614a9 100644
--- a/packages/web/components/templates/onboarding/05.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
@@ -13,10 +13,14 @@ const StyledImage = styled('img', {
   }
 })
 
-const OnboardingPage5 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={5}
+      pageNumber={props.pageNumber}
       title="Highlight and share"
       subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
       >
@@ -37,5 +41,3 @@ const OnboardingPage5 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage5
diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
similarity index 92%
rename from packages/web/components/templates/onboarding/02.tsx
rename to packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
index 1772092ef..cfc83dc93 100644
--- a/packages/web/components/templates/onboarding/02.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
@@ -6,10 +6,14 @@ import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
 import { StyledAnchor } from '../../elements/StyledText'
 import { Box } from '../../elements/LayoutPrimitives'
 
-const OnboardingPage2 = () => {
+type OnboardingInstallInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={2}
+      pageNumber={props.pageNumber}
       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'
@@ -83,4 +87,3 @@ const OnboardingPage2 = () => {
   )
 }
 
-export default OnboardingPage2
diff --git a/packages/web/components/templates/onboarding/06.tsx b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
similarity index 91%
rename from packages/web/components/templates/onboarding/06.tsx
rename to packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
index 154fafef2..c85711f43 100644
--- a/packages/web/components/templates/onboarding/06.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
@@ -34,10 +34,14 @@ const Container = styled(Box, {
   }
 })
 
-const OnboardingPage6 = () => {
+type OnboardingJoinCommunityProps = {
+  pageNumber: number
+}
+
+export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => {
   return (
     <OnboardingLayout
-      pageNumber={6}
+      pageNumber={props.pageNumber}
       title="Join our Community"
       subTitle='Omnivore is open source and open community, join us.'
       nextPage='/home'
@@ -71,4 +75,3 @@ const OnboardingPage6 = () => {
   )
 }
 
-export default OnboardingPage6
diff --git a/packages/web/components/templates/onboarding/04.tsx b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
similarity index 87%
rename from packages/web/components/templates/onboarding/04.tsx
rename to packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
index c35537a59..3704732c2 100644
--- a/packages/web/components/templates/onboarding/04.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
@@ -7,10 +7,14 @@ const StyledImage = styled('img', {
   position: 'relative',
 })
 
-const OnboardingPage4 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={4}
+      pageNumber={props.pageNumber}
       title="Organize all your content"
       subTitle="Information about archiving and tagging
       Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
@@ -51,5 +55,3 @@ const OnboardingPage4 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage4
diff --git a/packages/web/components/templates/onboarding/01.tsx b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
similarity index 93%
rename from packages/web/components/templates/onboarding/01.tsx
rename to packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
index 62e5ba531..fac558917 100644
--- a/packages/web/components/templates/onboarding/01.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
@@ -37,10 +37,14 @@ const articleDetails = [
   },
 ]
 
-const OnboardingPage1 = () => {
+type OnboardingReaderPreviewProps = {
+  pageNumber: number
+}
+
+export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => {
   return (
     <OnboardingLayout
-      pageNumber={1}
+      pageNumber={props.pageNumber}
       title="Read Distraction Free"
       subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
       description='Add some great reads to your library now:'
@@ -77,5 +81,3 @@ const OnboardingPage1 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage1
diff --git a/packages/web/pages/onboarding/01.tsx b/packages/web/pages/onboarding/01.tsx
deleted file mode 100644
index df56ea745..000000000
--- a/packages/web/pages/onboarding/01.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage1 from "../../components/templates/onboarding/01";
-
-export default function OnboardingPage01() {
-  return <OnboardingPage1 />
-}
diff --git a/packages/web/pages/onboarding/02.tsx b/packages/web/pages/onboarding/02.tsx
deleted file mode 100644
index 07e8adbd4..000000000
--- a/packages/web/pages/onboarding/02.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage2 from "../../components/templates/onboarding/02";
-
-export default function OnboardingPage02() {
-  return <OnboardingPage2 />
-}
diff --git a/packages/web/pages/onboarding/03.tsx b/packages/web/pages/onboarding/03.tsx
deleted file mode 100644
index d2c16adc8..000000000
--- a/packages/web/pages/onboarding/03.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage3 from "../../components/templates/onboarding/03";
-
-export default function OnboardingPage03() {
-  return <OnboardingPage3 />
-}
diff --git a/packages/web/pages/onboarding/04.tsx b/packages/web/pages/onboarding/04.tsx
deleted file mode 100644
index 70c2828e5..000000000
--- a/packages/web/pages/onboarding/04.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage4 from "../../components/templates/onboarding/04";
-
-export default function OnboardingPage04() {
-  return <OnboardingPage4 />
-}
diff --git a/packages/web/pages/onboarding/05.tsx b/packages/web/pages/onboarding/05.tsx
deleted file mode 100644
index a4fa0d597..000000000
--- a/packages/web/pages/onboarding/05.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage5 from "../../components/templates/onboarding/05";
-
-export default function OnboardingPage05() {
-  return <OnboardingPage5 />
-}
diff --git a/packages/web/pages/onboarding/06.tsx b/packages/web/pages/onboarding/06.tsx
deleted file mode 100644
index 500d3f8d8..000000000
--- a/packages/web/pages/onboarding/06.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage6 from "../../components/templates/onboarding/06";
-
-export default function OnboardingPage06() {
-  return <OnboardingPage6 />
-}
diff --git a/packages/web/pages/onboarding/[index].tsx b/packages/web/pages/onboarding/[index].tsx
new file mode 100644
index 000000000..b9ca0f7d1
--- /dev/null
+++ b/packages/web/pages/onboarding/[index].tsx
@@ -0,0 +1,23 @@
+import { useRouter } from "next/router";
+import { OnboardingAddNewsletters } from "../../components/templates/onboarding/OnboardingAddNewsletters";
+import { OnboardingInstallInstructions } from "../../components/templates/onboarding/OnboardingInstallInstructions";
+import { OnboardingJoinCommunity } from "../../components/templates/onboarding/OnboardingJoinCommunity";
+import { OnboardingReaderPreview } from "../../components/templates/onboarding/OnboardingReaderPreview";
+
+export default function Onboarding() {
+  const router = useRouter();
+  const { index: pageNumber } = router.query;
+
+  switch (pageNumber) {
+    case "01":
+      return <OnboardingReaderPreview pageNumber={1} />;
+    case "02":
+      return <OnboardingInstallInstructions pageNumber={2} />;
+    case "03":
+      return <OnboardingAddNewsletters pageNumber={3} />;
+    case "04":
+      return <OnboardingJoinCommunity pageNumber={4} />;
+  }
+
+  return <OnboardingReaderPreview pageNumber={1} />
+}
diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
index d735174d6..0ffb9d79a 100644
--- a/packages/web/stories/OnboardingLayout.stories.tsx
+++ b/packages/web/stories/OnboardingLayout.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingLayout from '../components/templates/OnboardingLayout2'
+import OnboardingLayout from '../components/templates/OnboardingLayout'
 
 export default {
   title: 'Components/OnboardingLayout',
diff --git a/packages/web/stories/OnboardingPage1.stories.tsx b/packages/web/stories/OnboardingPage1.stories.tsx
index 7afa88818..1f7834895 100644
--- a/packages/web/stories/OnboardingPage1.stories.tsx
+++ b/packages/web/stories/OnboardingPage1.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage1 from '../components/templates/onboarding/01'
+import { OnboardingReaderPreview } from '../components/templates/onboarding/OnboardingReaderPreview'
 
 export default {
   title: 'Onboarding-Pages/01',
-  component: OnboardingPage1,
-} as ComponentMeta<typeof OnboardingPage1>
+  component: OnboardingReaderPreview,
+} as ComponentMeta<typeof OnboardingReaderPreview>
 
-export const OnboardingPage1Story: ComponentStory<typeof OnboardingPage1> = (args: any) => {
+export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
   return (
-    <OnboardingPage1 />
+    <OnboardingReaderPreview />
   )
 }
diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx
index 90e13abe3..74ec2ef57 100644
--- a/packages/web/stories/OnboardingPage2.stories.tsx
+++ b/packages/web/stories/OnboardingPage2.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage2 from '../components/templates/onboarding/02'
+import { OnboardingInstallInstructions } from '../components/templates/onboarding/OnboardingInstallInstructions'
 
 export default {
   title: 'Onboarding-Pages/02',
-  component: OnboardingPage2,
-} as ComponentMeta<typeof OnboardingPage2>
+  component: OnboardingInstallInstructions,
+} as ComponentMeta<typeof OnboardingInstallInstructions>
 
-export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
+export const OnboardingPage2Story: ComponentStory<typeof OnboardingInstallInstructions> = (args: any) => {
   return (
-    <OnboardingPage2 />
+    <OnboardingInstallInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx
index 45ac49ec5..971efabcf 100644
--- a/packages/web/stories/OnboardingPage3.stories.tsx
+++ b/packages/web/stories/OnboardingPage3.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage3 from '../components/templates/onboarding/03'
+import { OnboardingAddNewsletters } from '../components/templates/onboarding/OnboardingAddNewsletters'
 
 export default {
   title: 'Onboarding-Pages/03',
-  component: OnboardingPage3,
-} as ComponentMeta<typeof OnboardingPage3>
+  component: OnboardingAddNewsletters,
+} as ComponentMeta<typeof OnboardingAddNewsletters>
 
-export const OnboardingPage3Story: ComponentStory<typeof OnboardingPage3> = (args: any) => {
+export const OnboardingPage3Story: ComponentStory<typeof OnboardingAddNewsletters> = (args: any) => {
   return (
-    <OnboardingPage3 />
+    <OnboardingAddNewsletters />
   )
 }
diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx
index 1dfda308a..7e251018c 100644
--- a/packages/web/stories/OnboardingPage4.stories.tsx
+++ b/packages/web/stories/OnboardingPage4.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage4 from '../components/templates/onboarding/04'
+import { OnboardingOrganizeInstructions } from '../components/templates/onboarding/OnboardingOrganizeInstructions'
 
 export default {
   title: 'Onboarding-Pages/04',
-  component: OnboardingPage4,
-} as ComponentMeta<typeof OnboardingPage4>
+  component: OnboardingOrganizeInstructions,
+} as ComponentMeta<typeof OnboardingOrganizeInstructions>
 
-export const OnboardingPage4Story: ComponentStory<typeof OnboardingPage4> = (args: any) => {
+export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
   return (
-    <OnboardingPage4 />
+    <OnboardingOrganizeInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx
index d54c16322..67debd310 100644
--- a/packages/web/stories/OnboardingPage5.stories.tsx
+++ b/packages/web/stories/OnboardingPage5.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage5 from '../components/templates/onboarding/05'
+import { OnboardingHighlightInstructions } from '../components/templates/onboarding/OnboardingHighlightInstructions'
 
 export default {
   title: 'Onboarding-Pages/05',
-  component: OnboardingPage5,
-} as ComponentMeta<typeof OnboardingPage5>
+  component: OnboardingHighlightInstructions,
+} as ComponentMeta<typeof OnboardingHighlightInstructions>
 
-export const OnboardingPage5Story: ComponentStory<typeof OnboardingPage5> = (args: any) => {
+export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
   return (
-    <OnboardingPage5 />
+    <OnboardingHighlightInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx
index ef1cef649..c673bc967 100644
--- a/packages/web/stories/OnboardingPage6.stories.tsx
+++ b/packages/web/stories/OnboardingPage6.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage6 from '../components/templates/onboarding/06'
+import { OnboardingJoinCommunity } from '../components/templates/onboarding/OnboardingJoinCommunity'
 
 export default {
   title: 'Onboarding-Pages/06',
-  component: OnboardingPage6,
-} as ComponentMeta<typeof OnboardingPage6>
+  component: OnboardingJoinCommunity,
+} as ComponentMeta<typeof OnboardingJoinCommunity>
 
-export const OnboardingPage6Story: ComponentStory<typeof OnboardingPage6> = (args: any) => {
+export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
   return (
-    <OnboardingPage6 />
+    <OnboardingJoinCommunity />
   )
 }