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..fe4127bca 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>
+<style lang="scss">
+@import './styles/carbon';
+</style>
+
+<script>
+import TutorialHeader from './components/TutorialHeader';
+export default {
+  name: 'App',
+  components: {
+    TutorialHeader
+  }
+};
+</script>
diff --git a/src/components/TutorialHeader/TutorialHeader.vue b/src/components/TutorialHeader/TutorialHeader.vue
new file mode 100644
index 000000000..aa56bcf76
--- /dev/null
+++ b/src/components/TutorialHeader/TutorialHeader.vue
@@ -0,0 +1,31 @@
+<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>
+    <cv-header-nav>
+    <cv-header-menu-item to="/repos">Repositories</cv-header-menu-item>
+    </cv-header-nav>
+<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>
+    
\ No newline at end of file
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..52d6c3f6f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,8 @@
 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;
 
diff --git a/src/router.js b/src/router.js
index 0983a453e..8c1e7efce 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: 'repo-page',
       // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
+      // this generates a separate chunk (repo-page.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ './views/About.vue')
-    }
-  ]
+        import(/* webpackChunkName: "repo-page" */ './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/LandingPage/LandingPage.vue b/src/views/LandingPage/LandingPage.vue
new file mode 100644
index 000000000..d2ab93188
--- /dev/null
+++ b/src/views/LandingPage/LandingPage.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>LANDING PAGE</div>
+</template>
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..ea507875c
--- /dev/null
+++ b/src/views/RepoPage/RepoPage.vue
@@ -0,0 +1,4 @@
+<template>
+    <div>REPO PAGE</div>
+  </template>
+  
\ No newline at end of file
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;