diff --git a/package-lock.json b/package-lock.json
index 0ae7e6b56..287b6b81b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "Safelite",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.21.4",
         "bootstrap": "^5.1.1",
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
@@ -3246,6 +3247,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -7059,7 +7068,6 @@
       "version": "1.14.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
       "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -18206,6 +18214,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -21268,8 +21284,7 @@
     "follow-redirects": {
       "version": "1.14.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
-      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==",
-      "dev": true
+      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
     },
     "for-in": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index a9876f78d..ef1bd0ca3 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.4",
     "bootstrap": "^5.1.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
diff --git a/src/App.vue b/src/App.vue
index 1982e117d..1a6b3d9c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,54 @@
 <template>
-  <HeaderNav/>
-  <div class="container">
+  <div class="container-lg">
     <div class="row">
-      <div class="col">
-        <HelloWorld msg="VueJS with Bootstrap"/>
+      <div class="col-lg-8">
+        <HeaderNav/>
+        <div class="select-car-button d-flex justify-content-center my-4">
+          <button v-on:click="slideSelectCar">Get quote + schedule</button>
+        </div>
+        <div class="row">
+          <div class="col">
+            <HelloWorld msg="VueJS with Bootstrap"/>
+          </div>
+        </div>
+        <Colors/>
+        <Colors/>
+        <Colors/>
+        <Colors/>
+        <Colors/>
+        <Colors/>
+        <Colors/>
+      </div>
+      <div class="col" id="car-select-col">
+        <SelectCar/>
       </div>
     </div>
   </div>
-  <Colors/>
+
+  
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue';
 import HeaderNav from './components/HeaderNav';
 import Colors from './components/Colors';
+import SelectCar from './components/SelectCar';
 
 export default {
   name: 'App',
   components: {
     HelloWorld,
     HeaderNav,
-    Colors
+    Colors,
+    SelectCar
+  },
+  methods: {
+    slideSelectCar(){
+      const selectCar = document.getElementById('car-select-col');
+      selectCar.style.opacity = '1';
+      selectCar.style.transform = 'translateY(0)';
+      document.body.classList.add('no-scroll_mobile');
+    }
   }
 }
 </script>
diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss
index de25b29f8..198686215 100644
--- a/src/assets/scss/_GlobalStyles.scss
+++ b/src/assets/scss/_GlobalStyles.scss
@@ -1,3 +1,12 @@
 body {
-  background-color: #fff;
+  background-color: $light;
+  
+  @media (max-width: 992px) {
+    background-color: $white;
+
+    &.no-scroll_mobile {
+      height: 100vh;
+      overflow: hidden;
+    }
+  }
 }
diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss
new file mode 100644
index 000000000..9a8007ef1
--- /dev/null
+++ b/src/assets/scss/components/_SelectCar.scss
@@ -0,0 +1,69 @@
+.select-car {
+    height: 100vh;
+
+    .select-car-form {
+        background: $white;
+        height: 100%;
+        overflow: hidden;
+
+        form {
+            height: calc(100% - 80px);
+            overflow-y: scroll;
+            overflow-x: hidden;
+            display: flex;
+
+            .form-control {
+                border: 2px solid $light;
+                background: $white;
+                font-weight: bold;
+                cursor: pointer;
+            }
+
+            &.show_years {
+                .car_list {
+                    transform: translateX(0);
+                }
+            }
+
+            &.show_brands {
+                .car_list {
+                    transform: translateX(-100%);
+                }
+            }
+
+            .car_list {
+                flex-shrink: 0;
+                width: 100%;
+                position: relative;
+                transition: transform .3s;
+            }
+        } 
+    }
+}
+
+@media (max-width: 992px) {
+    .select-car {
+        height: 100%;
+        width: 100%;
+        background: $white;
+    }
+    #car-select-col {
+        position: fixed;
+        top: 0;
+        height: 100vh;
+        width: 100%;
+        opacity: 0;
+        transform: translateY(100%);
+        transition: transform .3s;
+    }
+}
+
+@media (min-width: 993px) {
+    .select-car-button, .close_select-car {
+            display: none !important;
+    } 
+    #car-select-col {
+        transform: translateY(0) !important;
+        opacity: 1 !important; 
+    } 
+}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index 93b0e01b1..433e6734f 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -21,3 +21,4 @@
 
 //Custom Components CSS
 @import "./components/_navbar";
+@import "./components/_SelectCar"; 
diff --git a/src/components/Colors.vue b/src/components/Colors.vue
index 03af8fbe7..00f5134d9 100644
--- a/src/components/Colors.vue
+++ b/src/components/Colors.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container my-4">
+  <div class="my-4">
     <div class="row">
       <h4>Colors</h4>
       <div class="col-md-3">
diff --git a/src/components/SelectCar.vue b/src/components/SelectCar.vue
new file mode 100644
index 000000000..b83c50ee0
--- /dev/null
+++ b/src/components/SelectCar.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="select-car sticky-lg-top py-4">
+        <div class="select-car-form p-3 rounded">
+            <div class="close_select-car d-flex justify-content-end my-3">
+                <button type="button" class="btn-close" aria-label="Close" v-on:click="closeSelectCar"></button>
+            </div>
+            <h3 class="d-flex justify-content-center">Select a year to get started</h3>
+            <h5 class="d-flex justify-content-center">What year is your vehicle?</h5>
+            <form :class="carView" class="list-view">
+                <div class="car_list car_years">
+                    <div v-for="car in cars" :key="car.year" class="mb-3">
+                        <input type="text" v-on:click="selectBrand(car.brands)" class="form-control" id="year" :value="car.year" readonly >
+                    </div>
+                </div>
+                <div class="car_list car_brands">
+                    <div v-for="brand in brands" :key="brand.brand" class="mb-3">
+                        <input type="text" class="form-control" id="brand" :value="brand.brand" readonly >
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'SelectCar',
+  data() {
+      return {
+          cars: [],
+          brands: [],
+          carView: 'show_years'
+      }
+  },
+  mounted() {
+      axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
+          this.cars = response.data.cars;
+          console.log(this.cars);
+      });
+  },
+  methods: {
+      closeSelectCar() {
+          const selectCar = document.getElementById('car-select-col');
+          selectCar.style.transform = 'translateY(100%)';
+          document.body.classList.remove('no-scroll_mobile');
+          setTimeout(function(){
+            selectCar.style.opacity = '0';
+          }, 310);
+      },
+      selectBrand(brands) {
+          this.brands = brands;
+          this.carView = 'show_brands'
+      }
+  }
+}
+</script>
\ No newline at end of file