diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 1831ba68..5aba7f8d 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -31,7 +31,7 @@
                     <div
                         v-if="showDeductibleCartItem"
                         id="cart-deductible"
-                        class="d-flex justify-content-between align-items-center">
+                        class="d-flex justify-content-between align-items-center py-2">
                         <span id="deductible-label">{{ deductibleLabel }}</span>
                         <span id="deductible-value">{{ getDisplayed(deductible) }}</span>
                     </div>
@@ -50,7 +50,7 @@
                     class="px-5">
                     <div
                         id="service-package-name"
-                        class="py-1 d-flex justify-content-between align-items-center">
+                        class="py-2 d-flex justify-content-between align-items-center">
                         <textBlock
                             :cmsWidgetName="servicePackageLabelWidget"
                             class="force-no-top-margin" />
@@ -62,7 +62,7 @@
                         <div
                             v-for="(item, i) in servicePackageCartItems"
                             :key="i">
-                            <div class="py-1 d-flex justify-content-between align-items-center">
+                            <div class="py-2 d-flex justify-content-between align-items-center">
                                 <span>{{ item?.name ?? '' }}</span>
                                 <textLink
                                     v-if="!readOnly"
@@ -84,7 +84,7 @@
                     <div
                         v-for="(item, i) in nonServicePackageCartItems"
                         :key="i"
-                        class="px-5 py-1 non-packaged-cart-item">
+                        class="px-5 py-2 non-packaged-cart-item">
                         <div class="d-flex justify-content-between align-items-center">
                             <span
                                 v-if="item.cartItemType === cartItemType.RECYCLE_FEE"
@@ -119,20 +119,20 @@
                         class="subtotal-and-tax">
                         <div
                             id="cart-subtotal"
-                            class="col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="subtotal-label">{{ subtotalLabel }}</span>
                             <span id="subtotal-value">{{ getDisplayed(subTotal) }}</span>
                         </div>
                         <div
                             id="cart-sales-tax"
-                            class="pt-1 col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="sales-tax-label">{{ salesTaxLabel }}</span>
                             <span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
                         </div>
                         <div
                             v-if="showAsPaid"
                             id="cart-amount-paid"
-                            class="pt-1 col d-flex justify-content-between">
+                            class="py-2 col d-flex justify-content-between">
                             <span id="amount-paid-label">{{ amountPaidLabel }}</span>
                             <span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
                         </div>
@@ -556,7 +556,7 @@ export default {
     .bottom-amount-due {
         color: $white;
         background-color: $green;
-        padding: 0.25rem 1.5rem;
+        padding: 0.5rem 1.5rem;
     }
 }
 
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 77267f73..726bc1f9 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -37,7 +37,9 @@
                         </iframe>
                     </div>
 
-                    <div v-if="isCreditCard || isAfterPay" class="px-2">
+                    <div
+                        v-if="isCreditCard || isAfterPay"
+                        class="px-2">
                         <hr :class="{'my-0': isCreditCard}">
                         <cartDropdown
                             :readOnly="true"
@@ -70,10 +72,22 @@
         :target="isPaypal ? '_top' : 'card-frame'"
         method="POST"
         :action="checkoutUrl">
-        <input type="hidden" name="paymentType" :value="paymentType" />
-        <input type="hidden" name="sgSessionId" :value="authToken" />
-        <input type="hidden" name="sgAuthToken" :value="authToken" />
-        <input type="hidden" name="sgSignaturePublic" :value="authSignature" />
+        <input
+            type="hidden"
+            name="paymentType"
+            :value="paymentType" />
+        <input
+            type="hidden"
+            name="sgSessionId"
+            :value="authToken" />
+        <input
+            type="hidden"
+            name="sgAuthToken"
+            :value="authToken" />
+        <input
+            type="hidden"
+            name="sgSignaturePublic"
+            :value="authSignature" />
         <input
             type="hidden"
             name="sgSignatureStartDate"
@@ -86,13 +100,34 @@
             type="hidden"
             name="sge_commerce_indicator_isinternet"
             value="true" />
