diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
index d7dd4e79..15f68e05 100644
--- a/web-app/src/Routes.tsx
+++ b/web-app/src/Routes.tsx
@@ -6,7 +6,7 @@ import Router from './components/Router'
 import LoadingPage from './containers/LoadingPage'
 import ContinuePage from './containers/Continue'
 import NewPage from './containers/New'
-import SummaryPage from './containers/Tutorial/SummaryPage'
+import OverviewPage from './containers/Overview'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 
@@ -34,7 +34,7 @@ const Routes = () => {
           <LoadingPage text="Loading..." />
         </Route>
         <Route path="Tutorial.Summary">
-          <SummaryPage send={tempSend} context={{} as CR.MachineContext} />
+          <OverviewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.Level">
           <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
diff --git a/web-app/src/containers/Overview/OverviewPage.tsx b/web-app/src/containers/Overview/OverviewPage.tsx
new file mode 100644
index 00000000..81672bb4
--- /dev/null
+++ b/web-app/src/containers/Overview/OverviewPage.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { Button } from '@alifd/next'
+import * as G from 'typings/graphql'
+
+const styles = {
+  summary: {
+    padding: '0rem 1rem 1rem 1rem',
+  },
+  title: {
+    fontWeight: 'bold' as 'bold',
+  },
+  description: {
+    fontSize: '1rem',
+  },
+  header: {
+    height: '36px',
+    backgroundColor: '#EBEBEB',
+    fontSize: '16px',
+    lineHeight: '16px',
+    padding: '10px 1rem',
+  },
+  levelList: {
+    padding: '0rem 1rem',
+  },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    alignItems: 'center' as 'center',
+    justifyContent: 'flex-end' as 'flex-end',
+    position: 'absolute' as 'absolute',
+    bottom: 0,
+    height: '50px',
+    padding: '1rem',
+    paddingRight: '2rem',
+    backgroundColor: 'black',
+    width: '100%',
+  },
+  startButton: {
+    backgroundColor: 'gold',
+    fontWeight: 'bold' as 'bold',
+  },
+}
+
+interface Props {
+  title: string
+  description: string
+  levels: G.Level[]
+  onNext(): void
+}
+
+const Summary = ({ title, description, levels, onNext }: Props) => (
+  <div>
+    <div style={styles.header}>
+      <span>CodeRoad</span>
+    </div>
+    <div style={styles.summary}>
+      <h2 style={styles.title}>{title}</h2>
+      <p style={styles.description}>{description}</p>
+    </div>
+    <div>
+      <div style={styles.header}>
+        <span>Levels</span>
+      </div>
+      <div style={styles.levelList}>
+        {levels.map((level: G.Level, index: number) => (
+          <div key={index}>
+            <h4>
+              {index + 1}. {level.title}
+            </h4>
+            <div>{level.description}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div style={styles.options}>
+      {/* TODO: Add back button */}
+      <Button style={styles.startButton} onClick={() => onNext()}>
+        Start
+      </Button>
+    </div>
+  </div>
+)
+
+export default Summary
diff --git a/web-app/src/containers/Tutorial/SummaryPage/index.tsx b/web-app/src/containers/Overview/index.tsx
similarity index 71%
rename from web-app/src/containers/Tutorial/SummaryPage/index.tsx
rename to web-app/src/containers/Overview/index.tsx
index cf3109f2..ac3e6ec4 100644
--- a/web-app/src/containers/Tutorial/SummaryPage/index.tsx
+++ b/web-app/src/containers/Overview/index.tsx
@@ -3,9 +3,9 @@ import * as G from 'typings/graphql'
 import * as CR from 'typings'
 import { useQuery } from '@apollo/react-hooks'
 
-import queryTutorial from '../../../services/apollo/queries/tutorial'
-import Summary from './Summary'
-import ErrorView from '../../../components/Error'
+import queryTutorial from '../../services/apollo/queries/tutorial'
+import OverviewPage from './OverviewPage'
+import ErrorView from '../../components/Error'
 
 interface PageProps {
   context: CR.MachineContext
@@ -21,14 +21,14 @@ interface TutorialDataVariables {
   version: string
 }
 
-const SummaryPage = (props: PageProps) => {
+const Overview = (props: PageProps) => {
   const { tutorial } = props.context
 
   if (!tutorial) {
     throw new Error('Tutorial not found in summary page')
   }
   const { loading, error, data } = useQuery<TutorialData, TutorialDataVariables>(queryTutorial, {
-    fetchPolicy: 'network-only', // for debugging purposes
+    fetchPolicy: 'network-only', // to ensure latest
     variables: {
       tutorialId: tutorial.id,
       version: tutorial.version.version,
@@ -56,8 +56,9 @@ const SummaryPage = (props: PageProps) => {
     })
 
   const { title, description } = data.tutorial.version.summary
+  const { levels } = data.tutorial.version.data
 
-  return <Summary title={title} description={description} onNext={onNext} />
+  return <OverviewPage title={title} description={description} levels={levels} onNext={onNext} />
 }
 
-export default SummaryPage
+export default Overview
diff --git a/web-app/src/containers/Tutorial/SummaryPage/Summary/index.tsx b/web-app/src/containers/Tutorial/SummaryPage/Summary/index.tsx
deleted file mode 100644
index 80fa0f42..00000000
--- a/web-app/src/containers/Tutorial/SummaryPage/Summary/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Button } from '@alifd/next'
-import * as React from 'react'
-
-const styles = {
-  card: {
-    // width: '20rem',
-  },
-  content: {
-    padding: '0rem 1rem',
-  },
-  options: {
-    padding: '1rem',
-  },
-  title: {},
-}
-
-interface Props {
-  title: string
-  description: string
-  onNext(): void
-}
-
-const Summary = ({ title, description, onNext }: Props) => (
-  <div style={styles.card}>
-    <div style={styles.content}>
-      <h2 style={styles.title}>{title}</h2>
-      <p>{description}</p>
-    </div>
-    <div style={styles.options}>
-      <Button onClick={() => onNext()}>Continue</Button>
-    </div>
-  </div>
-)
-
-export default Summary
diff --git a/web-app/stories/Level.stories.tsx b/web-app/stories/Level.stories.tsx
index c902bba5..79800b44 100644
--- a/web-app/stories/Level.stories.tsx
+++ b/web-app/stories/Level.stories.tsx
@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 import Level from '../src/containers/Tutorial/LevelPage/Level/index'
 
-storiesOf('Tutorial SideBar', module)
+storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => {
diff --git a/web-app/stories/New.stories.tsx b/web-app/stories/New.stories.tsx
index b22c24c1..7c78d7a9 100644
--- a/web-app/stories/New.stories.tsx
+++ b/web-app/stories/New.stories.tsx
@@ -28,7 +28,7 @@ const tutorialList = [
   },
 ]
 
-storiesOf('New', module)
+storiesOf('Start', module)
   .addDecorator(SideBarDecorator)
   .add('New Page', () => {
     return <NewPage tutorialList={tutorialList} />
diff --git a/web-app/stories/Overview.stories.tsx b/web-app/stories/Overview.stories.tsx
new file mode 100644
index 00000000..a24eb8a6
--- /dev/null
+++ b/web-app/stories/Overview.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { linkTo } from '@storybook/addon-links'
+import { storiesOf } from '@storybook/react'
+
+import SideBarDecorator from './utils/SideBarDecorator'
+import OverViewPage from '../src/containers/Overview/OverviewPage'
+
+storiesOf('Overview', module)
+  .addDecorator(SideBarDecorator)
+  .add('OverView Page', () => {
+    const levels = [
+      {
+        id: 'L1',
+        title: 'The First Level',
+        description: 'A Summary of the first level',
+      },
+      {
+        id: 'L2',
+        title: 'The Second Level',
+        description: 'A Summary of the second level',
+      },
+      {
+        id: 'L3',
+        title: 'The Third Level',
+        description: 'A Summary of the third level',
+      },
+    ]
+    return (
+      <OverViewPage
+        title="Some Title"
+        description="Some description"
+        levels={levels}
+        onNext={linkTo('Tutorial SideBar', 'Level')}
+      />
+    )
+  })
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
index 6fc8ba69..522c23be 100644
--- a/web-app/stories/Step.stories.tsx
+++ b/web-app/stories/Step.stories.tsx
@@ -30,7 +30,7 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
   Emojis: :) :| :(
   `
 
-storiesOf('Tutorial SideBar', module)
+storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Step Description', () => (
diff --git a/web-app/stories/Summary.stories.tsx b/web-app/stories/Summary.stories.tsx
deleted file mode 100644
index b72b6d34..00000000
--- a/web-app/stories/Summary.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-import { linkTo } from '@storybook/addon-links'
-import { storiesOf } from '@storybook/react'
-
-import SideBarDecorator from './utils/SideBarDecorator'
-import Summary from '../src/containers/Tutorial/SummaryPage/Summary'
-
-storiesOf('Tutorial SideBar', module)
-  .addDecorator(SideBarDecorator)
-  .add('Summary', () => (
-    <Summary title="Some Title" description="Some description" onNext={linkTo('Tutorial SideBar', 'Level')} />
-  ))
diff --git a/web-app/stories/utils/SideBarDecorator.tsx b/web-app/stories/utils/SideBarDecorator.tsx
index 7a3bfac9..579f0383 100644
--- a/web-app/stories/utils/SideBarDecorator.tsx
+++ b/web-app/stories/utils/SideBarDecorator.tsx
@@ -1,11 +1,16 @@
 import * as React from 'react'
 
 const styles = {
-  width: '20rem',
-  borderRight: '2px solid black',
-  height: window.innerHeight,
+  container: {
+    position: 'relative' as 'relative',
+    boxSizing: 'border-box' as 'border-box',
+    maxWidth: '20rem',
+    borderRight: '2px solid black',
+    width: '20rem',
+    height: window.innerHeight,
+  },
 }
 
-const SideBarDecorator = storyFn => <div style={styles}>{storyFn()}</div>
+const SideBarDecorator = storyFn => <div style={styles.container}>{storyFn()}</div>
 
 export default SideBarDecorator