diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
index 06a717289..7fabe40aa 100644
--- a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
+++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
@@ -3,18 +3,16 @@
         <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
         <div class="my-4 alert-heading text-center">
             <span v-html="afterpayHeaderCopy" />
-            &nbsp;
             <span class="afterpay-amount">{{ this.afterpayPrice }}</span>
             <br />
             <span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
-            &nbsp;
-            <img :src="afterPayImageUrl" />
-            &nbsp;
+            <img :src="afterPayImageUrl" class="afterpay-image" />
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US-safelite"
-                data-bind="click:afterpayLearnMore">
+                data-bind="click:afterpayLearnMore"
+                class="afterpay-learn-more">
                 <img :src="infoIcon" alt="Info Icon" class="info-icon" />
             </a>
             <div class="after-pay">
@@ -151,8 +149,8 @@ export default {
 
     &.alert-info {
         .alert-heading {
-            color: #000000;
-            font-weight: 600;
+            color: $black;
+            font-weight: $font-weight-600;
             margin-left: 0.5rem;
             margin-right: 0.5rem;
             @include media-breakpoint-up(md) {
@@ -162,11 +160,12 @@ export default {
         }
     }
     .afterpay-amount {
-        color: #0c7e47;
+        color: $green;
+        margin-left: 0.125rem;
     }
     .alert-sub-heading {
-        color: #4b4c4e;
-        font-weight: 400;
+        color: $gray-1100;
+        font-weight: $font-weight-normal;
     }
     .after-pay {
         .after-pay-toggle {
@@ -180,7 +179,7 @@ export default {
                 background-position: right center;
                 margin-left: 0.5rem;
                 width: 1rem;
-                height: 9px;
+                height: 0.5625rem;
                 display: inline-flex;
             }
             &.expanded:after {
@@ -194,8 +193,8 @@ export default {
             }
         }
         .after-pay-toggle a {
-            font-weight: 600;
-            color: #0070d1;
+            font-weight: $font-weight-600;
+            color: $blue;
             text-decoration: none;
         }
         .after-pay-details {
@@ -218,27 +217,45 @@ export default {
     .payment-card {
         display: flex;
         flex-direction: column;
-        border-radius: 6px;
-        border: 0.25px #b3b4b5;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 0.375rem;
+        border: 0.25px $gray-1000;
+        box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
     }
     .calendar-section {
-        background-color: #fff; /* White background for calendar area */
+        background-color: $white; /* White background for calendar area */
         padding: 0.5rem;
         text-align: center;
-        gap: 2px;
-        font-weight: 700;
+        gap: 0.125rem;
+        font-weight: $font-weight-700;
         white-space: nowrap;
+        border-top-left-radius: 0.375rem;
+        border-top-right-radius: 0.375rem;
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
     }
     .payment-amount-section {
-        background-color: #e0f7e9; /* Light green background for payment area */
+        background-color: $green-600; /* Light green background for payment area */
         padding: 0.5rem;
         text-align: center;
-        font-weight: 700;
+        font-weight: $font-weight-700;
+        border-bottom-left-radius: 0.375rem;
+        border-bottom-right-radius: 0.375rem;
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
+    }
+    .afterpay-learn-more {
+        margin-left: 0.125rem;
+    }
+    .afterpay-image {
+        margin-left: 0.125rem;
     }
 
     .amount-due {
-        color: #00723e; /* Green text */
+        color: $green-1000; /* Green text */
     }
     .legend {
         display: flex;
@@ -249,11 +266,11 @@ export default {
     .legend-item {
         display: flex;
         align-items: center;
-        gap: 2px;
+        gap: 0.125rem;
         white-space: nowrap;
     }
     .legend-item span {
-        font-weight: 400;
+        font-weight: $font-weight-normal;
     }
 }
 </style>
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 5c4045fd7..6f377a068 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -33,9 +33,11 @@ $green-300: #94d7b6;
 $green-400: #5abc8c; // Used in theme
 $green-500: #2ca168;
 $green: #0c7e47; // Default Green
+$green-600: #e7f2ed;
 $green-700: #006a36;
 $green-800: #004f28;
 $green-900: #00331a;
+$green-1000: #00723e;
 
 // Yellows
 $yellow-100: #fff5eb;
@@ -59,6 +61,8 @@ $gray-600: #4d5151; // Used in theme
 $gray-700: #303333; // Used in theme
 $gray-800: #222424; // Used in theme
 $gray-900: #181a1a; // Used in theme
+$gray-1000: #b3b4b5;
+$gray-1100: #4b4c4e;
 
 //orange
 $orange-600: #e86421;
@@ -134,6 +138,8 @@ $font-weight-lighter: lighter;
 $font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-bold: 500;
+$font-weight-600: 600;
+$font-weight-700: 700;
 $font-weight-bolder: bolder;
 
 //Headings