diff --git a/src/App.vue b/src/App.vue
index f161d937e..71b56feaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
       <component :is="Component" />
     </transition>
   </router-view>
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c2eb72971..07efe470e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
-import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "buttonQuestion",
@@ -135,8 +134,6 @@ export default {
     },
     handleCheckedChanged(val) {
 
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
-
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index c24e1f86f..a3cbfa280 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,91 +1,236 @@
 <template>
-  <div v-if="isModalVisible" class="loading-modal-backdrop">
-    <div class="loading-modal">
-      <section class="loading-modal-body">
-        <div class="modal-icon-container text-center">
-          <object type="image/svg+xml" :data="fmgAnimatedTransition"/>
+  <div v-if="isModalVisible" class="container-fluid modal-loader">
+    <div class="row g-2 h-100 d-flex align-items-center">
+      <div class="container-fluid overflow-hidden">
+        <div class="row h-100">
+          <div class="col text-center tagbg mb-2">
+            <div class="spinner-border text-danger" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
         </div>
-      </section>
+        <div class="row">
+          <div class="col">
+            <div class="text-container slide">
+              <p>Finishing up
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Nearly there
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Generating your quote
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Finding your glass
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Assessing your damage
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-// load the path like this - <object> data attribute doesn't load the relative path correctly
-const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg");
-  export default {
-    name: 'Modal',
-    data() {
-      return {
-        isModalVisible: false,
-        fmgAnimatedTransition: FMGAnimatedTransition,
-      };
-    },
-    methods: {
-      showModal() {
-        //Display modal
-        this.isModalVisible = true;
-        //Force page reload on back button
-        window.addEventListener("pageshow", function(evt) {
-          if(evt.persisted){
+export default {
+  name: 'Modal',
+  data() {
+    return {
+      isModalVisible: false,
+    };
+  },
+  methods: {
+    showModal() {
+      //Display modal
+      this.isModalVisible = true;
+      //Force page reload on back button
+      window.addEventListener("pageshow", function(evt) {
+        if(evt.persisted){
           setTimeout(function(){
-              window.location.reload();
-        }, 10);
-    }
-}, false);
-      },
+            window.location.reload();
+          }, 10);
+        }
+      }, false);
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss">
-  .loading-modal-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: #e5e5e5;
+.modal-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1055;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  background: $gray-100;
+
+  .tagbg {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 96px;
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 1050;
-    width: 100vw;
-    height: 100vh;
   }
 
-  .loading-modal {
-    position: absolute;
-    background: #ffffff;
-    padding: 0 0 32px 0;
-    box-shadow: 2px 2px 20px 1px;
-    overflow: hidden;
+  .spinner-border {
+    width: 6.5rem;
+    height: 6.5rem;
+    border: 0.45em solid currentColor;
+    border-right-color: transparent;
+  }
+
+  .text-container {
     display: flex;
-    flex-direction: column;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    top: 48px;
-    height: 186px;
-    width: 327px;
-  }
-
-  .loading-modal-text {
-      padding: 0 24px 0 24px;
-  }
-
-  .modal-icon-container {
-    margin: 15px auto;
-    padding-bottom: 26px;
-  }
-
-  .modal-icon-container img {
+    width: 350px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 auto;
+    position: relative;
+    &:after {
+      content: '';
+      background: rgb(245,245,245);
+      background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
       position: absolute;
-      vertical-align: middle;
-      border: 0;
-      width: 327px;
-      height: 186px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &.slide p {
+      animation: slide-in 20s ease-in-out 1s forwards 1;
+    }
+
+
+    p {
+      margin: 0 175px;
+      transform: translateX(-2346px);
+    }
+
+    @keyframes slide-in {
+      0% {
+        transform: translateX(-2346px)
+      }
+      11% {
+        transform: translateX(-2010px)
+      }
+      22% {
+        transform: translateX(-2010px)
+      }
+      33% {
+        transform: translateX(-1490px)
+      }
+      44% {
+        transform: translateX(-1490px)
+      }
+      55% {
+        transform: translateX(-985px)
+      }
+      66% {
+        transform: translateX(-985px)
+      }
+      77% {
+        transform: translateX(-490px)
+      }
+      88% {
+        transform: translateX(-490px)
+      }
+      100% {
+        transform: translateX(-40px)
+      }
+    }
+
+    .dot-1 {
+      animation: blinking-elipsis .75s linear infinite;
+      @keyframes blinking-elipsis {
+        0% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-2 {
+      animation: blinking-elipsis-2 .75s linear infinite;
+      @keyframes blinking-elipsis-2 {
+        0% {
+          opacity: 0;
+        }
+        21% {
+          opacity: 0;
+        }
+        22% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-3 {
+      animation: blinking-elipsis-3 .75s linear infinite;
+      @keyframes blinking-elipsis-3 {
+        0% {
+          opacity: 0;
+        }
+        43% {
+          opacity: 0;
+        }
+        44% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
   }
+}
 </style>
diff --git a/src/common-components/menu-button/menu-button.spec.js b/src/common-components/menu-button/menu-button.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/menu-button/menu-button.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue
new file mode 100644
index 000000000..c7b798f9a
--- /dev/null
+++ b/src/common-components/menu-button/menu-button.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+    <div class="bar1"></div>
+    <div class="bar2"></div>
+    <div class="bar3"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'menuButton',
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+      this.isActive = !this.isActive;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .bar1,
+  .bar2,
+  .bar3 {
+    width: 14px;
+    height: 2px;
+    background-color: $blue-400;
+    margin: 1px 0;
+    transition: 0.25s;
+  }
+  &.active .bar1 {
+    transform: rotate(-45deg) translate(-3px, 3px);
+  }
+  &.active .bar2 {opacity: 0;}
+  &.active .bar3 {
+    transform: rotate(45deg) translate(-3px, -3px);
+  }
+}
+</style>
diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js
index 0928a2656..55d10738d 100644
--- a/src/helpers/damage-helper.js
+++ b/src/helpers/damage-helper.js
@@ -3,17 +3,18 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 
 export function getDamageString() {
-    const damageLocations = store.getters.damage.glassToReplace;
+    // If it's a repair it's always a windshield.
     const isRepair = store.getters.damage.isRepair;
+    if(isRepair){
+      return "windshield"
+    }
+
+    const damageLocations = store.getters.damage.glassToReplace;
 
     let returnString;
     if (!damageLocations) {
       return;
     }
-    // If it's a repair it's always a windshield.
-    if(isRepair){
-      return "windshield"
-    }
 
     if (damageLocations.length > 1) {
       returnString = "match"
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 98c0ca927..f188cf214 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -192,6 +192,7 @@ export default ({
 				this.addressModel.zipCode !== null) {
 
 				this.showAddressFields = true;
+				return;
 			}
 
 			const addressField1 = document.getElementById("autocomplete");
@@ -230,34 +231,34 @@ export default ({
 						
 					})
 
-						addressField1.onchange = function() {
-							const hover = document.querySelector(".pac-container .pac-item:hover");
-							// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-							if (hover === null) {
-								const item = document.querySelector(".pac-container .pac-item");
-								if (item != null) {
-									const firstResult = item.textContent;
-									const geocoder = new window.google.maps.Geocoder();
-									geocoder.geocode({
-										address: firstResult
-									}, function (results, status) {
-										if (status === window.google.maps.GeocoderStatus.OK) {
-											fillInAddress(results[0]);
-											self.displayVerificationWarning = true;
-											self.displayNoMatchWarning = false;
-										}
-									});
-								}
-								else {
-									self.addressModel.city = "";
-									self.addressModel.state = "";
-									self.addressModel.zipCode = "";      
-									self.showAddressFields = true;
-									self.displayVerificationWarning = false;
-									self.displayNoMatchWarning = true;
-								}					
+					addressField1.onchange = function() {
+						const hover = document.querySelector(".pac-container .pac-item:hover");
+						// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+						if (hover === null) {
+							const item = document.querySelector(".pac-container .pac-item");
+							if (item != null) {
+								const firstResult = item.textContent;
+								const geocoder = new window.google.maps.Geocoder();
+								geocoder.geocode({
+									address: firstResult
+								}, function (results, status) {
+									if (status === window.google.maps.GeocoderStatus.OK) {
+										fillInAddress(results[0]);
+										self.displayVerificationWarning = true;
+										self.displayNoMatchWarning = false;
+									}
+								});
 							}
-						};
+							else {
+								self.addressModel.city = "";
+								self.addressModel.state = "";
+								self.addressModel.zipCode = "";      
+								self.showAddressFields = true;
+								self.displayVerificationWarning = false;
+								self.displayNoMatchWarning = true;
+							}					
+						}
+					};
 
 					function fillInAddress(place) {
 						if (!place) {
@@ -265,6 +266,7 @@ export default ({
 						}
 
 						if (place && place.address_components) {
+							self.addressModel.streetAddress= "";
 							self.showAddressFields = true;
 
 							for (const component of place.address_components) {
@@ -276,8 +278,7 @@ export default ({
 										break;
 									}
 									case "route": {
-										self.addressModel.streetAddress +=
-										" " + component.short_name;
+										self.addressModel.streetAddress += " " + component.short_name;
 										break;
 									}
 									case "locality": {
@@ -286,7 +287,6 @@ export default ({
 									}
 									case "administrative_area_level_1": {
 										self.addressModel.state = component.short_name;
-										// self.addressModel.state = "";
 										break;
 									}
 									case "postal_code": {
@@ -311,12 +311,12 @@ export default ({
 						const pacContainer = document.querySelector(".pac-container");
 						pacContainer.remove();
 
-						}
-					})
-					.catch(() => {
-						// Failed to fetch script
-						console.log("Unable to load Google Places API script");
-					});	
+					}
+				})
+				.catch(() => {
+					// Failed to fetch script
+					console.log("Unable to load Google Places API script");
+				});	
 		}
 	},
 	mounted() {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 526b1e971..268351417 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,5 +1,15 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <menuButton/>
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
@@ -1064,81 +1074,6 @@
       <h6>h6 Heading</h6>
     </div>
   </div>
-  <div class="row my-4">
-    <div class="col">
-      <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Dismissible Alert"
-      alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-      v-bind:isDismissible="true"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="NON-Dismissible Alert"
-      alertCopy="This is an example of a NON-DISMISSIBLE alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-warning"
-      alertHeadline="Warning Alert"
-      alertCopy="This is an example of a WARNING alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-info"
-      alertHeadline="Info Alert"
-      alertCopy="This is an example of a INFO alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="Danger Alert"
-      alertCopy="This is an example of a DANGER alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="No Body Copy Alert"
-      alertCopy=""
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Multi-Paragraph Alert"
-      :alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
   </div>
   </template>
 
@@ -1147,7 +1082,6 @@
   import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
   import listCard from "@/ux-components/list-card/list-card";
   import listButton from "@/ux-components/list-button/list-button";
-  import alert from "@/ux-components/alert/alert";
   import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
   import checkbox from "@/ux-components/checkbox/checkbox";
   import radio from "@/ux-components/radio/radio";
@@ -1155,6 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
+  import menuButton from "@/common-components/menu-button/menu-button";
   export default {
     name: "App",
     components: {
@@ -1162,7 +1097,6 @@
       buttonBack,
       listCard,
       listButton,
-      alert,
       listButtonHorizontal,
       checkbox,
       radio,
@@ -1170,6 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
+      menuButton,
     },
     data() {
       return {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c93732b01..d4e44feb7 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -32,7 +32,7 @@
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
-            class="my-3"
+            class="my-5"
             cmsWidgetName="HasReplacementConflict"
             v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
@@ -297,12 +297,12 @@ export default {
       this.navigateForward();
     },
 
-    navigateForward(){  
+    navigateForward(){
 
       // If vin already exists, navigate directly to vin-lookup
       if(store.getters.vehicle.vin) {
         this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
-        return; 
+        return;
       }
       else {
         this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 6e7c844ff..bdbe25195 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -14,7 +14,7 @@
             alertClass="alert-danger"
             :isDismissible="false"
           />
-        <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion" 
+        <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
             :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
             v-model="selectedWindshieldChipCountValues"
@@ -30,7 +30,7 @@
             isRequired
         />
         <alert
-            class="my-3"
+            class="mt-5"
             cmsWidgetName="SplitSingleConflict"
             v-if="hasSplitSingleConflict"
             alertClass="alert-danger"
@@ -56,10 +56,10 @@ defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_C
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
 defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
-    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && 
-        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && 
-        Array.isArray(otherFieldValue) && 
-        otherFieldValue.length > 1) 
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
+        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
+        Array.isArray(otherFieldValue) &&
+        otherFieldValue.length > 1)
     {
         return false;
     }
@@ -72,8 +72,8 @@ defineRule("repair-only", (value) => {
     return false;
 });
 defineRule("prevent-split-and-single-together", (value) => {
-    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && 
-        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || 
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
+        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
         value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
     {
         return false;
@@ -145,7 +145,7 @@ export default ({
             }
         },
         isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some(selectedDamages => 
+            return this.selectedDamageLocations.some(selectedDamages =>
                 {
                     return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                 });
@@ -193,4 +193,4 @@ export default ({
         alert,
     },
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 80fca817d..6c0f305b5 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -71,7 +71,7 @@
           :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
           :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
           v-model="customAlertData"
-          v-if="isVinFieldReadOnly"
+          v-if="isVinFieldReadOnly" 
           alertClass="alert-success"
         />
         <alert
@@ -102,7 +102,7 @@
           :manualHeadline="PerfectMatchNewVinAlertHeader"
           :manualCopy="PerfectMatchNewVinAlertBody"
           v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
+          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
           alertClass="alert-success"
         />
         <funnelFooter
@@ -190,6 +190,7 @@ export default {
   },
   watch: {
     vin() {
+      this.vinNotFound = false;
       this.$refs.funnelFooter.updateButtonText(
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 133187797..ca5a24a3e 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -9,12 +9,18 @@ import baseMixin from "@/mixins/base-mixin";
 export default {
   methods: {
     logPageView(pageEvent) {
+      // if the user does not have a session id from the content site, do not log.
+      const sid = getSessionIdValue();
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         action: '', 
         event: pageEvent,
         shouldUseSessionId: true,
@@ -24,12 +30,18 @@ export default {
     },
 
     logCustomEvent(category, action, label, value) {
+      // if the user does not have a session id from the content site, do not log.
+      const sid = getSessionIdValue();
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         category: category, 
         action: action,
         label: label,
diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js
index 8dd49045d..db773da56 100644
--- a/src/mixins/analytics-mixin.spec.js
+++ b/src/mixins/analytics-mixin.spec.js
@@ -1,5 +1,5 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
-import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
+import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 
 describe("analyticsMixin.js", () => {
@@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
     }
     const mocks = setupMocksForJsFiles(mockData);
 
+    const testCookieValue = {
+      sid: '10000000-0000-0000-0000-000000000001'
+    }
+
+    setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
+
     analyticsMixin.methods.logPageView(type, payload);
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
diff --git a/src/router/index.js b/src/router/index.js
index 397802063..db46a3306 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -126,7 +126,7 @@ const router = createRouter({
 router.afterEach(async (to, from) => {
   // Push page view to GA
   analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
-  
+
   baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() })
   .then( (response) => {
     analyticsMixin.methods.pushExperimentsToDataLayer(response.data);
@@ -271,4 +271,4 @@ function resetDependentState(component) {
   return component.default.methods.resetDependentState();
 }
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index e247f3ded..c03c267ab 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -12,11 +12,11 @@
 }
 
 .route-fade-enter-active .fade-on-route-transition {
-    transition: opacity 0.8s ease;
+    transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-leave-active .fade-on-route-transition {
-    transition: opacity 0.3s ease; 
+    transition: opacity 0.2s ease-in;  //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-enter-from .fade-on-route-transition,
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index cbd757a88..5c288f660 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button-horizontal.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index ccb995f77..eef4be443 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButtonHorizontal",
@@ -91,6 +92,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -116,6 +121,7 @@ export default {
           this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 7a244a5bf..7cce84cd8 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButton from "./list-button";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -109,6 +117,13 @@ describe("list-button.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -128,6 +143,13 @@ describe("list-button.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 1f1a5046b..f09384934 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButton",
@@ -91,6 +92,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -116,6 +121,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index d810909e8..2fbdaade4 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listCard from "./list-card";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-card.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -292,8 +293,16 @@ describe("list-card.vue", () => {
   });
 
   it("Should run handleChange if triggerButton is triggered", async () => {
+
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: false,
       },
@@ -312,6 +321,13 @@ describe("list-card.vue", () => {
   it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 742ec4584..264d7c299 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -61,6 +61,7 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listCard",
@@ -98,6 +99,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -133,6 +138,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {