diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 47a7a1a32..b8fe82631 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,25 +1,28 @@
 <template>
-	<div class="textbox-question" :class="(errors.length > 0 || hasError) ? 'has-error' : ''">
+	<div class="textbox-question" :class="[
+		errors.length > 0 ? 'has-error' : '',
+		hasError ? 'has-error' : '',
+		]">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
-		<input v-model="value" 
+		<input v-model="value"
 			v-maska="mask"
-			:type="type" 
-			class="form-control" 
-			:ref="inputId" 
-			:id="inputId" 
+			:type="type"
+			class="form-control"
+			:ref="inputId"
+			:id="inputId"
 			:name="inputId"
-			:placeholder="placeholderText" 
-			:aria-disabled="isDisabled" 
-			:disabled="isDisabled" 
-			:aria-required="isRequired"     
-			autocomplete="off"   
+			:placeholder="placeholderText"
+			:aria-disabled="isDisabled"
+			:disabled="isDisabled"
+			:aria-required="isRequired"
+			autocomplete="off"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 			@input="handleChange"
 			@blur="handleBlur" />
 		<div v-show="errorMessage" class="row mt-2 form-test-error">
 			<span role="alert">{{ errorMessage }}</span>
-		</div>		
+		</div>
 	</div>
 </template>
 