-        <input type="hidden" name="sghopsource" value="Safelite.com" />
-        <input type="hidden" name="sgHtmlStyle" value="ResourceSafeliteHtml" />
-        <input type="hidden" name="sgErrorMessagesEmbedded" value="true" />
-        <input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
-        <input type="hidden" name="maskCharacter" value="*" />
-        <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
-        <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
+        <input
+            type="hidden"
+            name="sghopsource"
+            value="Safelite.com" />
+        <input
+            type="hidden"
+            name="sgHtmlStyle"
+            value="ResourceSafeliteHtml" />
+        <input
+            type="hidden"
+            name="sgErrorMessagesEmbedded"
+            value="true" />
+        <input
+            type="hidden"
+            name="sgNoKeystrokeProcessing"
+            value="false" />
+        <input
+            type="hidden"
+            name="maskCharacter"
+            value="*" />
+        <input
+            type="hidden"
+            name="styleSheetCode"
+            :value="dynamicCSSUrl" />
+        <input
+            type="hidden"
+            name="styleSheetCode2"
+            :value="dynamicHopCSSUrl" />
         <input
             type="hidden"
             name="sgReceiptResponseURL"
@@ -105,33 +140,102 @@
             type="hidden"
             name="sgErrorResponseURL"
             :value="payInAdvanceResponseUrl" />
-        <input type="hidden" name="sgheaderline1" :value="getHeaderLine1" />
-        <input type="hidden" name="sgHeader1subtitle" value="" />
-        <input type="hidden" name="sgheaderline2" :value="getHeaderLine2" />
-        <input type="hidden" name="sgheaderline3" value="" />
-        <input type="hidden" name="sgheaderline4" value="" />
+        <input
+            type="hidden"
+            name="sgheaderline1"
+            :value="getHeaderLine1" />
+        <input
+            type="hidden"
+            name="sgHeader1subtitle"
+            value="" />
+        <input
+            type="hidden"
+            name="sgheaderline2"
+            :value="getHeaderLine2" />
+        <input
+            type="hidden"
+            name="sgheaderline3"
+            value="" />
+        <input
+            type="hidden"
+            name="sgheaderline4"
+            value="" />
         <input
             type="hidden"
             name="sgheaderline5"
             value="*Required information" />
-        <input type="hidden" name="billTo_firstName" :value="firstName" />
-        <input type="hidden" name="billTo_firstNameShow" value="true" />
-        <input type="hidden" name="sghopmiddleInitialShow" value="false" />
-        <input type="hidden" name="billTo_lastName" :value="lastName" />
-        <input type="hidden" name="billTo_lastNameShow" value="true" />
-        <input type="hidden" name="billTo_street1" value="" />
-        <input type="hidden" name="billTo_street2" value="" />
-        <input type="hidden" name="billTo_city" value="" />
-        <input type="hidden" name="billTo_state" value="" />
-        <input type="hidden" name="billTo_postalCode" value="" />
-        <input type="hidden" name="billTo_postalCodeShow" value="true" />
-        <input type="hidden" name="billTo_postalCodeEnable" value="true" />
-        <input type="hidden" name="sgLabelPostalCode" value="Billing ZIP" />
-        <input type="hidden" name="sgtotalamount" :value="displayAmount" />
-        <input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
-        <input type="hidden" name="lineItems" :value="payInAdvanceLineItems" />
-        <input type="hidden" name="sgdiscountstrikethruamount" value="" />
-        <input type="hidden" name="callerDisplayText" value="" />
+        <input
+            type="hidden"
+            name="billTo_firstName"
+            :value="firstName" />
+        <input
+            type="hidden"
+            name="billTo_firstNameShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="sghopmiddleInitialShow"
+            value="false" />
+        <input
+            type="hidden"
+            name="billTo_lastName"
+            :value="lastName" />
+        <input
+            type="hidden"
+            name="billTo_lastNameShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="billTo_street1"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_street2"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_city"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_state"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_postalCode"
+            value="" />
+        <input
+            type="hidden"
+            name="billTo_postalCodeShow"
+            value="true" />
+        <input
+            type="hidden"
+            name="billTo_postalCodeEnable"
+            value="true" />
+        <input
+            type="hidden"
+            name="sgLabelPostalCode"
+            value="Billing ZIP" />
+        <input
+            type="hidden"
+            name="sgtotalamount"
+            :value="displayAmount" />
+        <input
+            type="hidden"
+            name="totalAmountDecimal"
+            :value="totalAmount" />
+        <input
+            type="hidden"
+            name="lineItems"
+            :value="payInAdvanceLineItems" />
+        <input
+            type="hidden"
+            name="sgdiscountstrikethruamount"
+            value="" />
+        <input
+            type="hidden"
+            name="callerDisplayText"
+            value="" />
         <input
             type="hidden"
             name="sgtermsofusedisplaytext"
