diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 80e2b356..c0957e31 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -15,11 +15,11 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="tpa-header text-center pb-2 fs-5">
+                    <div class="tpa-header text-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span v-html="tpaConfirmationHeaderText"></span>
                     </div>
-                    <div class="tpa-subheader text-center mb-3 fw-bold">
+                    <div class="text-center text-color--black mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
                     </div>
                     <textBlock
@@ -40,7 +40,7 @@
                         <textBlock
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
-                            class="order-details-title fw-bold lh-base mt-5 mb-4"
+                            class="text-color--black fw-bold lh-base mt-5 mb-4"
                             :marginTopSizeOverride="4" />
                         <textBlock
                             id="tpaConfirmationOrderDetailsBody"
@@ -210,18 +210,17 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.tpa-header {
-    color: $black;
 
+.text-color--black {
+    color: $black;
+}
+
+.tpa-header {
     span {
         margin-left: map-get($spacers, 2);
     }
 }
 
-.tpa-subheader {
-    color: $black;
-}
-
 .tpa-body-one {
     :deep(p) {
         line-height: map-get($spacers, 5);
@@ -239,8 +238,4 @@ export default {
     }
 }
 
-.order-details-title {
-   color: $black;
-}
-
 </style>