diff --git a/.env b/.env
new file mode 100644
index 000000000..aebb86911
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+SASS_PATH="node_modules"
diff --git a/.project b/.project
new file mode 100644
index 000000000..1c59b4fd8
--- /dev/null
+++ b/.project
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>carbon-tutorial-vue</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+	</natures>
+</projectDescription>
diff --git a/src/App.vue b/src/App.vue
index 0c9e0f98d..c8de06e0f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,23 @@
 <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..fda1743f9
--- /dev/null
+++ b/src/components/TutorialHeader/TutorialHeader.vue
@@ -0,0 +1,34 @@
+<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>
diff --git a/src/components/TutorialHeader/index.js b/src/components/TutorialHeader/index.js
new file mode 100644
index 000000000..ea3884d37
--- /dev/null
+++ b/src/components/TutorialHeader/index.js
@@ -0,0 +1,2 @@
+import TutorialHeader from './TutorialHeader';
+export default TutorialHeader;
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ee37c302a..e5ca9111d 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..b231f8b37 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')
     }
   ]
-});
+}); 
\ No newline at end of file
diff --git a/src/styles/_carbon.scss b/src/styles/_carbon.scss
new file mode 100644
index 000000000..15b6dfd7a
--- /dev/null
+++ b/src/styles/_carbon.scss
@@ -0,0 +1 @@
+@import 'carbon-components/scss/globals/scss/styles';
\ No newline at end of file
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..78e1670b0
--- /dev/null
+++ b/src/views/LandingPage/LandingPage.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>LANDING PAGE</div>
+</template>
\ No newline at end of file
diff --git a/src/views/LandingPage/index.js b/src/views/LandingPage/index.js
new file mode 100644
index 000000000..7d7bdd57d
--- /dev/null
+++ b/src/views/LandingPage/index.js
@@ -0,0 +1,2 @@
+import LandingPage from './LandingPage';
+export default LandingPage;
\ No newline at end of file
diff --git a/src/views/RepoPage/RepoPage.vue b/src/views/RepoPage/RepoPage.vue
new file mode 100644
index 000000000..588c280c5
--- /dev/null
+++ b/src/views/RepoPage/RepoPage.vue
@@ -0,0 +1,3 @@
+<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;