diff --git a/src/App.vue b/src/App.vue
index 81e59a4e..ae924427 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@ window.onerror = (msg, url, line, col, error) => {
    @import "./node_modules/bootstrap/scss/bootstrap";
    @import "@/styles/common-styles.scss";
    @import "@/styles/common-typography-styles.scss";
-   @import "@/styles/common-error-styles.scss";
+   @import "@/styles/common-validation-styles.scss";
    @import "@/styles/common-animations.scss";
    @import "@/styles/shared-input-button-styles.scss";
    @import "@/styles/client-customizations.scss";
diff --git a/src/assets/img/icons/select-success.png b/src/assets/img/icons/select-success.png
new file mode 100644
index 00000000..bdeb92f5
Binary files /dev/null and b/src/assets/img/icons/select-success.png differ
diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index f0634855..69b8a530 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -1,7 +1,10 @@
 <template>
     <div
         class="dropdown-question"
-        :class="(meta.touched && errors && errors.length) || hasError ? 'has-error' : ''">
+        :class="{
+            'has-error' : (meta.touched && errors && errors.length && !isDisabled) || hasError,
+            'has-success': (meta.touched && (!errors || !errors.length) && !isDisabled)
+        }">
         <label
             :for="inputId"
             :aria-label="questionText"
diff --git a/src/mixins/base-form-mixin.js b/src/mixins/base-form-mixin.js
index f292c0ba..314a1dd8 100644
--- a/src/mixins/base-form-mixin.js
+++ b/src/mixins/base-form-mixin.js
@@ -20,7 +20,7 @@ export default {
             const errorNames = errors ? Object.keys(errors) : [];
             const firstErrorEl = errorNames[0];
             if (firstErrorEl) {
-                const qsString = `[data-focus-target="${firstErrorEl}"]`;
+                const qsString = `[name="${firstErrorEl}"]`;
                 const el = document.querySelector(qsString);
                 if (el !== null) {
                     el.focus();
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-validation-styles.scss
similarity index 61%
rename from src/styles/common-error-styles.scss
rename to src/styles/common-validation-styles.scss
index 5aacfa51..04dd7448 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -131,6 +131,136 @@ html {
         }
     }
 
+    .has-success {
+
+        // START HOVER
+        &.list-button-horizontal,
+        &.list-button,
+        &.list-button.list-group,
+        &.list-card &.option-label {
+            border: 1px solid $success;
+            position: relative;
+            z-index: 4;
+
+            .button-content {
+                border: none;
+            }
+
+            &:hover {
+                @include box-shadow-hover($green-200);
+                z-index: 5;
+            }
+
+            input[type="radio"]:focus+.list-button-content {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+        }
+
+        &.list-card {
+            border: 1px solid $success;
+        }
+
+        &.ui-radio {
+            &:hover {
+
+                input[type="radio"],
+                input[type="checkbox"] {
+                    @include box-shadow-hover($green-200);
+                }
+            }
+        }
+
+        .form-check-input {
+            &:focus {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+        }
+
+        // END HOVER
+
+        &.list-button,
+        &.list-card {
+            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: 0.5rem;
+            }
+        }
+
+        &.list-button-horizontal {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 1px $success;
+            }
+        }
+
+        &.grid-item {
+            input[type="radio"] {
+                +label {
+                    border: 1px solid $success;
+
+                    &:hover {
+                        background-color: $blue-100;
+                        box-shadow: 0px 0px 0px 4px $green-200;
+                    }
+                }
+            }
+        }
+
+        &.ui-radio,
+        &.ui-checkbox {
+
+            input[type="checkbox"],
+            input[type="radio"],
+            input[type="radio"]+label:before,
+            input[type="checkbox"]+label:before {
+                border: 1px solid $success;
+                background-color: initial;
+            }
+
+            input[type="checkbox"]:checked+label:before {
+                border: 1px solid $blue;
+            }
+        }
+
+        &.textbox-question,
+        &.dropdown-question {
+            p {
+                color: $success;
+            }
+
+            input,
+            input.form-control,
+            select,
+            select.form-select,
+            input:focus,
+            input.form-control:focus,
+            input.form-control:focus-within,
+            select:focus,
+            select.form-select:focus {
+                border-color: $success;
+            }
+
+            select,
+            select.form-select,
+            select:focus,
+            select.form-select:focus {
+                background-image: url(~@/assets/img/icons/select-success.png);
+            }
+        }
+    }
+
     //Quote page radio button group
     .package-main {
         .package-wrapper {