diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 2013d0af..654be120 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -93,7 +93,7 @@
                                    linkType="text"
                                    :text="item?.name ?? ''"
                                    href="javascript:void(0)"
-                                   @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+                                   @clickEvent="openModal(RECYCLING_MODAL_REF_NAME)" />
                             </span>
                             <span v-else>{{ item?.name ?? '' }}</span>
                             <span>{{ formatAmountInDollars(item?.subTotal ?? 0) }}</span>
@@ -146,7 +146,7 @@
                 </div>
             </div>
             <contentGroupModal
-                ref="RecycleModal"
+                :ref="RECYCLING_MODAL_REF_NAME"
                 :cmsWidgetName="recyclingModalCmsWidgetName">
                 <textBlock cmsWidgetName="RecycleTextBlock" />
             </contentGroupModal>
@@ -178,6 +178,7 @@ import {
 import { getPriceOfLineItems, getTaxOfLineItems } from '@/helpers/price-calculator';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
+const RECYCLING_MODAL_REF_NAME = "RecycleModal";
 
 export default {
     name: 'cart-dropdown',
@@ -209,7 +210,8 @@ export default {
                 servicePackage: 'ServicePackageTitle',
                 vapsItemDescriptions: 'VapsItemDescriptions'
             },
-            cartItemType
+            cartItemType,
+            RECYCLING_MODAL_REF_NAME
         };
     },
     computed: {
@@ -467,6 +469,8 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/ux-variables-svg-strings.scss";
 
+$RECYCLING_MODAL_REF_NAME: 'RecycleModal';
+
 .force-no-top-margin {
     margin-top: 0 !important;
 }
@@ -536,7 +540,7 @@ export default {
     max-width: fit-content;
 }
 
-:deep(#RecycleModal h5) {
+:deep(##{$MY_CONSTANT} h5) {
     text-align: center;
 }
 
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 6c51ea04..30c9ebef 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -41,9 +41,8 @@ ref="theForm"
                 </div>
             </div>
         </div>
-        <!--TODO update-->
         <contentGroupModal
-            ref="recalModal" 
+            :ref="RECAL_MODAL_REF_NAME" 
             cmsWidgetName="RecalModal" />
         <steeringModal
             ref="StateSteeringModal"
@@ -86,6 +85,7 @@ import bailoutMessage from '@/constants/bailoutMessage';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
+const RECAL_MODAL_REF_NAME = "RecalModal";
 
 export default {
     name: 'provider-preference',
@@ -124,6 +124,7 @@ export default {
     },
     data() {
         return {
+            RECAL_MODAL_REF_NAME,
             selectedProvider: null,
             showSteeringLink: false,
             tpaAcknowledgement: false,
@@ -173,7 +174,7 @@ export default {
     watch: {
         prefAnswers(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'recalModal'); // TODO update
+                setupModalLink(this, RECAL_MODAL_REF_NAME);
             }
         }
     },
@@ -188,9 +189,6 @@ export default {
             : false;
     },
     methods: {
-        openModalAction(modalName) {
-            this.$refs[modalName.args].openModal();
-        },
         getHeaderTextFromCms(cmsWidgetName) {
             const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
             return headerText?.replace(