@@ -56,7 +59,7 @@ export default {
 	setup(props) {
 		const fieldOptions = {
 			type: "text",
-			value: props.modelValue, 
+			value: props.modelValue,
 		};
 
 		const {
@@ -64,15 +67,17 @@ export default {
 			handleBlur,
 			handleChange,
 			meta,
-			validate
+			validate,
+			errors,
 		} = useField(props.inputId, props.validationRules, fieldOptions);
 
-		return { 
+		return {
 			errorMessage,
 			handleBlur,
 			handleChange,
 			validate,
-			meta, 
+			meta,
+			errors,
 		};
 	},
 	computed: {
@@ -86,7 +91,7 @@ export default {
 			set: function(newValue) {
 				this.$emit("update:modelValue", newValue);
 			}
-		}, 
+		},
 		labelText: {
 			get: function () {
 				let labelText = this.questionText;
@@ -98,7 +103,7 @@ export default {
 
 				return labelText;
 			}
-		}    
+		}
 	},
 	watch: {
 		value(newValue) {
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 311e747b0..c3976d0f9 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -16,6 +16,8 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    VIN_REQUIRED: "Please enter your VIN",
+    VIN_FORMAT: "Please enter a valid VIN",
 };
-  
-export { errorMessages };
\ No newline at end of file
+
+export { errorMessages };
diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js
index 3e9f14d32..7987f4cb6 100644
--- a/src/helpers/heritage-integration/navigation-helper.js
+++ b/src/helpers/heritage-integration/navigation-helper.js
@@ -9,7 +9,7 @@ import router from "@/router";
 /*
     If the user has visited the funnel before this method will determine the bets place to
     drop them so they don't start at the beginning again. This method will return 'heritage' if
-    the user has an existing order and they come back in from the Safelite.com CTA. 
+    the user has an existing order and they come back in from the Safelite.com CTA.
 */
 export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHeritageOrder = false) {
 
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 366a499af..b50b180c0 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,44 +1,267 @@
 <template>
-<div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
-    <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" />
-    <funnelSubHeader ref="funnelSubHeader" />
-    <vinInformation class="mb-5" />
-    <funnel-footer ref="funnelFooter" :isForwardActionDisabled=true @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-</div>
+  <Form
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    ref="theForm"
+    v-slot="{ meta }"
+  >
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <vinInformation />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
+        </div>
+      </div>
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="matchedDifferentVehicle"
+        alertClass="alert-danger"
+        cmsWidgetName="MatchedDifferentVehicle"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="noMatchAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="NoMatchAlertWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="noServiceZip"
+        alertClass="alert-warning"
+        cmsWidgetName="NoServiceZipWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinFound"
+        alertClass="alert-warning"
+        cmsWidgetName="VinFoundWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinFoundReadOnly"
+        alertClass="alert-warning"
+        cmsWidgetName="VinFoundReadOnlyWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="foundWindshieldAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="FoundWindshieldAlert"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinNotFound"
+        alertClass="alert-warning"
+        cmsWidgetName="VinNotFound"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="perfectMatchNewVinAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="PerfectMatchNewVinAlert"
+      />
+      <funnelFooter
+        cmsWidgetName="FunnelFooterWidget"
+        ref="funnelFooter"
+        :isDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
+defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
+defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
+
 export default {
-    name: "vin-lookup",
-    components: {
-        funnelHeader,
-        vehicleBanner,
-        funnelSubHeader,
-        vinInformation,
-        funnelFooter,
+  name: "vin-lookup",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  props: {
+    validationRules: String,
+  },
+  data() {
+    return {
+      matchedDifferentVehicle: false,
+      noMatchAlert: false,
+      noServiceZip: false,
+      vinFound: false,
+      vinFoundReadOnly: false,
+      foundWindshieldAlert: false,
+      vinNotFound: false,
+      perfectMatchNewVinAlert: false,
+      vin: '',
+      zip: '',
+      email: '',
+      customAlertData: {},
+    };
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
     },
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
+    resetDependentState() {
+      store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+    },
+    backButtonAction() {
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {
+      const zipValidation = await this.validateZip(this.zip);
+      if (!zipValidation.data.isServiceable) {
+        this.customAlertData.zip = this.zip;
+        this.$refs.funnelFooter.removeLoader();
+        this.noServiceZip = true;
+        return;
+      }
+      const vinLookup = await this.lookupVin(this.vin).catch(() => {
+        this.$refs.funnelFooter.removeLoader();
+        this.noMatchAlert = true;
+        return;
+      });
+      if (vinLookup.data.carId !== store.getters.vehicle.carId) {
+        this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+        this.$refs.funnelFooter.removeLoader();
+        this.foundWindshieldAlert = true;
+        return;
+      }
+      const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
+      this.updateStore(carInfo)
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.storeActions.GET_PARTS_OR_QUESTIONS,
+        {
+          carId: store.getters.vehicle.carId,
+          glassArray: store.getters.damage.glassToReplace,
+          zipCode: this.zip,
+          vin: vinLookup.vin
         },
-        backButtonAction() {
-            if (this.$store.getters.vehicle.vin) {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK_WITH_VIN, this.$route)
-            }
+        false
+      );
+      this.navigateForward(partsData);
+    },
+    navigateForward(partsData){
+        if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
+            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            return;
+        } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
+           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
+           return;
+        } else {
+            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
         }
-    }
+    },
+    validateZip(zip) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip }
+      );
+    },
+    lookupVin(vin) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.LOOKUP_VEHICLE_BY_VIN,
+        { vin }
+      );
+    },
+    updateStore(carInfo) {
+      // if(vehicleDamage){
+      //     store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      // }
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
+      store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
+      store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
+      store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
+      store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
+      store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
+    },
+  },
+  components: {
+    Form,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    textboxQuestion,
+    alert,
+    funnelFooter,
+    vinInformation,
+  },
 };
 </script>
-
-<style lang="scss">
-
-</style>
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index e5228ea4c..bd0caf109 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -63,7 +63,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
-        destinationFmgPageValue: fmgPageValues.REVEAL
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
@@ -71,7 +71,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,//This might be temporary
       },
     ],
   },
@@ -110,7 +110,7 @@ const routingTable = [
     maps: [
       {
         scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+        destinationFmgPageValue: fmgPageValues.REVEAL,
       },
       {
         scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index e8f8848a7..515658e16 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,7 +5,7 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
-    <p class="m-0 text-body small" v-html="alertCopy"></p>
+    <p class="m-0 text-body small">{{ alertCopy }}</p>
     <button
       type="button"
       class="btn-close p-2"