@@ -164,14 +268,38 @@
             type="hidden"
             name="sgErrorMessageTimeOut"
             value="For your security, this transaction has been timed out." />
-        <input type="hidden" name="sgLabelCardNumber" value="" />
-        <input type="hidden" name="sgLabelAddressLine1" :value="address1" />
-        <input type="hidden" name="sgLabelAddressLine2" :value="address2" />
-        <input type="hidden" name="sgLabelCity" :value="city" />
-        <input type="hidden" name="sgLabelState" :value="state" />
-        <input type="hidden" name="sgCtu" :value="ctu" />
-        <input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
-        <input type="hidden" name="sgEmailAddress" :value="emailAddress" />
+        <input
+            type="hidden"
+            name="sgLabelCardNumber"
+            value="" />
+        <input
+            type="hidden"
+            name="sgLabelAddressLine1"
+            :value="address1" />
+        <input
+            type="hidden"
+            name="sgLabelAddressLine2"
+            :value="address2" />
+        <input
+            type="hidden"
+            name="sgLabelCity"
+            :value="city" />
+        <input
+            type="hidden"
+            name="sgLabelState"
+            :value="state" />
+        <input
+            type="hidden"
+            name="sgCtu"
+            :value="ctu" />
+        <input
+            type="hidden"
+            name="sgWorkOrder"
+            :value="workOrderNumber" />
+        <input
+            type="hidden"
+            name="sgEmailAddress"
+            :value="emailAddress" />
         <input
             type="hidden"
             name="paypalInvoiceNumber"
@@ -192,12 +320,30 @@
             type="hidden"
             name="sgCCTimeoutURL"
             :value="payInAdvanceCancelUrl" />
-        <input type="hidden" name="sgTransactionType" value="authorization" />
-        <input type="hidden" name="amount" :value="totalAmount" />
-        <input type="hidden" name="ctu" :value="ctu" />
-        <input type="hidden" name="orderNumber" :value="workOrderNumber" />
-        <input type="hidden" name="billTo_email" :value="emailAddress" />
-        <input type="hidden" name="useDecisionManager" value="True" />
+        <input
+            type="hidden"
+            name="sgTransactionType"
+            value="authorization" />
+        <input
+            type="hidden"
+            name="amount"
+            :value="totalAmount" />
+        <input
+            type="hidden"
+            name="ctu"
+            :value="ctu" />
+        <input
+            type="hidden"
+            name="orderNumber"
+            :value="workOrderNumber" />
+        <input
+            type="hidden"
+            name="billTo_email"
+            :value="emailAddress" />
+        <input
+            type="hidden"
+            name="useDecisionManager"
+            value="True" />
         <input
             type="hidden"
             name="correlationId"
@@ -206,17 +352,38 @@
             type="hidden"
             name="sgErrorMessageCard_CVN"
             value="Please enter a valid CVV" />
-        <input type="hidden" name="ship_to_address_line1" :value="address1" />
-        <input type="hidden" name="ship_to_address_line2" :value="address2" />
-        <input type="hidden" name="ship_to_address_city" :value="city" />
-        <input type="hidden" name="ship_to_address_state" :value="state" />
-        <input type="hidden" name="ship_to_address_country" value="US" />
+        <input
+            type="hidden"
+            name="ship_to_address_line1"
+            :value="address1" />
+        <input
+            type="hidden"
+            name="ship_to_address_line2"
+            :value="address2" />
+        <input
+            type="hidden"
+            name="ship_to_address_city"
+            :value="city" />
+        <input
+            type="hidden"
+            name="ship_to_address_state"
+            :value="state" />
+        <input
+            type="hidden"
+            name="ship_to_address_country"
+            value="US" />
         <input
             type="hidden"
             name="ship_to_address_postal_code"
             :value="zipCode" />
-        <input type="hidden" name="ship_to_phone" :value="phoneNumber" />
-        <input type="hidden" name="calling_application" value="ISSNextGen" />
+        <input
+            type="hidden"
+            name="ship_to_phone"
+            :value="phoneNumber" />
+        <input
+            type="hidden"
+            name="calling_application"
+            value="ISSNextGen" />
     </form>
 </template>
 <script>
