diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 8c59c9e68..37426e2e5 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -3,15 +3,17 @@
      position: absolute;
      opacity: 0;
      &:focus + label {
+       background-color: $white;
        box-shadow: 0px 0px 0px 4px $blue-600;
      }
-   }
-  input[type="radio"]:checked + label {
-     background-color: $blue-100;
-     border: 1px solid $blue-600;
-     // &:focus {
-     //   border: 2px solid $blue-600;
-     // }
+     &:focus-visible + label {
+       background-color: $white;
+       box-shadow: 0px 0px 0px 4px $blue-600;
+     }
+     &:checked + label {
+        background-color: $blue-100;
+        border: 1px solid $blue-600;
+      }
    }
    label {
      display: flex;
@@ -24,7 +26,7 @@
      width: 100%;
      &:hover {
        cursor: pointer;
-       box-shadow: 0px 0px 0px 10px $blue-100;
+       box-shadow: 0px 0px 0px 6px $blue-100;
      }
   }
 }
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index c322dea82..9ea04070d 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -4,6 +4,7 @@
       <label v-bind:for="radioID">
         <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
         <span class="mt-auto">{{radioLabel}}</span>
+        <span>Selected: {{ picked }}</span>
     </label>
   </div>
 </template>