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/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/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 97fbecd5c..26341f377 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -1,3 +1,4 @@
+//Custom button styles
 .btn {
   &.btn-secondary {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/assets/scss/components/_vehicle-image.scss b/src/assets/scss/components/_vehicle-image.scss
new file mode 100644
index 000000000..85bb7319a
--- /dev/null
+++ b/src/assets/scss/components/_vehicle-image.scss
@@ -0,0 +1,6 @@
+.vehicle-image {
+  padding: 6px;
+  &.blur {
+    filter: blur(6px);
+  }
+}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index c616ed687..d27b60a05 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -19,3 +19,4 @@
 //Custom Components CSS
 @import "./components/_navbar";
 @import "./components/_buttons";
+@import "./components/_vehicle-image";
diff --git a/src/components/buttons/buttonFunnel.vue b/src/components/buttons/buttonFunnel.vue
new file mode 100644
index 000000000..9e878ab76
--- /dev/null
+++ b/src/components/buttons/buttonFunnel.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-funnel border rounded w-100 text-start">2021</button>
+</template>
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
new file mode 100644
index 000000000..97bdcdf2d
--- /dev/null
+++ b/src/components/buttons/buttonPrimary.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-primary">Primary</button>
+</template>
diff --git a/src/components/buttons/buttonSecondary.vue b/src/components/buttons/buttonSecondary.vue
new file mode 100644
index 000000000..36a701d6c
--- /dev/null
+++ b/src/components/buttons/buttonSecondary.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+</template>
diff --git a/src/components/forms/textInput.vue b/src/components/forms/textInput.vue
new file mode 100644
index 000000000..6b898ee68
--- /dev/null
+++ b/src/components/forms/textInput.vue
@@ -0,0 +1,7 @@
+<template>
+  <div><!-- Add helper classes to wrapper div if margin is needed -->
+    <!-- Hide label but still accessible to screen reader with .visually-hidden -->
+    <label for="exampleFormControlInput1" class="form-label visually-hidden">Email address</label>
+    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+  </div>
+</template>
diff --git a/src/components/vehicleImage.vue b/src/components/vehicleImage.vue
new file mode 100644
index 000000000..b1c441528
--- /dev/null
+++ b/src/components/vehicleImage.vue
@@ -0,0 +1,3 @@
+<template>
+  <img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
+</template>
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");