diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index edb60a81..9949c4e1 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -281,8 +281,13 @@ export default {
                 border-color: $blue;
                 font-weight: 400;
                 &:hover {
-                    background-color: #167cac;
+                    background-color: $heritage-blue-secondary;
                     color: $white;
+                    border-color: $heritage-blue-secondary;
+                }
+                &:active,
+                &:focus {
+                    box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $heritage-blue-secondary; 
                 }
             }
         }
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
index 03612653..5a95478e 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -7,6 +7,7 @@
         <img
             :src="ModalImage"
             class="mw-100 d-flex"
+            :class="imgClass"
             alt="" />
         <h5
             class="header-text"
@@ -59,7 +60,13 @@ export default {
         },
         ModalCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, 'FooterText');
-        }
+        },
+        imgClass() {
+            if (this.cmsWidgetName === 'RainDefenseModal') {
+                return 'rain-repel';
+            }
+            return '';
+        },
     },
     methods: {
         openModal() {
@@ -104,4 +111,7 @@ export default {
         }
     }
 }
+.rain-repel {
+    height: 3.5rem;
+}
 </style>
diff --git a/src/iss-components/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue
index 311c4f82..2564c9cf 100644
--- a/src/iss-components/recal-modal/recal-modal.vue
+++ b/src/iss-components/recal-modal/recal-modal.vue
@@ -74,8 +74,14 @@ export default {
             button {
                 &:hover {
                     background-color: $white;
-                    color: #167cac;
+                    color: $heritage-blue-secondary;
                 }
+                &:focus, &:active {
+                    box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $heritage-blue-secondary; 
+                }
+                font-weight: 600;
+                color: $heritage-blue-secondary;
+                border-color: $heritage-blue-secondary;
             }
         }
     }
diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
index 40af428e..52bab2ae 100644
--- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
+++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`coverageStatement.vue returns the initial data 1`] = `
 Object {
   "CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
+  "OEM_ENDORSEMENT_REF_NAME": "OEMModal",
   "RECAL_MODAL_REF_NAME": "RecalModal",
   "baseServiceLineItems": Array [],
   "isPageLoading": true,
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 4e31fa37..4cc38651 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -108,6 +108,9 @@
             :ref="CANCEL_CLAIM_REF_NAME"
             @cancelClaimConfirmation="cancelClaim"
             @returnToClaim="navigateForward" />
+        <oemEndorsementModal
+            :ref="OEM_ENDORSEMENT_REF_NAME"
+            cmsWidgetName="OEMEndorsementModal" />
     </Form>
 </template>
 
@@ -143,9 +146,11 @@ import showIssLoadingModal from '@/helpers/loading-modal-helper';
 import { getPriceOfLineItems } from '@/helpers/price-calculator';
 import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
+import oemEndorsementModal from '@/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.vue';
 
 const RECAL_MODAL_REF_NAME = 'RecalModal';
 const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal';
+const OEM_ENDORSEMENT_REF_NAME = 'OEMModal';
 
 export default {
     name: 'coverage-statement',
@@ -158,7 +163,8 @@ export default {
         siteFooter,
         cancelClaimModal,
         afterpayModalBanner,
-        recalModal
+        recalModal,
+        oemEndorsementModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -221,7 +227,8 @@ export default {
                 nextStep: 'NextStepsWidget'
             },
             RECAL_MODAL_REF_NAME,
-            CANCEL_CLAIM_REF_NAME
+            CANCEL_CLAIM_REF_NAME,
+            OEM_ENDORSEMENT_REF_NAME
         };
     },
     computed: {
@@ -356,6 +363,7 @@ export default {
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
                 setupModalLink(this, RECAL_MODAL_REF_NAME);
+                setupModalLink(this, OEM_ENDORSEMENT_REF_NAME);
             }
         }
     },
@@ -424,6 +432,7 @@ export default {
         },
         getCustomValueFromString(str) {
             const { isRepair } = useMainStore().damage;
+
             switch (str) {
                 case 'coverageUnverified':
                     return this.isUnverifiedVisible;
@@ -449,6 +458,8 @@ export default {
                     return !isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
                 case 'verifiedReplaceDeductibleOverZero':
                     return !isRepair && this.isDeductibleVisible && this.deductibleValue > 0;
+                case 'hasOEMEndorsement':
+                    return this.mainStore.hasOemEndorsement;
                 default:
                     return null;
             }
diff --git a/src/layouts/coverage-statement/oem-endorsement-modal/__snapshots__/oem-endorsement-modal.spec.js.snap b/src/layouts/coverage-statement/oem-endorsement-modal/__snapshots__/oem-endorsement-modal.spec.js.snap
new file mode 100644
index 00000000..dd02d636
--- /dev/null
+++ b/src/layouts/coverage-statement/oem-endorsement-modal/__snapshots__/oem-endorsement-modal.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns the initial data 1`] = `Object {}`;
diff --git a/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.spec.js b/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.spec.js
new file mode 100644
index 00000000..8a2c5d9e
--- /dev/null
+++ b/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.spec.js
@@ -0,0 +1,126 @@
+import { shallowMount } from '@vue/test-utils';
+import oemEndorsementModal from '@/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.vue';
+
+
+const mockDataStrings = {
+    cmsBodyText: `Some Body Text from CMS`,
+    cmsHeaderText: 'Some Header Text from CMS',
+    cmsFooterText: 'Some Footer Text from CMS'
+};
+
+const mockCmsContent = {
+    BodyText: mockDataStrings.cmsBodyText,
+    HeaderText: mockDataStrings.cmsHeaderText,
+    FooterText: mockDataStrings.cmsFooterText
+};
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((_, cmsFieldName) => mockCmsContent[cmsFieldName])
+    },
+};
+
+function setupMocks() {
+    const wrapper = shallowMount(oemEndorsementModal, {
+        mixins: [mockMixin],
+        props: {
+            cmsWidgetName: 'OEMEndorsementModal'
+        },
+        attachTo: document.body
+    });
+
+    return { wrapper };
+}
+
+test('returns the initial data', () => {
+    // Arrange
+    const { wrapper } = setupMocks();
+
+    // Assert
+    expect(wrapper.vm.$data).toMatchSnapshot();
+});
+
+describe('Computed', () => {
+    test('Should get modal header text from Widget CMS', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        const result = wrapper.vm.modalHeaderText;
+
+        // Assert
+        expect(result).toBe(mockDataStrings.cmsHeaderText);
+    });
+
+    test('Should get modal close button text from Widget CMS', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        const result = wrapper.vm.modalCloseButtonText;
+
+        // Assert
+        expect(result).toBe(mockDataStrings.cmsFooterText);
+    });
+
+    test('Should call getCmsContent with the correct widget name and field name for body text', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        wrapper.vm.modalBodyText;
+
+        // Assert
+        expect(mockMixin.methods.getCmsContent).toHaveBeenCalledWith('OEMEndorsementModal', 'BodyText');
+    });
+
+    test('Should call getCmsContent with the correct widget name and field name for header text', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        wrapper.vm.modalHeaderText;
+
+        // Assert
+        expect(mockMixin.methods.getCmsContent).toHaveBeenCalledWith('OEMEndorsementModal', 'HeaderText');
+    });
+
+    test('Should call getCmsContent with the correct widget name and field name for footer text', () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+
+        // Act
+        wrapper.vm.modalCloseButtonText;
+
+        // Assert
+        expect(mockMixin.methods.getCmsContent).toHaveBeenCalledWith('OEMEndorsementModal', 'FooterText');
+    });
+});
+
+describe('Props', () => {
+    test('Should use the default cmsWidgetName prop value of OEMEndorsementModal', () => {
+        // Arrange
+        const wrapper = shallowMount(oemEndorsementModal, {
+            mixins: [mockMixin],
+            attachTo: document.body
+        });
+
+        // Assert
+        expect(wrapper.vm.cmsWidgetName).toBe('OEMEndorsementModal');
+    });
+
+    test('Should accept a custom cmsWidgetName prop', () => {
+        // Arrange
+        const customWidgetName = 'CustomOEMModal';
+        const wrapper = shallowMount(oemEndorsementModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: customWidgetName
+            },
+            attachTo: document.body
+        });
+
+        // Assert
+        expect(wrapper.vm.cmsWidgetName).toBe(customWidgetName);
+    });
+});
diff --git a/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.vue b/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.vue
new file mode 100644
index 00000000..85ee726b
--- /dev/null
+++ b/src/layouts/coverage-statement/oem-endorsement-modal/oem-endorsement-modal.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="recal-modal-container">
+        <modal
+            ref="oemEndorsementModal"
+            :footerButtonText="modalCloseButtonText"
+            @footerButtonEvent="footerButtonClick">
+            <h5
+                class="header-text"
+                v-html="modalHeaderText"></h5>
+            <div v-html="modalBodyText" class="oem-endorsement-modal-body"></div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@/digital-components/modal/modal.vue';
+
+export default {
+    name: 'oem-endorsement-modal',
+    components: {
+        modal
+    },
+    props: {
+        cmsWidgetName: {
+            type: String,
+            default: 'OEMEndorsementModal'
+        }
+    },
+    computed: {
+        modalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+        },
+        modalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs.oemEndorsementModal.openModal();
+        },
+        footerButtonClick() {
+            this.$refs.oemEndorsementModal.closeModal();
+        },
+    }
+
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.modal) {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    padding-left: 1.25rem;
+                    padding-right: 1.25rem;
+                }
+            }
+        }
+        .modal-footer {
+            button {
+                &:hover {
+                    background-color: $heritage-blue-primary;
+                    color: $white;
+                }
+            }
+        }
+    }
+    .oem-endorsement-modal-body {
+        padding: 10px 0 10px 0;
+        p:first-child {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.vue b/src/layouts/provider-preference/steering-modal/steering-modal.vue
index e93f1feb..fb324ced 100644
--- a/src/layouts/provider-preference/steering-modal/steering-modal.vue
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.vue
@@ -81,7 +81,7 @@ export default {
     .modal-footer {
         justify-content: center;
         button {
-            background-color: #167cac;
+            background-color: $heritage-blue-secondary;
             color: $white;
             width: 71%;
         }
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index 5e295340..549e933b 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -32,7 +32,7 @@
                         isRequired>
                     </buttonQuestion>
                     <checkBox
-                    v-if="showAcknowledgementCheckbox"
+                        v-if="showAcknowledgementCheckbox"
                         ref="tpaAcknowledgement"
                         v-model="acknowledged"
                         class="mb-2 mt-4"
@@ -171,6 +171,9 @@ export default {
             background-color: $green;
             color: $white;
             font-weight: $font-weight-bold;
+            &:hover {
+                background-color: $green;
+            }
         }
     }
     .tpa-recal-question > div:first-of-type {