diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index fb06197d..f5c9a221 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -33,7 +33,7 @@
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                        :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -57,6 +57,7 @@ export default {
         onModalClosedCallback: {
             type: Function,
         },
+        isButtonDisabled: Boolean
     },
     setup(props) {
         const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
@@ -80,7 +81,7 @@ export default {
             }
         },
         resetButtonStyle() {
-            this.$refs.modalButtonMain.resetButtonStyle();
+            this.$refs.modalButtonMain?.resetButtonStyle();
         },
         onModalOpened() {
             this.onModalOpenedCallback?.();
diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js
index a2140519..9c84a066 100644
--- a/src/layouts/provider-preference/provider-preference.spec.js
+++ b/src/layouts/provider-preference/provider-preference.spec.js
@@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 130738fe..954cede7 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,8 +1,5 @@
 <template>
-    <Form @submit="onSubmit" 
-        @invalid-submit="onInvalidSubmit" 
-        ref="theForm"  
-        >
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -34,7 +31,12 @@
             ref="ShopPreferenceDrawer" 
             @openSteering="openStateSteeringModal"
             :showSteeringLink="showSteeringLink"/>
-    </Form>    
+        <tpaRecalModal cmsWidgetName="TPARecalModal" 
+            ref="TPARecalModal"
+            :ackError="ackError" 
+            @buttonClick="navigateWithTPAAck"
+            /> 
+    </Form>
 
 </template>
 <script>
@@ -57,6 +59,7 @@ import providerPrefRadio from "./provider-pref-radio/provider-pref-radio";
 import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
 import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
 import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
+import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue"
 
 // DEFINE VALIDATION RULES
 defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
@@ -76,7 +79,8 @@ export default {
         providerPrefRadio,
         recalModal,
         steeringModal,
-        shopPreferenceModal
+        shopPreferenceModal,
+        tpaRecalModal
     },
     data() {
         return {
@@ -124,6 +128,9 @@ export default {
                 }
             ));
             return modifiedAnswers;
+        },
+        ackError() {
+            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
         }
     },
     methods: {
@@ -146,6 +153,10 @@ export default {
         navigateForward(scenario){
             this.$router.navigate(scenario, this.$route);
         },
+        navigateWithTPAAck() {
+            this.mainStore.saveProviderPreferenceData({selectedProvider: this.selectedProvider, tpaAcknowledgement: this.tpaAcknowledgement}); 
+            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
+        },
         forwardButtonAction() {
             if(this.selectedProvider) {
                 let scenario = null; 
@@ -158,8 +169,8 @@ export default {
                         {
                             if(this.mainStore.hasRecalibrationPart)
                             {
-                                //open tpa adas modal here, else save selection and navigate forward
-                                console.log('add tpa modal code');
+                                this.$refs["TPARecalModal"].openModal();
+                                this.$refs["siteFooter"].removeLoader();
                                 return;
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
diff --git a/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
index 70658f9e..8d85cc02 100644
--- a/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
+++ b/src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
@@ -4,9 +4,6 @@ import { shallowMount } from '@vue/test-utils';
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.spec.js b/src/layouts/provider-preference/steering-modal/steering-modal.spec.js
index 7b479d4f..f213f228 100644
--- a/src/layouts/provider-preference/steering-modal/steering-modal.spec.js
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.spec.js
@@ -5,8 +5,6 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js
new file mode 100644
index 00000000..bf565f23
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js
@@ -0,0 +1,58 @@
+
+import tpaRecalModal from "./tpa-recal-modal.vue"
+
+import { shallowMount } from '@vue/test-utils';
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+  setupModalLinks: jest.fn(),
+}));
+  
+describe('tpa-Recal-Modal.vue', () => {
+    test('should show error if not acknowledged', () => {
+      const { wrapper } = setupMocks();
+      wrapper.vm.acknowledged = false;
+      wrapper.vm.footerButtonClick();
+      
+      expect(wrapper.vm.showError).toBeTruthy();
+    }) 
+  
+    test('should not show error if acknowledged', () => {
+        const { wrapper } = setupMocks();
+        wrapper.vm.acknowledged = true;
+        wrapper.vm.footerButtonClick();
+        
+        expect(wrapper.vm.showError).toBeFalsy();
+    }) 
+});
+
+function setupMocks(){
+
+    const mountOptions = getMountOptions({
+      router: {
+          navigate: jest.fn(),
+      },
+    });
+
+    const wrapper = shallowMount(
+        tpaRecalModal,
+        mountOptions
+    );
+    
+    const apiResponses = {};
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation (() => {});
+
+
+    return { wrapper };
+}
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
new file mode 100644
index 00000000..5aaea389
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -0,0 +1,156 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick"
+        :isButtonDisabled="isButtonDisabled">
+        <div class="form-test-invalid">
+            <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+            <div>
+                <div class="mb-4" v-html="ModalBodyText"></div>
+                <tpaRecalToggle class="mb-5" cmsWidgetName="TPARecalModalToggle"/>
+                <checkBox
+                    class="mb-2"
+                    :class="showError && ' has-error'"
+                    validationRules="option-required"
+                    checkboxName="tpaAcknowledgement"
+                    buttonID="tpaAcknowledgement"
+                    :tabIndex="0"
+                    :checkboxLabel="ModalSubBodyText"
+                    :screenReaderOnlyText="ModalSubBodyText"
+                    isRequired
+                    ref="tpaAcknowledgement"
+                    v-model="acknowledged"
+                />
+                <div v-if="showError" class="row form-test-error mt-1">
+                    <p>{{ackError}}</p>
+                </div>
+            </div>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+import tpaRecalToggle from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue" 
+import checkBox from "@/ux-components/checkbox/checkbox.vue"
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+        ackError: String,
+    },
+    data() {
+        return {
+            acknowledged: false,
+            showError: false
+        };
+    },
+    emits: ["buttonClick"],
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },       
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        isButtonDisabled() {
+            return !this.acknowledged
+        }
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            //check if acked, if not show error
+            if(this.acknowledged)
+            {
+                this.$refs[this.ModalName]?.closeModal();
+                this.$emit("buttonClick");
+            }
+            else
+            {
+                this.$refs[this.ModalName]?.resetButtonStyle();
+                this.showError = true;
+            }
+
+        },
+
+    },
+    watch: {
+        acknowledged(){
+            this.showError = false;
+        }
+    },
+    components: {
+        modal,
+        tpaRecalToggle,
+        checkBox,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                        margin-bottom: .5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.form-check {
+    .form-check-input {
+        &:checked {
+            + label {
+                p {
+                    font-weight: 400 !important;
+                    font-size: 1rem !important;
+                    color: $gray-600 !important;
+                    line-height: 1.5rem;
+                }
+            }
+        }
+    }
+    p {
+        font-weight: 400 !important;
+        font-size: 1rem !important;
+        color: $gray-600 !important;
+        line-height: 1.5rem;
+    }
+}
+
+.form-test-error {
+    p {
+        font-weight: 500;
+    }
+}
+</style>
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js
new file mode 100644
index 00000000..869356ae
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js
@@ -0,0 +1,85 @@
+/* eslint-env jest */
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
+import tpaRecalToggle from './tpa-recal-toggle.vue';
+
+const mockText = Object.freeze({
+  HEADER: 'Mock Header',
+  BODY: 'Mock Body',
+});
+const mockRoute = {
+  query: {    
+    issPage: issPageValues.PROVIDER_PREFERENCE,
+  },
+};
+const mockRouter = {
+  navigate: jest.fn(),
+};
+
+const mountOptions = {
+  global: {
+    propsData: {
+      cmsWidgetName: "MockWidgetName",
+    },
+    mixins: [
+      {
+        methods: {
+          getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
+            if (cmsWidgetName === 'MockWidgetName') {
+              if (fieldName === 'HeaderText') {
+                return mockText.HEADER;
+              }
+
+              if (fieldName === 'BodyText') {
+                return mockText.BODY;
+              }
+            }
+
+            return '';
+          }),
+          pushEventToGA: jest.fn()
+        },
+        computed: {
+          GaActions() {
+            return GaActions;
+          },
+          queryStrings() {
+            return queryStrings;
+          },
+        }
+      },
+    ],
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter,
+    },
+  },
+};
+
+describe('more details section', () => {
+  test('should NOT be displayed on the screen as a default.', () => {
+    const { container } = render(tpaRecalToggle, mountOptions);
+
+    const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+
+  test('should toggle when arrow clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(tpaRecalToggle, mountOptions);
+    const toggleLink = container.querySelector('#moreDetails');;
+
+    await user.click(toggleLink);
+    let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).toBeVisible();
+
+    await user.click(toggleLink);
+    moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+});
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
new file mode 100644
index 00000000..c524fcf6
--- /dev/null
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="tpa-recal-toggle mt-2 mb-3">
+      <div
+        class="tpa-toggle"
+        :class="[isDetailVisible ? 'active' : '']"
+        @click="handleClickToggle"
+      >
+        <textLink
+          linkType="text"
+          href="#!"
+          :text="textForToggle"
+          id="moreDetails"
+        />
+      </div>
+      <Transition>
+        <div
+          v-show="isDetailVisible"
+          id="tpa-recal-detail-wrapper"
+          class="mt-2"
+        >
+          <div
+            v-html="detailContent"
+            id="tpa-recal-detail-content"
+            class="mb-2"
+          />
+        </div>
+      </Transition>
+    </div>
+  </template>
+  <script>
+  import textLink from '@/ux-components/text-link/text-link.vue';
+  
+  export default {
+    name: 'tpa-recal-toggle',
+    props: {
+        cmsWidgetName: String,
+    },
+    components: {
+      textLink,
+    },
+    data() {
+      return {
+        isDetailVisible: false,
+      };
+    },
+    computed: {
+      textForToggle() {
+        return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+      },
+      detailContent() {
+        return this.getCmsContent(this.cmsWidgetName, 'BodyText');
+      },
+    },
+    methods: {
+      handleClickToggle() {
+        this.isDetailVisible = !this.isDetailVisible;
+      },
+    },
+  };
+  </script>
+  <style lang="scss">
+    .tpa-recal-toggle {
+      .tpa-toggle {
+        &::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;
+          margin-left: 0.5rem;
+          width: 16px;
+          height: 9px;
+          display: inline-block;
+        }
+        &.active::after {
+          transform: rotate(180deg);
+        }
+        a {
+          font-size: 0.875rem;
+        }
+      }
+    }
+    #tpa-recal-detail-wrapper {
+      // START - Vue Transition
+      &.v-enter-active,
+      &.v-leave-active {
+        transition: opacity 250ms ease-in;
+      }
+  
+      &.v-enter-from,
+      &.v-leave-to {
+        opacity: 0;
+      }
+      // END - Vue Transition
+  
+      img {
+        width: 100%;
+      }
+    }
+    #tpa-recal-detail-content {
+      font-size: 1rem;
+      p {
+        font-size: 1rem;
+        margin-bottom: 0;
+      }
+      ol {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index cbc1120c..7427730f 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -8,9 +8,12 @@
             :name="checkboxName"
             :id="buttonID"
             :tabindex="tabIndex"
-            :aria-required="isRequired" />
+            :aria-required="isRequired"
+            @change="handleCheckChange"
+            :ref="checkboxName"
+             />
         <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
@@ -28,6 +31,11 @@ export default {
         isRequired: Boolean,
         hasError: Boolean,
     },
+    methods: {
+      handleCheckChange() {
+        this.$emit("update:modelValue", this.$refs[this.checkboxName].checked);
+      },
+    },
 };
 </script>