diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index ba441329c..da2f3ef22 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -18,7 +18,7 @@ body .validation-info {
   display: none;
 }
 body .italicSmall {
-  font-style: normal;
+  font-style: italic;
   font-size: 14px;
 }
 body span {
@@ -274,7 +274,7 @@ body .cc-error-container #alert-message {
 #fmg-checkout-shared #other-payments-container label span.paymentOptionText {
   margin: auto 0;
   padding-left: 0;
-  font-weight: 400;
+  font-weight: 600;
 }
 #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
   width: 100%;
@@ -297,7 +297,7 @@ body .cc-error-container #alert-message {
   text-align: right;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
-  width: 20%;
+  width: 12%;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
   padding: 0 2%;
@@ -309,11 +309,13 @@ body .cc-error-container #alert-message {
   margin-top: 24px;
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 @media only screen and (max-device-width: 767px) {
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index cfd2c9727..d3afaf985 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -20,7 +20,7 @@ body {
     }
 
     .italicSmall {
-        font-style: normal;
+        font-style: italic;
         font-size: 14px;
     }
 
@@ -332,7 +332,7 @@ body {
 				&.paymentOptionText {
 					margin: auto 0;
 					padding-left: 0;
-                    font-weight: 400;
+                    font-weight: 600;
 				}
 			}
 		}
@@ -372,7 +372,7 @@ body {
 					text-align: right;
 
 					> img {
-						width: 20%;
+						width: 12%;
 					}
 				}
 			}
@@ -390,12 +390,14 @@ body {
 			margin-top: 24px;
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
 		}
 
         .disclaimerContainerv2 {
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
         }
 	}
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index 21bcbdc40..67ba45ae6 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -1,18 +1,15 @@
 <template>
-    <div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
+    <div
+        class="save-progress-modal-question"
+        :class="isProgressSaved ? 'progress-saved' : ''"
+        v-if="!isProgressSaved">
         <buttonMain
             type="button"
-            v-if="!isProgressSaved"
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
             class="open-save-progress-button"
             @click-event="openModal" />
-        <alert
-            class="my-4"
-            v-else
-            cmsWidgetName="SaveProgressModalAlertWidget"
-            alertClass="alert-success" />
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
@@ -30,6 +27,11 @@
             </template>
         </modal>
     </div>
+    <alert
+        class="my-4 save-your-progress-alert"
+        v-else
+        cmsWidgetName="SaveProgressModalAlertWidget"
+        alertClass="alert-success" />
 </template>
 
 <script>
@@ -239,7 +241,9 @@ export default {
             }
         }
     }
+}
 
+.save-your-progress-alert {
     .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;
@@ -250,7 +254,6 @@ export default {
         font-weight: 600;
         font-size: 1rem;
         color: $black;
-        text-align: left;
         padding-left: 1.5rem;
         &::before {
             position: absolute;
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index b11c5a9af..20a7b9624 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container">
             <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-12">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"
@@ -37,45 +37,51 @@
                             seamless
                             scrolling="no"
                             allow="payment *; microphone *; geolocation *;"></iframe>
+
+                        <div id="cart-container">
+                            <cart
+                                ref="cart"
+                                :damage="damageInfo"
+                                :availableVaps="availableVaps"
+                                :allowItemRemoval="false"
+                                v-model="lineItems"
+                                servicePackageOptionsCmsName="ServicePackageTitle"
+                                recyclingModalCmsWidgetName="RecycleModal"
+                                :isInsurance="isInsurance"
+                                :insuranceDeductible="currentDeductible"
+                                :insuranceCompanyName="insuranceCompanyName"
+                                :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                                :isItac="isItac"
+                                :isNoComp="isNoComp"
+                                :isExpandedOnLoad="true" />
+
+                            <button
+                                v-if="showSwitchPaymentMethod"
+                                id="submit-payment"
+                                class="btn btn-primary rounded-pill py-3 px-6 delay w-100"
+                                type="button"
+                                @click="submitPayment">
+                                Submit payment
+                            </button>
+
+                            <div class="payment-method-question">
+                                <buttonQuestion
+                                    v-if="showSwitchPaymentMethod"
+                                    groupName="payment-method"
+                                    buttonTypeString="payment-method-list-button"
+                                    :buttonTypeObject="paymentMethodListButton"
+                                    isWide
+                                    :questionText="paymentMethodQuestionText"
+                                    :answers="paymentMethodAnswerData"
+                                    isRequired
+                                    :validationRules="validationRules"
+                                    :showApplePay="false"
+                                    :isInsurance="isInsurance"
+                                    v-model="switchedPaymentMethod" />
+                            </div>
+                        </div>
                     </div>
 
-                    <hr />
-
-                    <cart
-                        ref="cart"
-                        :damage="damageInfo"
-                        :availableVaps="availableVaps"
-                        :allowItemRemoval="false"
-                        v-model="lineItems"
-                        servicePackageOptionsCmsName="ServicePackageTitle"
-                        recyclingModalCmsWidgetName="RecycleModal"
-                        :isInsurance="isInsurance"
-                        :insuranceDeductible="currentDeductible"
-                        :insuranceCompanyName="insuranceCompanyName"
-                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
-                        :isItac="isItac"
-                        :isNoComp="isNoComp"
-                        :isExpandedOnLoad="true" />
-
-                    <div class="payment-method-question">
-                        <buttonQuestion
-                            v-if="showSwitchPaymentMethod"
-                            groupName="payment-method"
-                            buttonTypeString="payment-method-list-button"
-                            :buttonTypeObject="paymentMethodListButton"
-                            isWide
-                            :questionText="paymentMethodQuestionText"
-                            :answers="paymentMethodAnswerData"
-                            isRequired
-                            :validationRules="validationRules"
-                            :showApplePay="false"
-                            :isInsurance="isInsurance"
-                            v-model="switchedPaymentMethod"
-                            textPosition="text-start" />
-                    </div>
-
-                    <hr class="mb-5" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -889,6 +895,12 @@ export default {
             }
             return false;
         },
+        submitPayment() {
+            const iframe = this.$refs.paymentFrame;
+            if (iframe) {
+                iframe.contentWindow.postMessage("submitPayment", "*");
+            }
+        },
     },
     components: {
         funnelHeader,
@@ -904,18 +916,48 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 650px;
     width: 100%;
+    min-height: 650px;
     border: 0 none;
+
+    @include media-breakpoint-down(lg) {
+        min-height: 1688px;
+    }
 }
 #pageLoadingModal {
     background-color: red;
 }
 
+#card-container {
+    display: flex;
+    & > iframe {
+        flex-basis: 55%;
+        margin-right: 9%;
+    }
+    & > #cart-container {
+        flex-basis: 36%;
+    }
+
+    @include media-breakpoint-down(lg) {
+        flex-direction: column;
+        & > iframe {
+            flex-basis: 100%;
+            margin-right: 0;
+        }
+        & > #cart-container {
+            flex-basis: 100%;
+
+            & > button#submit-payment {
+                display: none;
+            }
+        }
+    }
+}
 .payment-method-question {
-    padding: 0 1.5rem;
-    .question-text span {
-        text-align: left;
+    padding: 0;
+
+    & .list-button-content {
+        justify-content: center;
     }
 }