diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index 56c73e1ae..bc233d808 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -866,46 +866,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/AdminLessonNav Basic 1`] = `
-<div>
-  <div
-    className="lessons_tabsNav"
-  >
-    <div
-      className="lessons__tabsNav__nav"
-    >
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/introduction"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        INTRODUCTION
-      </a>
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/modules"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        MODULES
-      </a>
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/challenges"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        CHALLENGES
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Components/AdminLessonSideNav Basic 1`] = `
 <div
   className="container"
@@ -12203,6 +12163,44 @@ exports[`Storyshots Components/ModalCard Small 1`] = `
 </button>
 `;
 
+exports[`Storyshots Components/NavCard Basic 1`] = `
+<div
+  className="navCard__tabsNav"
+>
+  <div
+    className="navCard__tabsNav__nav"
+  >
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/introduction"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      INTRODUCTION
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/modules"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      MODULES
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/challenges"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      CHALLENGES
+    </a>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/NavLink Active Link 1`] = `
 Array [
   <a
diff --git a/__tests__/pages/admin/lessons/[lessonSlug]/[pageName]/modules.test.js b/__tests__/pages/admin/lessons/[lessonSlug]/[pageName]/modules.test.js
index 6b923afab..d68f4a7f3 100644
--- a/__tests__/pages/admin/lessons/[lessonSlug]/[pageName]/modules.test.js
+++ b/__tests__/pages/admin/lessons/[lessonSlug]/[pageName]/modules.test.js
@@ -252,7 +252,7 @@ describe('modules', () => {
     await act(() => new Promise(res => setTimeout(res, 0)))
 
     expect(screen.getByText('MODULES').className).not.toEqual(
-      'lessons_tabsNav__nav__item'
+      'navCard__tabsNav__nav__item'
     )
   })
 })
diff --git a/components/NavCard.tsx b/components/NavCard.tsx
new file mode 100644
index 000000000..de01356c8
--- /dev/null
+++ b/components/NavCard.tsx
@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import React from 'react'
+import styles from '../scss/navCard.module.scss'
+
+type Tab = {
+  text: string
+  url: string
+}
+
+type NavCardProps = {
+  tabSelected: number
+  tabs: Tab[]
+}
+
+const NavCard = ({ tabSelected, tabs }: NavCardProps) => {
+  return (
+    <div className={styles.navCard__tabsNav}>
+      <div className={styles.navCard__tabsNav__nav}>
+        {tabs.map((tab, i) => (
+          <NavCardItem key={i} isSelected={i === tabSelected} tab={tab} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+type NavCardItemProps = {
+  isSelected: boolean
+  tab: Tab
+}
+
+const NavCardItem = ({ isSelected, tab }: NavCardItemProps) => {
+  const className =
+    styles[
+      isSelected
+        ? 'navCard__tabsNav__nav__item'
+        : 'navCard__tabsNav__nav__item--inactive'
+    ]
+
+  return (
+    <Link href={tab.url}>
+      <a className={`${className} nav-pills`}>{tab.text.toUpperCase()}</a>
+    </Link>
+  )
+}
+
+export default NavCard
diff --git a/components/admin/lessons/AdminLessonSideNavLayout.tsx b/components/admin/lessons/AdminLessonSideNavLayout.tsx
deleted file mode 100644
index 3827fe4cb..000000000
--- a/components/admin/lessons/AdminLessonSideNavLayout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { FunctionComponent } from 'react'
-import styles from '../../../scss/adminLessonNav.module.scss'
-
-type Tab = { tabName: string; urlPageName: string }
-
-type Props = {
-  tabs: Tab[]
-  Component: FunctionComponent<{ tab: Tab }>
-}
-
-const AdminLessonNav: React.FC<Props> = ({ tabs, Component }: Props) => {
-  return (
-    <div>
-      <div className={styles.lessons_tabsNav}>
-        <div className={styles.lessons__tabsNav__nav}>
-          {tabs.map((tab, i) => (
-            <Component key={i} tab={tab} />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default AdminLessonNav
diff --git a/pages/admin/lessons/[lessonSlug]/[pageName]/index.tsx b/pages/admin/lessons/[lessonSlug]/[pageName]/index.tsx
index ed7b7283f..1a1bd9001 100644
--- a/pages/admin/lessons/[lessonSlug]/[pageName]/index.tsx
+++ b/pages/admin/lessons/[lessonSlug]/[pageName]/index.tsx
@@ -1,18 +1,15 @@
 import { gql, useQuery } from '@apollo/client'
 import { GetAppProps, withGetApp } from '../../../../../graphql'
-import { toUpper } from 'lodash'
 import React, { useMemo, useState } from 'react'
-import AdminLessonNav from '../../../../../components/admin/lessons/AdminLessonSideNavLayout'
 import AdminLessonSideNav from '../../../../../components/admin/lessons/AdminLessonSideNav'
 import AdminLessonInputs from '../../../../../components/admin/lessons/AdminLessonInputs'
 import { Props } from '../../../../../components/admin/lessons/AdminLessonInputs/AdminLessonInputs'
 import Breadcrumbs from '../../../../../components/Breadcrumbs'
 import styles from '../../../../../scss/modules.module.scss'
-import navStyles from '../../../../../scss/adminLessonNav.module.scss'
 import { AdminLayout } from '../../../../../components/admin/AdminLayout'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 import { compose, filter, get, sortBy } from 'lodash/fp'
+import NavCard from '../../../../../components/NavCard'
 
 const MAIN_PATH = '/admin/lessons'
 
@@ -114,25 +111,13 @@ const Lessons = ({ data }: GetAppProps) => {
     return sortModules(modulesData)
   }, [lesson.id, get('modules', modulesData)])
 
-  const LessonNav = ({
-    tab
-  }: {
-    tab: { tabName: string; urlPageName: string }
-  }) => {
-    const isSelected = tab.urlPageName === pageName
-    const className =
-      navStyles[
-        isSelected
-          ? 'lessons_tabsNav__nav__item'
-          : 'lessons_tabsNav__nav__item--inactive'
-      ]
-
-    return (
-      <Link href={`${MAIN_PATH}/${lessonSlug}/${tab.urlPageName}`}>
-        <a className={`${className} nav-pills`}>{toUpper(tab.tabName)}</a>
-      </Link>
-    )
-  }
+  const tabs = [
+    {
+      text: 'modules',
+      url: `${MAIN_PATH}/${lesson.slug}/modules`
+    }
+  ]
+  const tabSelected = tabs.findIndex(tab => tab.text === pageName)
 
   return (
     <AdminLayout data={data}>
@@ -148,15 +133,7 @@ const Lessons = ({ data }: GetAppProps) => {
           />
         </header>
         <section>
-          <AdminLessonNav
-            tabs={[
-              {
-                tabName: 'modules',
-                urlPageName: 'modules'
-              }
-            ]}
-            Component={LessonNav}
-          />
+          <NavCard tabSelected={tabSelected} tabs={tabs} />
         </section>
         <section>
           <Content
diff --git a/scss/adminLessonNav.module.scss b/scss/navCard.module.scss
similarity index 83%
rename from scss/adminLessonNav.module.scss
rename to scss/navCard.module.scss
index bd05a1baa..7f2985c0c 100644
--- a/scss/adminLessonNav.module.scss
+++ b/scss/navCard.module.scss
@@ -6,7 +6,7 @@ $light: hsl(0, 0%, 98.4%);
 $dark_primary: color.adjust(variables.$primary, $lightness: -20%);
 $light_primary: color.adjust(variables.$primary, $lightness: 28%);
 
-.lessons_tabsNav {
+.navCard__tabsNav {
   font-family: 'PT Mono';
   max-width: fit-content;
   padding: 8px 16px;
@@ -20,7 +20,7 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   border: 1px solid $light_primary;
 }
 
-.lessons__tabsNav__nav {
+.navCard__tabsNav__nav {
   display: flex;
   column-gap: 20px;
   justify-content: center;
@@ -28,7 +28,7 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   flex-wrap: nowrap;
 }
 
-.lessons_tabsNav__nav__item {
+.navCard__tabsNav__nav__item {
   padding: 7px 16px;
   border-radius: 4px;
   background-color: variables.$primary;
@@ -39,11 +39,11 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   font-size: 14px;
 }
 
-.lessons_tabsNav__nav__item:hover {
+.navCard__tabsNav__nav__item:hover {
   color: white;
 }
 
-.lessons_tabsNav__nav__item--inactive {
+.navCard__tabsNav__nav__item--inactive {
   padding: 7px 16px;
   border-radius: 4px;
   color: $dark_primary;
@@ -55,12 +55,8 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   font-size: 14px;
 }
 
-.lessons_tabsNav__nav__item--inactive:hover {
+.navCard__tabsNav__nav__item--inactive:hover {
   background-color: color.change(variables.$primary, $lightness: 95%);
   color: $dark_primary;
   transition: background-color 0.3s ease-out;
 }
-
-.lessons_tabs {
-  margin-top: 40px;
-}
diff --git a/stories/components/AdminLessonSideNavLayout.stories.tsx b/stories/components/AdminLessonSideNavLayout.stories.tsx
deleted file mode 100644
index af9004995..000000000
--- a/stories/components/AdminLessonSideNavLayout.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { toUpper } from 'lodash'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import * as React from 'react'
-import AdminLessonNav from '../../components/admin/lessons/AdminLessonSideNavLayout'
-import styles from '../../scss/adminLessonNav.module.scss'
-
-export default {
-  component: AdminLessonNav,
-  title: 'Components/AdminLessonNav'
-}
-
-export const Basic = () => {
-  const router = useRouter()
-
-  const SideNavComponent = ({
-    tab
-  }: {
-    tab: { tabName: string; urlPageName: string }
-  }) => {
-    const isSelected = router.asPath.split('/').slice(-1)[0] === tab.urlPageName
-
-    const className =
-      styles[
-        isSelected
-          ? 'lessons_tabsNav__nav__item'
-          : 'lessons_tabsNav__nav__item--inactive'
-      ]
-
-    return (
-      <Link href={`/admin/lessons/1/${tab.urlPageName}`}>
-        <a className={className + ' ' + 'nav-pills'}>{toUpper(tab.tabName)}</a>
-      </Link>
-    )
-  }
-
-  return (
-    <AdminLessonNav
-      tabs={[
-        { tabName: 'introduction', urlPageName: 'introduction' },
-        { tabName: 'modules', urlPageName: 'modules' },
-        { tabName: 'challenges', urlPageName: 'challenges' }
-      ]}
-      Component={SideNavComponent}
-    />
-  )
-}
-
-const parameters = {
-  nextRouter: {
-    asPath: 'c0d3.com/admin/lessons/1/introduction'
-  }
-}
-
-Basic.parameters = parameters
diff --git a/stories/components/NavCard.stories.tsx b/stories/components/NavCard.stories.tsx
new file mode 100644
index 000000000..62b96ef9a
--- /dev/null
+++ b/stories/components/NavCard.stories.tsx
@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import * as React from 'react'
+import NavCard from '../../components/NavCard'
+
+export default {
+  component: NavCard,
+  title: 'Components/NavCard'
+}
+
+export const Basic = () => {
+  const router = useRouter()
+  const pageName = router.asPath.split('/').slice(-1)[0]
+  const tabs = ['introduction', 'modules', 'challenges'].map(text => ({
+    text,
+    url: `/admin/lessons/1/${text}`
+  }))
+  const tabSelected = tabs.findIndex(tab => tab.text === pageName)
+
+  return <NavCard tabSelected={tabSelected} tabs={tabs} />
+}
+
+const parameters = {
+  nextRouter: {
+    asPath: 'c0d3.com/admin/lessons/1/introduction'
+  }
+}
+
+Basic.parameters = parameters