diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index c6ef18fbc..35a8c2a2d 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,31 +2,18 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
       </div>
     </div>
-    <div class="row g-2">
-      <listCard
-        buttonLabel="Windshield"
-        buttonImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        buttonID="windshield"
-      />
-      <listCard
-        buttonLabel="Side Window"
-        buttonImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        buttonID="sidewindow"
-      />
-      <listCard
-        buttonLabel="Back Glass"
-        buttonImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        buttonID="backglass"
-      />
+    <div class="row">
+      <div class="col">
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-1"
+          tabIndex="1"
+          checkboxLabel="I'm a checkbox"
+        />
+      </div>
     </div>
     <div class="row my-4">
       <div class="col">
@@ -58,6 +45,26 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText="Windshield"
+          buttonID="Damage Location"
+          groupID="checkbox-demo-1"
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -72,7 +79,7 @@
           Select Vehicle Year
         </h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -84,7 +91,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -96,7 +103,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -162,7 +169,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -174,7 +181,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -186,7 +193,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -252,7 +259,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -264,7 +271,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -276,7 +283,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -344,7 +351,7 @@
           Select Vehicle Year
         </h3>
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -358,7 +365,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -372,7 +379,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -599,6 +606,7 @@ import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import checkbox from "@/ux-components/checkbox/checkbox";
 export default {
   name: "App",
   components: {
@@ -610,6 +618,8 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
+    siteHeader,
+    checkbox,
     funnelHeader,
   },
   data() {
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
new file mode 100644
index 000000000..1b6254d29
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -0,0 +1,81 @@
+<template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+  <div class="ui-checkbox d-flex">
+    <input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "checkbox",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean
+  }
+};
+</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;
+    }
+    + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      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 {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
+    &: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;
+    }
+  }
+}
+</style>
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 b267f2bbb..5df8261ec 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,7 +1,7 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
-  <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     groupName: String, /* Required, unique for each button GROUP */
     buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
     buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0e5424151..49109fb28 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     groupName: String, /* Required, unique for each button GROUP */
     buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index be7434cc4..157c15de3 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,77 +1,96 @@
 <template>
-  <div class="col mb-3 d-flex list-card">
-    <input
-      type="radio"
-      class="position-absolute opacity-0"
-      :class="className"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      v-model="picked"
-      :tabindex="tabIndex"
-    />
-    <label
-      v-bind:for="buttonID"
-      class="rounded-3 d-flex flex-column align-items-center w-100"
-    >
-      <img
-        class="px-3 pt-3 pb-2 mt-auto"
-        v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
-        v-bind:alt="altText"
-      />
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+  <div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="m-0 order-3">{{buttonLabel}}</p>
     </label>
   </div>
 </template>
 
-<!-- tabIndex="x" is available on this component if needed -->
-
 <script>
 export default {
   name: "listCard",
-  props: [
-    "groupName",
-    "buttonLabel",
-    "buttonImage",
-    "altText",
-    "buttonID",
-    "tabIndex",
-    "className",
-  ],
-  data() {
-    return {
-      picked: "picked",
-    };
-  },
+  props: {
+    buttonImage: String,
+    buttonLabel: String,
+    altText: String,
+    buttonID: String,
+    groupName: String
+  }
 };
 </script>
+
 <style lang="scss">
 .list-card {
-  input[type="radio"] {
-    &:focus + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:focus-visible + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:checked + label {
-      background-color: $blue-100;
-      border: 1px solid $blue;
-    }
-    &.invalid + label {
-      background-color: $white;
-      border: 1px solid $red;
-    }
+  border: 1px solid $gray-500;
+  &.invalid { //Red border if invalid
+    border: 1px solid $red;
   }
-  label {
-    background: $white;
-    border: 1px solid $gray;
-    &:hover {
-      cursor: pointer;
-      box-shadow: 0px 0px 0px 6px $blue-100;
-    }
+  img {
+    height: 46px;
+    width: auto;
+    order: 1;
+    margin-bottom: 3rem;
+  }
+  &:hover {
+    box-shadow: 0px 0px 0px 6px $blue-100;
+    border: 1px solid transparent;
+  }
+  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;
+     }
+   }
+   &:focus + label {
+     box-shadow: 0 0 0 2.5px $blue;
+     border-radius: .5rem;
+   }
+   &:checked + label {
+     background: $blue-100;
+     box-shadow: 0 0 0 1px $blue;
+     border-radius: .5rem;
+   }
+   + label::before {
+     content: "";
+      position: absolute;
+      display: flex;
+      margin: 0 auto;
+      width: 1rem;
+      height: 1rem;
+      margin: 4rem 0 0 0;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+      order: 2;
+   }
+   &:checked + label::before {
+     background: $blue;
+   }
+   &:checked + label::after {
+     content: '';
+     position: absolute;
+     margin: 4.2rem 0 0 0;
+     border-left: 2px solid $white;
+     border-bottom: 2px solid $white;
+     height: 6px;
+     width: 11px;
+     transform: rotate(-45deg);
+   }
+   &:disabled + label {
+     color: #575757;
+   }
+   &:disabled + label::before {
+     background: #ddd;
+   }
   }
 }
 </style>