diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 6d05c4009..0795d8b59 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,27 +1,89 @@
 <template>
-<h5>POC</h5>
+
+  <div class="container-fluid nested-radio">
+    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint, Blue Shade"
+        buttonID="radio1"
+        />
+      </div>
+    </div>
+    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+      <div class="col">
+        <p class="mb-0 fw-bold">Ok, select the features</p>
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, solar, 3rd visor band"
+        buttonID="button1"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+        />
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
+        buttonID="button2"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        />
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint"
+        buttonID="radio2"
+        />
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script>
-
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
-  props: {
-    groupName: String,
-    buttonLabel: String,
-    buttonID: String,
-    isRequired: Boolean,
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    screenReaderOnlyText: String,
-    hasError: Boolean,
-  },
+  components: {
+    radio,
+    listCard,
+  }
 };
-
 </script>
+
+<style lang="scss">
+.nested-radio {
+  padding: 20px; // For demo only
+  .ui-radio {
+    margin: .25rem 0;
+  }
+  p {
+    font-size: .875rem;
+  }
+  // For demo only
+  .show-hide {
+    max-height: 0;
+    transition: max-height 0.35s ease-out;
+    overflow: hidden;
+  }
+  .demo-animate {
+    &:hover {
+      + .show-hide {
+        max-height: 140px;
+        transition: max-height 0.35s ease-in;
+      }
+    }
+  }
+  // END for demo only
+}
+</style>
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d7d1c019d..2ca852f66 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -22,6 +22,7 @@
   }
   &.ui-radio,
   &.ui-checkbox {
+    input[type=checkbox],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 24c9e830e..10022b438 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
-    <input
-      type="checkbox"
-      aria-checked="false"
-      :name="checkboxName"
-      :id="buttonID"
-      :tabindex="tabIndex"
-      :aria-required="isRequired"
+  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <input class="form-check-input"
+    type="checkbox"
+    aria-checked="false"
+    :name="checkboxName"
+    :id="buttonID"
+    :tabindex="tabIndex"
+    :aria-required="isRequired"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -34,60 +34,21 @@ export default {
 </script>
 
 <style lang="scss">
-.ui-checkbox {
-  position: relative;
-  input[type="checkbox"] {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+    &:checked {
+      background-size: 125%;
+      border: 1px solid $blue;
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 2px;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 12px;
-      transform: rotate(-45deg);
-    }
-    &:hover + label::before {
+    &:focus {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 1fe25c408..ddecb9a31 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -173,6 +173,7 @@ export default {
     &:checked + label {
       p {
         color: $black;
+        font-weight: 500;
       }
       .sub-copy {
         color: $gray-600;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index aedead0eb..5a2353bc4 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged()"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -81,58 +81,67 @@ export default {
 .ui-radio {
   position: relative;
   input[type="radio"] {
-    position: absolute !important;
+    position: absolute!important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
+    clip: rect(1px,1px,1px,1px);
+    + .radio-label {
+      &:before {
+        content: '';
+        background: $white;
+        border-radius: 100%;
+        border: 1px solid $gray-500;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: .5rem;
+        vertical-align: top;
         cursor: pointer;
+        transition: all 250ms ease;
+        flex-shrink: 0;
+        top: .25rem;
       }
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 50%;
+    &:checked {
+      + .radio-label {
+        &:before {
+          background-color: $blue;
+          box-shadow: inset 0 0 0 2px $white;
+        }
+      }
     }
-    &:checked + label::before {
-      background: $white;
-      border: 1px solid $blue;
+    &:hover {
+      + label {
+        cursor: pointer;
+        &:before {
+          box-shadow: 0 0 0 4px #9fcee6;
+        }
+      }
     }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 3px;
-      height: 6px;
-      width: 6px;
-      transform: rotate(-45deg);
-      border: 5px solid $blue;
-      border-radius: 50%;
+    &:focus {
+      + label {
+        &:before {
+          box-shadow: 0 0 0 2px #1574a1;
+        }
+      }
     }
-    &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-300;
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $gray-550;
+          border-color: $gray-550;
+          background: $gray-550;
+        }
+      }
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
+        }
+      }
     }
   }
 }