diff --git a/src/assets/img/icons/calendar-icon-black.svg b/src/assets/img/icons/calendar-icon-black.svg
new file mode 100644
index 000000000..9c66862ac
--- /dev/null
+++ b/src/assets/img/icons/calendar-icon-black.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.65567 6.44287H13.35" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4256 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.57864 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5427 2.94792H5.4625C3.70011 2.94792 2.60001 3.92933 2.60001 5.73323V11.1637C2.60001 12.9962 3.70011 14.0003 5.4625 14.0003H10.5375C12.3051 14.0003 13.4001 13.0137 13.4001 11.2091V5.73323C13.4052 3.92933 12.3103 2.94792 10.5427 2.94792Z" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/calendar-icon-grey.svg b/src/assets/img/icons/calendar-icon-grey.svg
new file mode 100644
index 000000000..5a67d0eae
--- /dev/null
+++ b/src/assets/img/icons/calendar-icon-grey.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.15567 6.44287H13.85" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9256 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.07864 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0427 2.94791H5.9625C4.20011 2.94791 3.10001 3.92931 3.10001 5.73321V11.1637C3.10001 12.9962 4.20011 14.0003 5.9625 14.0003H11.0375C12.8051 14.0003 13.9001 13.0137 13.9001 11.2091V5.73321C13.9052 3.92931 12.8103 2.94791 11.0427 2.94791Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/info-circle.svg b/src/assets/img/icons/info-circle.svg
new file mode 100644
index 000000000..7f176afd2
--- /dev/null
+++ b/src/assets/img/icons/info-circle.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12C3 16.9699 7.02908 21 12 21C16.9709 21 21 16.9699 21 12C21 7.02908 16.9709 3 12 3C7.02908 3 3 7.02908 3 12Z" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0057 15.6932V11.3936M12 8.35426V8.29102" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/payment-icon-green.svg b/src/assets/img/icons/payment-icon-green.svg
new file mode 100644
index 000000000..931226bee
--- /dev/null
+++ b/src/assets/img/icons/payment-icon-green.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 13.8143H13.5894" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20013 2.88802L3.08796 7.00022C2.09364 7.99456 2.17407 9.32289 3.17099 10.3198L5.86013 13.0096C6.85706 14.0065 8.18213 14.0896 9.18039 13.092L13.2919 8.98042C14.2901 7.98222 14.2065 6.6571 13.2095 5.66018L10.5197 2.97039C9.52286 1.97348 8.19773 1.89046 7.20013 2.88802Z" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.6315 10.782L10.9809 3.4326" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.51559 11.2542L8.72786 10.042" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/icons/payment-icon-grey.svg b/src/assets/img/icons/payment-icon-grey.svg
new file mode 100644
index 000000000..bef98d2de
--- /dev/null
+++ b/src/assets/img/icons/payment-icon-grey.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 13.8143H14.0894" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70014 2.88802L3.58797 7.00022C2.59365 7.99456 2.67408 9.32289 3.671 10.3198L6.36014 13.0096C7.35707 14.0065 8.68214 14.0896 9.68041 13.092L13.7919 8.98042C14.7901 7.98222 14.7065 6.6571 13.7095 5.66018L11.0197 2.97039C10.0229 1.97348 8.69774 1.89046 7.70014 2.88802Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.13152 10.782L11.4809 3.43262" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.01558 11.2543L9.22785 10.042" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
new file mode 100644
index 000000000..06a717289
--- /dev/null
+++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
@@ -0,0 +1,259 @@
+<template>
+    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
+        <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;
+            <a
+                id="afterpay-learnmore"
+                href="#"
+                data-afterpay-modal="en_US-safelite"
+                data-bind="click:afterpayLearnMore">
+                <img :src="infoIcon" alt="Info Icon" class="info-icon" />
+            </a>
+            <div class="after-pay">
+                <div
+                    class="after-pay-toggle"
+                    :class="[isExpanded ? 'expanded' : '']"
+                    @click="toggleIsExpanded">
+                    <a href="#!" v-html="paymentPlanToggleHeading" />
+                </div>
+                <div class="after-pay-details">
+                    <div class="payment-section">
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>Today</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>2 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>4 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+
+                        <div class="payment-card">
+                            <div class="calendar-section">
+                                <div class="icon"><img :src="calendarIcon" /></div>
+                                <div>6 weeks</div>
+                            </div>
+                            <div class="payment-amount-section">
+                                <div class="icon"><img :src="paymentIcon" /></div>
+                                <div class="amount-due">{{ this.afterpayPrice }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="legend">
+                        <div class="legend-item">
+                            <img :src="calendarKeyIcon" />
+                            <span>Payment Schedule</span>
+                        </div>
+                        <div class="legend-item">
+                            <img :src="paymentKeyIcon" />
+                            <span>Amount Due</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "afterpay-breakout",
+
+    props: {
+        cmsWidgetName: String,
+        totalAmount: Number,
+    },
+    data() {
+        return { isExpanded: false };
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.isExpanded = !this.isExpanded;
+        },
+    },
+    computed: {
+        afterPayImageUrl() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        hasImage() {
+            return !!this.imageUrl;
+        },
+        afterpayHeaderCopy() {
+            // Text for Afterpay Breakout experiment
+
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        afterpayHeaderSubHeaderCopy() {
+            // Text for Afterpay Breakout experiment
+
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        afterpayPrice() {
+            const adjusted = (this.totalAmount / 4).toFixed(2);
+            return `$${adjusted}`;
+        },
+        infoIcon() {
+            return require(`@/assets/img/icons/info-circle.svg`);
+        },
+        calendarIcon() {
+            return require(`@/assets/img/icons/calendar-icon-black.svg`);
+        },
+        paymentIcon() {
+            return require(`@/assets/img/icons/payment-icon-green.svg`);
+        },
+        calendarKeyIcon() {
+            return require(`@/assets/img/icons/calendar-icon-grey.svg`);
+        },
+        paymentKeyIcon() {
+            return require(`@/assets/img/icons/payment-icon-grey.svg`);
+        },
+        paymentPlanToggleHeading() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.alert {
+    border-radius: 5px;
+    margin-top: 1rem;
+
+    &.alert-info {
+        .alert-heading {
+            color: #000000;
+            font-weight: 600;
+            margin-left: 0.5rem;
+            margin-right: 0.5rem;
+            @include media-breakpoint-up(md) {
+                margin-left: 1rem;
+                margin-right: 1rem;
+            }
+        }
+    }
+    .afterpay-amount {
+        color: #0c7e47;
+    }
+    .alert-sub-heading {
+        color: #4b4c4e;
+        font-weight: 400;
+    }
+    .after-pay {
+        .after-pay-toggle {
+            cursor: pointer;
+
+            &:after {
+                content: "";
+                transition: all 0.5s ease;
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+                background-repeat: no-repeat;
+                background-position: right center;
+                margin-left: 0.5rem;
+                width: 1rem;
+                height: 9px;
+                display: inline-flex;
+            }
+            &.expanded:after {
+                transform: rotate(180deg);
+            }
+            &.expanded + .after-pay-details {
+                max-height: 500px;
+                transition: all 250ms ease-in;
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        .after-pay-toggle a {
+            font-weight: 600;
+            color: #0070d1;
+            text-decoration: none;
+        }
+        .after-pay-details {
+            max-height: 0;
+            transition: all 250ms ease-out;
+            overflow: hidden;
+            opacity: 0;
+            visibility: hidden;
+        }
+    }
+    .payment-section {
+        display: flex;
+        justify-content: space-around;
+        gap: 0.5rem;
+        margin-top: 1rem;
+        @include media-breakpoint-up(md) {
+            gap: 0rem;
+        }
+    }
+    .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);
+    }
+    .calendar-section {
+        background-color: #fff; /* White background for calendar area */
+        padding: 0.5rem;
+        text-align: center;
+        gap: 2px;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+    .payment-amount-section {
+        background-color: #e0f7e9; /* Light green background for payment area */
+        padding: 0.5rem;
+        text-align: center;
+        font-weight: 700;
+    }
+
+    .amount-due {
+        color: #00723e; /* Green text */
+    }
+    .legend {
+        display: flex;
+        justify-content: center;
+        margin-top: 1rem;
+        gap: 1rem;
+    }
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        white-space: nowrap;
+    }
+    .legend-item span {
+        font-weight: 400;
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 013916af0..3e31f88c5 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -117,6 +117,12 @@ function setupMocks() {
 
                 return "false";
             }),
+            hasSettingEqualTo: jest.fn((settingName) => {
+                if (settingName === experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
+                    return true;
+                }
+                return false;
+            }),
             getCmsContent: jest.fn().mockImplementation(() => {
                 return "test text";
             }),
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 33e070a93..d5c7d93c3 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -39,6 +39,10 @@
                         :isExpandedOnLoad="false"
                         :isMSRFeeApplicable="isMSRFeeApplicable" />
 
+                    <afterpayBreakout
+                        v-if="isAfterpayBreakoutDisplay"
+                        cmsWidgetName="AfterpayBreakoutAlertWidget"
+                        :totalAmount="totalAmountDue" />
                     <hr />
 
                     <div>
@@ -118,6 +122,7 @@ import alert from "@/ux-components/alert/alert";
 import textBlock from "@/digital-components/text-block/text-block";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+import afterpayBreakout from "@/layouts/payment-method/afterpay-breakout/afterpay-breakout";
 
 // Supporting Items
 import baseMixin from "@/mixins/base-mixin.js";
@@ -131,7 +136,6 @@ import {
 } from "@/helpers/cms-content-helper";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
-import experimentMixin from "@/mixins/experiment-mixin.js";
 import {
     revalidatePromosAndValidateQueryStringPromo,
     buildToastMessagesFromRevalidateOrValidatePromoResponse,
@@ -805,6 +809,18 @@ export default {
         lineItemsCloneForWatcher() {
             return Object.assign({}, this.lineItems);
         },
+        isRecalPriceRemove() {
+            return (
+                this.getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)?.toLowerCase() ===
+                "true"
+            );
+        },
+        isAfterpayBreakoutDisplay() {
+            return (
+                (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
+                this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true")
+            );
+        },
     },
     watch: {
         customCtaCopy(newValue) {
@@ -856,6 +872,7 @@ export default {
         textBlock,
         checkboxQuestion,
         contentGroupModal,
+        afterpayBreakout,
     },
 };
 </script>