diff --git a/public/index.html b/public/index.html
index 84665a8b4..351892a4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="Funnel1"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index a30f90bd8..1982e117d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,45 +1,26 @@
 <template>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col my-3 d-flex justify-content-center">
-        <vehicleImage/>
-      </div>
-    </div>
+  <HeaderNav/>
+  <div class="container">
     <div class="row">
       <div class="col">
-        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
-        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <buttonFunnel/>
-      </div>
-    </div>
-    <div class="row mt-5">
-      <div class="col">
-        <buttonPrimary/>
-        <buttonSecondary/>
-        <textInput/>
+        <HelloWorld msg="VueJS with Bootstrap"/>
       </div>
     </div>
   </div>
+  <Colors/>
 </template>
 
 <script>
-  import buttonPrimary from './components/buttons/buttonPrimary';
-  import buttonSecondary from './components/buttons/buttonSecondary';
-  import buttonFunnel from './components/buttons/buttonFunnel';
-  import textInput from './components/forms/textInput';
-  import vehicleImage from './components/vehicleImage';
-  export default {
-    name: 'App',
-    components: {
-      buttonPrimary,
-      buttonSecondary,
-      buttonFunnel,
-      textInput,
-      vehicleImage
-    }
+import HelloWorld from './components/HelloWorld.vue';
+import HeaderNav from './components/HeaderNav';
+import Colors from './components/Colors';
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    HeaderNav,
+    Colors
   }
+}
 </script>
diff --git a/src/Funnel1.vue b/src/Funnel1.vue
new file mode 100644
index 000000000..a30f90bd8
--- /dev/null
+++ b/src/Funnel1.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col my-3 d-flex justify-content-center">
+        <vehicleImage/>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <buttonFunnel/>
+      </div>
+    </div>
+    <div class="row mt-5">
+      <div class="col">
+        <buttonPrimary/>
+        <buttonSecondary/>
+        <textInput/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import buttonPrimary from './components/buttons/buttonPrimary';
+  import buttonSecondary from './components/buttons/buttonSecondary';
+  import buttonFunnel from './components/buttons/buttonFunnel';
+  import textInput from './components/forms/textInput';
+  import vehicleImage from './components/vehicleImage';
+  export default {
+    name: 'App',
+    components: {
+      buttonPrimary,
+      buttonSecondary,
+      buttonFunnel,
+      textInput,
+      vehicleImage
+    }
+  }
+</script>
diff --git a/src/main.js b/src/main.js
index e9f222d1e..b0b4e2c36 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from "vue";
-import App from "./App.vue";
+import Funnel1 from "./Funnel1.vue";
 
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
@@ -7,4 +7,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
 //Get Bootstrap and Custom Styles
 import "./assets/scss/custom.scss";
 
-createApp(App).mount("#app")
+createApp(Funnel1).mount("#Funnel1");