@@ -237,7 +404,7 @@ import externalUrls from '@/router/router-constants/externalUrl-values.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import {
     hopPaymentMethods,
-    paymentMethods,
+    paymentMethods
 } from '@/constants/payment-method-constants.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import queryStrings from '@/constants/query-strings';
@@ -252,7 +419,7 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert,
+        alert
     },
     directives: {
         resize: {
@@ -263,8 +430,8 @@ export default {
             },
             unmounted(el) {
                 el.iFrameResizer.removeListeners();
-            },
-        },
+            }
+        }
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -278,12 +445,12 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
             },
             {
                 resultKey: 'paymentSignature',
-                promise: paymentSignaturePromise,
-            },
+                promise: paymentSignaturePromise
+            }
         ];
 
         // use resultMap to populate layout content.
@@ -333,7 +500,7 @@ export default {
             totalAmount: this.getAmountDue(),
             displayAmount: this.getDisplayAmountDue(),
             payInAdvanceLineItems: '',
-            shouldBlockInteraction: false,
+            shouldBlockInteraction: false
         };
     },
     computed: {
@@ -385,7 +552,7 @@ export default {
         },
         displayPayInAdvanceAfterPayAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
-        },
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -396,25 +563,22 @@ export default {
             // Service Location
             const { serviceLocation } = useMainStore().order;
             const mobileReqs = !!(
-                serviceLocation.address &&
-                serviceLocation.city &&
-                serviceLocation.state &&
-                serviceLocation.zipCode
+                serviceLocation.address
+                && serviceLocation.city
+                && serviceLocation.state
+                && serviceLocation.zipCode
             );
 
             const providerLocation = serviceLocation.provider.address;
             const dropOffInshopReqs = !!(
-                providerLocation.streetAddress &&
-                providerLocation.city &&
-                providerLocation.state &&
-                providerLocation.zipCode
+                providerLocation.streetAddress
+                && providerLocation.city
+                && providerLocation.state
+                && providerLocation.zipCode
             );
 
-            const isMobile =
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE ||
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
@@ -426,34 +590,34 @@ export default {
             // Schedule
             const { schedule } = useMainStore().order;
             const scheduleReqs = !!(
-                schedule.date &&
-                schedule.startTime &&
-                schedule.endTime &&
-                schedule.jobMaxMinutes &&
-                schedule.jobMinMinutes
+                schedule.date
+                && schedule.startTime
+                && schedule.endTime
+                && schedule.jobMaxMinutes
+                && schedule.jobMinMinutes
             );
 
             // Contact Info
             const { contactInfo } = useMainStore().order;
             const contactInfoReqs = !!(
-                contactInfo.firstName &&
-                contactInfo.lastName &&
-                contactInfo.servicePhone &&
-                contactInfo.emailAddress
+                contactInfo.firstName
+                && contactInfo.lastName
+                && contactInfo.servicePhone
+                && contactInfo.emailAddress
             );
 
             const paymentMethodReqs =
-                useMainStore().order.payment.isPayInAdvance !== null &&
-                (useMainStore().order.payment.isPayInAdvance ||
-                    !!useMainStore().order.payment.payInAdvanceType);
+                useMainStore().order.payment.isPayInAdvance !== null
+                && (useMainStore().order.payment.isPayInAdvance
+                    || !!useMainStore().order.payment.payInAdvanceType);
 
             return (
-                packageReqs &&
-                serviceLocationReqs &&
-                isInsuranceSet &&
-                scheduleReqs &&
-                contactInfoReqs &&
-                paymentMethodReqs
+                packageReqs
+                && serviceLocationReqs
+                && isInsuranceSet
+                && scheduleReqs
+                && contactInfoReqs
+                && paymentMethodReqs
             );
         },
         getWorkOrderNumber() {
@@ -475,8 +639,8 @@ export default {
         },
         getAddress1() {
             return (
-                useMainStore().order.serviceLocation.address ??
-                useMainStore().order.serviceLocation.provider.address
+                useMainStore().order.serviceLocation.address
+                ?? useMainStore().order.serviceLocation.provider.address
                     .streetAddress
             );
         },
@@ -485,20 +649,20 @@ export default {
         },
         getCity() {
             return (
-                useMainStore().order.serviceLocation.city ??
-                useMainStore().order.serviceLocation.provider.address.city
+                useMainStore().order.serviceLocation.city
+                ?? useMainStore().order.serviceLocation.provider.address.city
             );
         },
         getState() {
             return (
-                useMainStore().order.serviceLocation.state ??
-                useMainStore().order.serviceLocation.provider.address.state
+                useMainStore().order.serviceLocation.state
+                ?? useMainStore().order.serviceLocation.provider.address.state
             );
         },
         getZipCode() {
             return (
-                useMainStore().order.serviceLocation.zipCode ??
-                useMainStore().order.serviceLocation.provider.address.zipCode
+                useMainStore().order.serviceLocation.zipCode
+                ?? useMainStore().order.serviceLocation.provider.address.zipCode
             );
         },
         getPaymentType() {
@@ -518,30 +682,20 @@ export default {
             const lineItems =
                 glassParts === null
                     ? [
-                          this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
-                          this.getPayInAdvanceFormattedLineItem(
-                              'Repair supplies',
-                              0,
-                              1
-                          ),
-                      ]
+                        this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
+                        this.getPayInAdvanceFormattedLineItem('Repair supplies', 0, 1)
+                    ]
                     : [
-                          this.getPayInAdvanceFormattedLineItem(
-                              'Parts and labor',
-                              0,
-                              1
-                          ),
-                      ];
+                        this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
+                    ];
 
             cartItems.forEach((item) => {
                 if (item.name !== null && item.category !== 'promos') {
-                    lineItems.push(
-                        this.getPayInAdvanceFormattedLineItem(
-                            item.name,
-                            (item.salesTax + item.subTotal).toFixed(2),
-                            1
-                        )
-                    );
+                    lineItems.push(this.getPayInAdvanceFormattedLineItem(
+                        item.name,
+                        (item.salesTax + item.subTotal).toFixed(2),
+                        1
+                    ));
                 }
             });
 
@@ -553,18 +707,10 @@ export default {
         getMockPiaLineItems() {
             let lineItems = [];
             lineItems = [
-                this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1),
+                this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
             ];
-            lineItems.push(
-                this.getPayInAdvanceFormattedLineItem(
-                    'New wiper blades',
-                    75.22,
-                    1
-                )
-            );
-            lineItems.push(
-                this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1)
-            );
+            lineItems.push(this.getPayInAdvanceFormattedLineItem('New wiper blades', 75.22, 1));
+            lineItems.push(this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1));
 
             this.payInAdvanceLineItems = lineItems.join('||');
         },
