diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 87330d06..fb06197d 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -134,7 +134,7 @@ export default {
 
         .modal-title {
             font-weight: 500;
-            color: rgb(0, 0, 0);
+            color: $black;
         }
     }
     &.modal-component {
diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js
index 8469daba..6254f006 100644
--- a/src/layouts/coverage-statement/coverage-statement.spec.js
+++ b/src/layouts/coverage-statement/coverage-statement.spec.js
@@ -8,7 +8,7 @@ import { useMainStore } from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { applicationConfig } from "@/constants/application-config";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 
 jest.mock("@/helpers/damage-helper", () => ({
@@ -20,9 +20,10 @@ jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
 
-// Mock fetchCmsContentForPage
+// Mock fetchCmsContentForPage, setupModalLinks
 jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
+    setupModalLinks: jest.fn(),
 }));
 
 describe("coverage-statement.vue...", () => {
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index b782050d..6a52f045 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -166,10 +166,10 @@ ol {
   }
 }
 #coverage-statement-text-block {
-  color: #000000;
+  color: $black;
 }
 p strong {
-  color: #000000;
+  color: $black;
   font-weight: 500;
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
index 3ab73b9a..0f555171 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
@@ -1,10 +1,10 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
 
 describe("modal.vue", () => {
     it("Should display header text when HeaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -16,7 +16,7 @@ describe("modal.vue", () => {
 
     it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -28,7 +28,7 @@ describe("modal.vue", () => {
 
     it("Should insert image url when Image is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -40,7 +40,7 @@ describe("modal.vue", () => {
 
     it("Should display body text when BodyText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index b1cddf69..f4064ffa 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -58,7 +58,6 @@ import { Form,defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -71,7 +70,6 @@ export default {
         siteHeader,
         siteSubHeader,
         Form,
-        shoppreferenceModal,
         buttonQuestion,
         contentGroupModal
     },
diff --git a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js
deleted file mode 100644
index 21be705f..00000000
--- a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
-
-describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
-    });
-
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
-    });
-});
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return mockCmsContent[cmsFieldName];
-            }),
-        },
-    };
-    
-    const mockCmsContent = {
-        HeaderText: "Sample header text here.",
-        BodyText: "Sample body text here.",
-        FooterText: "Sample footer text here.",
-    };
\ No newline at end of file
diff --git a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
deleted file mode 100644
index 8cc521b9..00000000
--- a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-4 pb-4">
-                    <h5 class="mb-2 text-center header-text" v-html="ModalHeadline"></h5>
-                    <p class="mb-0 small body-text" v-html="ModalBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import buttonMain from "@/ux-components/button-main/button-main";
-
-export default {
-    name: "modal",
-    props: {
-        cmsWidgetName: String,
-    },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
-    },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
-    components: {
-        buttonMain,
-    },
-};
-</script>
-
-<style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    h5,
-    strong,
-    .header-text{
-        color: #000000;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 26px;
-    }
-    .body-text{
-        color:#525656;
-        font-size: 16px;
-        line-height: 26px;
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-            opacity: 1;
-        }
-    }
-    &.modal-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
-            }
-        }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
-        }
-    }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
-</style>