From 5503dfb4c8b1765eff10137d6022ecca25df9f7b Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 12 Jan 2026 14:51:17 -0500
Subject: [PATCH 1/7] policy-vehicles UI fixes

---
 src/layouts/policy-vehicles/policy-vehicles.vue | 4 ++--
 src/styles/common-validation-styles.scss        | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index ea1d7a0a..d488faf8 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -21,7 +21,7 @@
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
                             :validationRules="rules.optionRequired"
-                            class="mb-2"/>
+                            class="mb-2" />
                         <buttonMain
                             :variant="buttonVariants.primary"
                             buttonText="Add another vehicle"
@@ -114,7 +114,7 @@ export default {
             const vehicles = this.policyVehicles;
             const mappedData =
                 vehicles?.map((v) => {
-                    const maskSymbol = 'X';
+                    const maskSymbol = '*';
                     const vinStart = maskSymbol.repeat(v.vin.length - 6);
                     const vinEnd = v.vin.substring(v.vin.length - 6);
                     return {
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 04dd7448..7b709487 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -11,6 +11,7 @@ html {
             border: 1px solid $red;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;

From dc4492777207cece157310eaad4571938c269fac Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 12 Jan 2026 14:51:54 -0500
Subject: [PATCH 2/7] Revert "policy-vehicles UI fixes"

This reverts commit 5503dfb4c8b1765eff10137d6022ecca25df9f7b.
---
 src/layouts/policy-vehicles/policy-vehicles.vue | 4 ++--
 src/styles/common-validation-styles.scss        | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index d488faf8..ea1d7a0a 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -21,7 +21,7 @@
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
                             :validationRules="rules.optionRequired"
-                            class="mb-2" />
+                            class="mb-2"/>
                         <buttonMain
                             :variant="buttonVariants.primary"
                             buttonText="Add another vehicle"
@@ -114,7 +114,7 @@ export default {
             const vehicles = this.policyVehicles;
             const mappedData =
                 vehicles?.map((v) => {
-                    const maskSymbol = '*';
+                    const maskSymbol = 'X';
                     const vinStart = maskSymbol.repeat(v.vin.length - 6);
                     const vinEnd = v.vin.substring(v.vin.length - 6);
                     return {
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 7b709487..04dd7448 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -11,7 +11,6 @@ html {
             border: 1px solid $red;
             position: relative;
             z-index: 4;
-            border-radius: 60px;
 
             .button-content {
                 border: none;

From cdf8030c1103b696ee51cb49d35489d36ed16b4b Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 12 Jan 2026 14:53:58 -0500
Subject: [PATCH 3/7] policy-vehicles UI fixes

---
 src/layouts/policy-vehicles/policy-vehicles.vue | 4 ++--
 src/styles/common-validation-styles.scss        | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index ea1d7a0a..d488faf8 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -21,7 +21,7 @@
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
                             :validationRules="rules.optionRequired"
-                            class="mb-2"/>
+                            class="mb-2" />
                         <buttonMain
                             :variant="buttonVariants.primary"
                             buttonText="Add another vehicle"
@@ -114,7 +114,7 @@ export default {
             const vehicles = this.policyVehicles;
             const mappedData =
                 vehicles?.map((v) => {
-                    const maskSymbol = 'X';
+                    const maskSymbol = '*';
                     const vinStart = maskSymbol.repeat(v.vin.length - 6);
                     const vinEnd = v.vin.substring(v.vin.length - 6);
                     return {
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 04dd7448..7b709487 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -11,6 +11,7 @@ html {
             border: 1px solid $red;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;

From 2b4ea38cee0c6b6f53803a2047ff6d2d5bc3fc57 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 12 Jan 2026 15:18:47 -0500
Subject: [PATCH 4/7] update mask symbol to match policy-vehicles

---
 src/layouts/address-vehicles/address-vehicles.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index e247ce15..3740b674 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -186,7 +186,7 @@ export default {
         VehiclesForQuestions() {
             // Map API result data, to address-vehicles data structure
             const mappedData = this.VehiclesFromApi.map((v) => {
-                const maskSymbol = 'X';
+                const maskSymbol = '*';
                 const vinStart = maskSymbol.repeat(v.vin.length - 6);
                 const vinEnd = v.vin.substring(v.vin.length - 6);
                 return {

From 488b277e8812c4e10aab82924d2bcf3ff4a2ed3c Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 12 Jan 2026 15:37:08 -0500
Subject: [PATCH 5/7] update border-radius on hover

---
 src/styles/common-validation-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 7b709487..50a7afca 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -63,7 +63,7 @@ html {
             }
 
             &:hover {
-                border-radius: 0.5rem;
+                border-radius: 60px;
             }
         }
 

From 3e179e4637ec2a5c670bbf2667ad42d4f42a8ac3 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 13 Jan 2026 15:27:01 -0500
Subject: [PATCH 6/7] UI updates

---
 .../policy-vehicles-question.vue              | 16 ++++----
 .../policy-vehicles/policy-vehicles.vue       |  2 +-
 src/styles/common-validation-styles.scss      | 41 +++++++++++++++++--
 src/ux-components/list-button/list-button.vue |  1 +
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
index 5f811333..82bca171 100644
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@@ -1,13 +1,13 @@
 <template>
     <buttonQuestion
-    ref="policyVehiclesQuestion"
-    v-model="selectedVehicleVin"
-    groupName="policyVehiclesQuestionOption"
-    buttonTypeString="listButton"
-    isOverflowScrollable
-    :answers="answers"
-    isRequired
-    :validationRules="validationRules" />
+        ref="policyVehiclesQuestion"
+        v-model="selectedVehicleVin"
+        groupName="policyVehiclesQuestionOption"
+        buttonTypeString="listButton"
+        isOverflowScrollable
+        :answers="answers"
+        isRequired
+        :validationRules="validationRules" />
 </template>
 <script>
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index d488faf8..e9080e58 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -122,7 +122,7 @@ export default {
                         vehicle: v,
                         Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
                         Name: v.vin,
-                        SubText: `VIN ${vinStart}${vinEnd}`
+                        SubText: `VIN: ${vinStart}${vinEnd}`
                     };
                 }) ?? [];
             return mappedData;
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 50a7afca..02a7b48b 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -29,6 +29,7 @@ html {
 
         &.list-card {
             border: 1px solid $red;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -49,8 +50,7 @@ html {
 
         // END HOVER
 
-        &.list-button,
-        &.list-card {
+        &.list-button {
             color: $red;
 
             input[type="checkbox"]:focus+label,
@@ -67,6 +67,23 @@ html {
             }
         }
 
+        &.list-card {
+            color: $red;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $red;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $red;
+            }
+
+            &:hover {
+                border-radius: 0.5rem;
+            }
+        }
+
         &.list-button-horizontal {
             color: $red;
 
@@ -142,6 +159,7 @@ html {
             border: 1px solid $success;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;
@@ -159,6 +177,7 @@ html {
 
         &.list-card {
             border: 1px solid $success;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -179,7 +198,23 @@ html {
 
         // END HOVER
 
-        &.list-button,
+        &.list-button {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $success;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
         &.list-card {
             color: $success;
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 47bf1f1b..f9e102b5 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -107,6 +107,7 @@ $heritage-checked-border-color: #0070d1;
   span {
       &.small {
           color: $darker-gray;
+          font-size: 1rem;
       }
   }
 }

From 3e9c7590bb894ed23620f3d8a33d94bdce336194 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 14 Jan 2026 11:06:28 -0500
Subject: [PATCH 7/7] final UI fixes

---
 src/layouts/policy-vehicles/policy-vehicles.vue | 10 ++++++++++
 src/ux-components/list-button/list-button.vue   |  1 -
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index e9080e58..3e6db7ae 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -304,6 +304,10 @@ export default {
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+
+        .subheader-secondary p {
+            text-align: left;
+        }
     }
 }
 
@@ -319,4 +323,10 @@ export default {
         }
     }
 }
+
+.list-button-content {
+    span.small {
+        font-size: 1rem;
+    }
+}
 </style>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index f9e102b5..47bf1f1b 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -107,7 +107,6 @@ $heritage-checked-border-color: #0070d1;
   span {
       &.small {
           color: $darker-gray;
-          font-size: 1rem;
       }
   }
 }