diff --git a/src/App.vue b/src/App.vue
index 75e80355f..aef77fcb0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,4 +23,5 @@ export default {
 @import "@/styles/common-typography-styles.scss";
 @import "@/styles/common-error-styles.scss";
 @import "@/styles/common-animations.scss";
+@import "@/styles/shared-input-button-styles.scss";
 </style>
diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 006323a18..572be9ef5 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -1,6 +1,6 @@
 <template>
     <label
-        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
+        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0, selected: isChecked }]"
         :for="buttonId"
         @focusin="handleFocus"
         @focusout="handleBlur"
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index a940e1df8..4567994f1 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,7 +1,5 @@
 <template>
-    <div
-        class="dropdown-question"
-        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+    <div class="dropdown-question" :class="errorMessage || hasError ? 'has-error' : ''">
         <label
             :for="inputId"
             :aria-label="questionText"
@@ -43,6 +41,7 @@ export default {
         disableAutoFill: Boolean,
         validationRules: String,
         cmsWidgetName: String,
+        hasError: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
diff --git a/src/common-components/modal/modal.spec.js b/src/common-components/modal/modal.spec.js
index 88d5daf58..85472d6eb 100644
--- a/src/common-components/modal/modal.spec.js
+++ b/src/common-components/modal/modal.spec.js
@@ -33,14 +33,6 @@ describe("modal.vue", () => {
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
     });
-
-    it("Should display footer text when FooterText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["FooterText"]));
-    });
 });
 
 const mockMixin = {
diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
index 54e23e869..e92ed342d 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -33,6 +33,46 @@ describe("textboxQuestion.vue", () => {
         expect(input.exists()).toBe(true);
     });
 
+    it("Should return rounded-pill class", async () => {
+        // Act
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            mixins: [mockMixin],
+            propsData: {
+                cornerStyle: "rounded",
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("input");
+
+        expect(paragraph.attributes("class")).toContain("rounded-pill");
+    });
+
+    it.only("Should return text-center class", async () => {
+        // Act
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            mixins: [mockMixin],
+            propsData: {
+                questionAlignment: "text",
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("input");
+
+        expect(paragraph.attributes("class")).toContain("text-center");
+    });
+
     it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
         // Arrange
         const wrapper = shallowMount(textboxQuestion, {
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 62b605b7b..197e67a63 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -4,26 +4,35 @@
             :for="inputId"
             :aria-label="questionText"
             class="form-label"
+            :class="[questionAlignment ? 'mx-auto' : '']"
             v-html="labelText"></label>
-        <input
-            v-model.trim="value"
-            v-maska="mask"
-            :type="type"
-            class="form-control"
-            :ref="inputId"
-            :id="inputId"
-            :name="inputId"
-            :placeholder="placeholderText"
-            :aria-disabled="isDisabled"
-            :disabled="isDisabled"
-            :aria-required="isRequired"
-            :aria-label="questionText"
-            :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
-            :validationRules="validationRules"
-            @change="handleChange"
-            @blur="handleChange"
-            :maxlength="maxLength ? maxLength : '999'"
-            @focus="$emit('focus', $event.target.value)" />
+        <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
+            <input
+                class="form-control"
+                v-model.trim="value"
+                v-maska="mask"
+                :type="type"
+                :ref="inputId"
+                :id="inputId"
+                :name="inputId"
+                :placeholder="placeholderText"
+                :aria-disabled="isDisabled"
+                :disabled="isDisabled"
+                :aria-required="isRequired"
+                :aria-label="questionText"
+                :class="[
+                    hasIcon ? 'has-icon' : '',
+                    iconRight ? 'icon-right' : '',
+                    questionAlignment ? 'text-center' : '',
+                    isRoundedPill ? 'rounded-pill' : '',
+                ]"
+                :validationRules="validationRules"
+                @change="handleChange"
+                @blur="handleChange"
+                :maxlength="maxLength ? maxLength : '999'"
+                @focus="$emit('focus', $event.target.value)" />
+            <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
+        </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
         </div>
@@ -57,7 +66,10 @@ export default {
         },
         validationRules: String,
         cmsWidgetName: String,
-        maxLength: String,
+        maxLength: String, // Left or center. Default is left
+        questionAlignment: String, // Left or center. Default is left
+        cornerStyle: String, // Left or center. Default is left
+        includeSearchIcon: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -95,6 +107,12 @@ export default {
         };
     },
     computed: {
+        isRoundedPill() {
+            return this.cornerStyle === "rounded";
+        },
+        isQuestionAlignment() {
+            return this.questionAlignment === "text";
+        },
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
@@ -148,6 +166,30 @@ export default {
         color: $black;
         font-weight: 500;
     }
+    .input-wrapper {
+        position: relative;
+        &.has-search-icon {
+            input[type="text"] {
+                border-radius: 50rem;
+            }
+            button[type="submit"] {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 0;
+                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.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                background-repeat: no-repeat;
+                background-position: center;
+                border-radius: 0 50rem 50rem 0;
+                background-color: $blue-100;
+                width: 2.75rem;
+                height: 100%;
+                border: 1px solid $gray-500;
+                border-left: none;
+                display: flex;
+            }
+        }
+    }
     input {
         &.has-icon {
             background-image: url(~@/assets/img/icons/location-pin.svg);
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
index 003556727..9611965d8 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -63,9 +63,7 @@ export default {
         },
         selectedVehicle() {
             // this computed is only needed for the computed differentVehicleAlertBody text above
-            return this.vehicles.find(
-                ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length - 1]
-            );
+            return this.vehicles.find(({ vin }) => vin === this.selectedVehicleVin);
         },
     },
     components: {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d497ae6ce..c9ac0c4d9 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,15 +1,33 @@
 html {
     .has-error {
+        // START HOVER
+        &.list-button-horizontal,
         &.list-button,
-        &.list-card,
-        &.list-button-horizontal {
+        &.list-card {
             border: 1px solid $red;
+            position: relative;
+            z-index: 4;
 
             .button-content {
                 border: none;
             }
+
+            &:hover {
+                @include box-shadow-hover($red-200);
+                z-index: 5;
+            }
         }
 
+        &.ui-radio {
+            &:hover {
+                input[type="radio"],
+                input[type="checkbox"] {
+                    @include box-shadow-hover($red-200);
+                }
+            }
+        }
+        // END HOVER
+
         &.list-button,
         &.list-card {
             color: $red;
@@ -22,27 +40,11 @@ html {
                 box-shadow: 0 0 0 1px $red;
             }
             &:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
                 border-radius: 0.5rem;
             }
-            label {
-                border: 1px solid $red;
-                border-radius: 0.5rem;
-            }
-            label:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
-                border-radius: 10px;
-                border: 1px solid $red;
-            }
         }
         &.list-button-horizontal {
             color: $red;
-            label {
-                border: 1px solid $red;
-                &:hover {
-                    box-shadow: 0px 0px 0px 4px $red-200;
-                }
-            }
             input[type="checkbox"]:focus + label,
             input[type="radio"]:focus + label {
                 box-shadow: 0 0 1px $red;
@@ -75,23 +77,21 @@ html {
         }
         &.textbox-question,
         &.dropdown-question {
-            input:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
-                border-radius: 0.5rem;
-                border: 1px solid $red;
-            }
-            input:focus {
-                box-shadow: 0 0 0 2.5px $red;
-            }
             p {
                 color: $red;
             }
             input,
             select {
-                border: 1px solid transparent;
-                box-shadow: 0 0 0 1px $red;
+                border: 1px solid $red;
                 &:focus {
                     border: 1px solid transparent;
+                    box-shadow: 0 0 0 2.5px $red;
+                }
+
+                &:hover {
+                    box-shadow: 0px 0px 0px 4px $red-200;
+                    border-radius: 0.5rem;
+                    border: 1px solid $red;
                 }
             }
             select {
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 8620968f0..d0670ad6c 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -4,3 +4,7 @@
 @mixin blue-gradient {
     background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
 }
+
+@mixin box-shadow-hover($color) {
+    box-shadow: 0 0 0 4px $color;
+}
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
new file mode 100644
index 000000000..dbffa5b05
--- /dev/null
+++ b/src/styles/shared-input-button-styles.scss
@@ -0,0 +1,15 @@
+.base-input-button {
+    &:not(.has-error):hover {
+        cursor: pointer;
+
+        &.list-button,
+        &.list-button-horizontal,
+        &.list-card {
+            &:not(.selected) {
+                position: relative;
+                z-index: 4;
+                @include box-shadow-hover($blue-300);
+            }
+        }
+    }
+}
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 7d7f52b4e..df3a468ad 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-group list-button-horizontal d-flex flex-column w-100',
+            'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
             { strong: isStrongStyling },
         ]"
         v-model="selectedValue">
@@ -88,18 +88,6 @@ export default {
         width: 100%;
         color: $gray-600;
 
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-                cursor: pointer;
-                z-index: 4 !important;
-            }
-        }
-
-        + p {
-            display: none;
-        }
-
         span {
             font-size: 0.875rem;
         }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 4f7d34ae9..031805509 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -111,16 +111,6 @@ export default {
                 color: $gray-550;
             }
         }
-
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-            }
-            cursor: pointer;
-        }
-        + p {
-            display: none;
-        }
     }
 }
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 426509384..ed70705c9 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-card w-100 rounded-3 d-flex align-items-center h-100',
+            'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
             { horizontal: isWide },
         ]"
         v-model="selectedValue">
@@ -88,13 +88,6 @@ export default {
         max-width: 100%;
     }
 
-    &:hover {
-        @include media-breakpoint-up(sm) {
-            box-shadow: 0px 0px 0px 4px $blue-300;
-            border: 1px solid transparent;
-        }
-    }
-
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -104,10 +97,6 @@ export default {
             display: block;
             position: relative;
 
-            &:hover {
-                cursor: pointer;
-            }
-
             p {
                 color: $gray-600;
                 text-align: center;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 4deb97222..eccbf6395 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="ui-radio form-check"
+        buttonWrapperClasses="ui-radio form-check base-input-button"
         inputClasses="form-check-input"
         v-model="selectedValue">
         <div class="d-flex align-items-start form-check-label">
@@ -64,7 +64,7 @@ export default {
     }
 
     &:hover {
-        .form-check-input {
+        .form-check-input:not(:checked) {
             box-shadow: 0 0 0 4px $blue-300;
         }
     }