@@ -572,9 +718,7 @@ export default {
             return baseMixin.methods.getAmountDue(useMainStore().lineItems);
         },
         getDisplayAmountDue() {
-            return baseMixin.methods.getDisplayAmountDue(
-                useMainStore().lineItems
-            );
+            return baseMixin.methods.getDisplayAmountDue(useMainStore().lineItems);
         },
         fetchSignatureInfo(signatureInfo) {
             this.authToken = signatureInfo.token;
@@ -592,8 +736,8 @@ export default {
                     iframe.onload = () => {
                         if (iframe.contentWindow) {
                             if (
-                                this.paymentType ===
-                                hopPaymentMethods.CREDIT_CARD
+                                this.paymentType
+                                === hopPaymentMethods.CREDIT_CARD
                             ) {
                                 iframe.contentWindow.postMessage(
                                     'CreditCardChosen',
@@ -624,8 +768,7 @@ export default {
         },
         setIFrameListener() {
             window.addEventListener('message', (event) =>
-                this.handleIFrameContentWindowMessage(event)
-            );
+                this.handleIFrameContentWindowMessage(event));
         },
         setUIBlock(val) {
             this.shouldBlockInteraction = val;
@@ -637,8 +780,8 @@ export default {
         },
         displayPayInAdvanceAlert(payMethod) {
             return (
-                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] ===
-                payMethod
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
+                === payMethod
             );
         },
         paymentFailedPayLater() {
@@ -656,11 +799,17 @@ export default {
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route
             );
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
+.container-fluid {
+    &.fade-on-route-transition {
+        height: unset;
+    }
+}
+
 .payment p {
     margin-bottom: 0.75rem;
 }