diff --git a/.env b/.env
new file mode 100644
index 000000000..f898b4655
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+SASS_PATH=./node_modules
diff --git a/src/App.vue b/src/App.vue
index 0c9e0f98d..d5ab3041a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,22 @@
 <template>
   <div id="app">
-    Hello Carbon! Well, not quite yet. This is the starting point for the Carbon
-    tutorial.
+    <tutorial-header />
+    <cv-content id="#main-content">
+      <router-view />
+    </cv-content>
   </div>
 </template>
 
-<style lang="scss"></style>
+<script>
+import TutorialHeader from './components/TutorialHeader';
+export default {
+  name: 'App',
+  components: {
+    TutorialHeader
+  }
+};
+</script>
+
+<style lang="scss">
+@import './styles/carbon';
+</style>
diff --git a/src/components/TutorialHeader/TutorialHeader.vue b/src/components/TutorialHeader/TutorialHeader.vue
new file mode 100644
index 000000000..75313f882
--- /dev/null
+++ b/src/components/TutorialHeader/TutorialHeader.vue
@@ -0,0 +1,39 @@
+<template>
+  <cv-header aria-label="Carbon tutorial">
+    <cv-skip-to-content href="#main-content"
+      >Skip to content</cv-skip-to-content
+    >
+
+    <cv-header-name to="/" prefix="IBM">Carbon Tutorial</cv-header-name>
+    <div class="divider">|</div>
+    <cv-header-menu-item to="/repos">Repositories</cv-header-menu-item>
+
+    <template slot="header-global">
+      <cv-header-global-action aria-label="Notifications">
+        <notification-20 />
+      </cv-header-global-action>
+      <cv-header-global-action aria-label="User avatar">
+        <user-avatar-20 />
+      </cv-header-global-action>
+      <cv-header-global-action aria-label="App switcher">
+        <app-switcher-20 />
+      </cv-header-global-action>
+    </template>
+  </cv-header>
+</template>
+
+<script>
+import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
+export default {
+  name: 'TutorialHeader',
+  components: { Notification20, UserAvatar20, AppSwitcher20 }
+};
+</script>
+
+<style lang="scss">
+.divider {
+  height: 24px;
+  width: 1px;
+  background-color: #3d3d3d;
+}
+</style>
diff --git a/src/components/TutorialHeader/index.js b/src/components/TutorialHeader/index.js
new file mode 100644
index 000000000..9ef857974
--- /dev/null
+++ b/src/components/TutorialHeader/index.js
@@ -0,0 +1,2 @@
+import TutorialHeader from './TutorialHeader';
+export default TutorialHeader;
diff --git a/src/main.js b/src/main.js
index ee37c302a..ec160e64d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import CarbonComponentsVue from '@carbon/vue';
 
+Vue.use(CarbonComponentsVue);
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/src/router.js b/src/router.js
index 0983a453e..fdc872700 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Home from './views/Home.vue';
+import LandingPage from './views/LandingPage';
 
 Vue.use(Router);
 
@@ -8,17 +8,17 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'landing-page',
+      component: LandingPage
     },
     {
-      path: '/about',
-      name: 'about',
+      path: '/repos',
+      name: 'repos-page',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ './views/About.vue')
+        import(/* webpackChunkName: "about" */ './views/RepoPage')
     }
   ]
 });
diff --git a/src/styles/_carbon.scss b/src/styles/_carbon.scss
new file mode 100644
index 000000000..53dc52eb3
--- /dev/null
+++ b/src/styles/_carbon.scss
@@ -0,0 +1 @@
+@import 'carbon-components/scss/globals/scss/styles';
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070d..000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index d6d25e533..000000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="home"></div>
-</template>
-
-<script>
-export default {
-  name: 'home'
-};
-</script>
diff --git a/src/views/LandingPage/LandingPage.vue b/src/views/LandingPage/LandingPage.vue
new file mode 100644
index 000000000..4eb60b595
--- /dev/null
+++ b/src/views/LandingPage/LandingPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>LANDING PAGE</div>
+</template>
+
+<script>
+export default {
+  name: 'LandingPage'
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/LandingPage/index.js b/src/views/LandingPage/index.js
new file mode 100644
index 000000000..40e78672f
--- /dev/null
+++ b/src/views/LandingPage/index.js
@@ -0,0 +1,2 @@
+import LandingPage from './LandingPage';
+export default LandingPage;
diff --git a/src/views/RepoPage/RepoPage.vue b/src/views/RepoPage/RepoPage.vue
new file mode 100644
index 000000000..b72a76f31
--- /dev/null
+++ b/src/views/RepoPage/RepoPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>REPO PAGE</div>
+</template>
+
+<script>
+export default {
+  name: 'LandingPage'
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/RepoPage/index.js b/src/views/RepoPage/index.js
new file mode 100644
index 000000000..9398ae93f
--- /dev/null
+++ b/src/views/RepoPage/index.js
@@ -0,0 +1,2 @@
+import RepoPage from './RepoPage';
+export default RepoPage;