diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/button-question/button-question.spec.js
similarity index 53%
rename from src/common-components/radio-question/radio-question.spec.js
rename to src/common-components/button-question/button-question.spec.js
index de6458122..df7b834c8 100644
--- a/src/common-components/radio-question/radio-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import radioQuestion from "@/common-components/radio-question/radio-question";
+import buttonQuestion from "@/common-components/button-question/button-question";
 
-describe("radioQuestion.vue", () => {
-  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", async () => {
+describe("buttonQuestion.vue", () => {
+  it("Should render the 'questionText' prop value as a span value for the button question and  the 'answer' values should render as text values for button components.", async () => {
     // Act
-    const wrapper = shallowMount(radioQuestion);
+    const wrapper = shallowMount(buttonQuestion);
     await wrapper.setProps({
       questionText: "Question Text",
       answers: ["2023", "2022", "2021"],
@@ -16,8 +16,8 @@ describe("radioQuestion.vue", () => {
     expect(wrapper.find(".needed_car_info-text").text()).toEqual(
       "Question Text"
     );
-    const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-    expect(radioButtons.length).toBe(3);
+    const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
+    expect(buttonButtons.length).toBe(3);
     expect(wrapper.props().modelValue).toBe("2020");
   });
 });
diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/button-question/button-question.vue
similarity index 80%
rename from src/common-components/radio-question/radio-question.vue
rename to src/common-components/button-question/button-question.vue
index 36f130e9f..97ebf1310 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="radio_question">
+  <div class="button_question">
     <div class="needed_car_info mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
@@ -8,13 +8,13 @@
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
         <legend class="sr-only">{{groupName}}</legend>
-          <radio v-for="answer in answers" :key="answer"
-            :radioID="answer"
+          <listButton v-for="answer in answers" :key="answer"
+            :buttonID="answer"
             @click="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
-            data-test="radio"
+            data-test="button"
             :groupName="groupName"
             textPosition="text-start"
             isRequired=true
@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import radio from "@/ux-components/radio/radio";
+import listButton from "@/ux-components/list-button/list-button";
 export default {
-  name: "radio-question",
+  name: "buttonQuestion",
   props: {
     questionText: String,
     answers: Array,
@@ -42,7 +42,7 @@ export default {
     },
   },
   components: {
-    radio,
+    listButton,
   },
 };
 </script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 4a5d91bd2..624469e8a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,30 +2,30 @@
   <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">Radio Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
       </div>
     </div>
     <div class="row g-2">
-      <radioCard
-        radioLabel="Windshield"
-        radioImage="windshield-damage.svg"
+      <listCard
+        buttonLabel="Windshield"
+        buttonImage="windshield-damage.svg"
         altText="Windshield"
         groupName="damageKey"
-        radioID="windshield"
+        buttonID="windshield"
       />
-      <radioCard
-        radioLabel="Side Window"
-        radioImage="side-window-damage.svg"
+      <listCard
+        buttonLabel="Side Window"
+        buttonImage="side-window-damage.svg"
         altText="Side Window"
         groupName="damageKey"
-        radioID="sidewindow"
+        buttonID="sidewindow"
       />
-      <radioCard
-        radioLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
+      <listCard
+        buttonLabel="Back Glass"
+        buttonImage="back-glass-damage.svg"
         altText="Back Glass"
         groupName="damageKey"
-        radioID="backglass"
+        buttonID="backglass"
       />
     </div>
     <div class="row my-4">
@@ -57,27 +57,11 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
       </div>
     </div>
     <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton
-          buttonText="List Button"
-          errorText="Test error message"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-1-radio-group"
@@ -87,10 +71,10 @@
         <h3 class="sr-only" id="demo-1-radio-group">
           Select Vehicle Year
         </h3>
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2021"
+        buttonID="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -98,10 +82,10 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2020"
+        buttonID="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -109,10 +93,10 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2019"
+        buttonID="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -124,11 +108,11 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-2-radio-group"
@@ -138,33 +122,33 @@
         <h3 class="sr-only" id="demo-2-radio-group">
           Select Vehicle Year
         </h3>
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Chevrolet"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Chevrolet"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Dodge"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Dodge"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Ford"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Ford"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -175,11 +159,11 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-3-radio-group"
@@ -189,33 +173,33 @@
         <h3 class="sr-only" id="demo-3-radio-group">
           Multi-Line Centered
         </h3>
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Corvette"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Corvette"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Testarosa"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Testarosa"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="S600"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="S600"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -226,11 +210,11 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
       </div>
     </div>
     <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-4-radio-group"
@@ -240,11 +224,11 @@
         <h3 class="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="1"
-        radioLabelSubCopy=""
+        buttonID="1"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -253,11 +237,11 @@
         v-bind:positionInGroup="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="2"
-        radioLabelSubCopy=""
+        buttonID="2"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -266,11 +250,11 @@
         v-bind:positionInGroup="2"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="3"
-        radioLabelSubCopy=""
+        buttonID="3"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -438,25 +422,23 @@
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/ux-components/button-back/button-back";
-import radioCard from "@/ux-components/radio-card/radio-card";
+import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
-import radio from "@/ux-components/radio/radio";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import siteHeader from "@/common-components/site-header/site-header";
-import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     buttonSecondary,
     buttonBack,
-    radioCard,
+    listCard,
     listButton,
-    radio,
     alert,
     vehicleBanner,
-    radioHorizontal,
+    listButtonHorizontal,
     siteHeader,
   },
   data() {
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index 744769b6b..05df6ed54 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -30,8 +30,8 @@ describe("year-question.vue", () => {
     yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
 
     //Assert
-    const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" });
-    expect(radioQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
   });
 });
 
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 1947611a1..a0ec966b5 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,5 +1,5 @@
 <template>
-<radioQuestion class="radioQuestion"
+<buttonQuestion class="radioQuestion"
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
@@ -8,8 +8,7 @@
 </template>
 
 <script>
-// Components
-import radioQuestion from "@/common-components/radio-question/radio-question";
+import buttonQuestion from "@/common-components/button-question/button-question";
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
@@ -27,7 +26,7 @@ export default {
     modelValue: String,
   },
   components: {
-    radioQuestion,
+    buttonQuestion,
   },
   methods: {
     loadInitialData() {
diff --git a/src/styles/common-button-styles.scss b/src/styles/common-button-styles.scss
index 1e41dd830..abaf94879 100644
--- a/src/styles/common-button-styles.scss
+++ b/src/styles/common-button-styles.scss
@@ -53,33 +53,4 @@
       border-radius: $border-radius-lg;
     }
   }
-  &.list-button {
-    position: relative;
-    background: $white;
-    transition: all 150ms linear;
-    border-radius: $border-radius-lg;
-    border: 1px solid $gray-500;
-    width: 100%;
-    &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
-    }
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:active {
-      background: $blue-100;
-      border: 1px solid $blue;
-    }
-    + label {
-      display: none;
-    }
-    &.error {
-      border: 1px solid $danger;
-      ~ label {
-        display: flex;
-        color: $danger;
-      }
-    }
-  }
 }
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-list-styles.scss
similarity index 95%
rename from src/styles/common-radio-styles.scss
rename to src/styles/common-list-styles.scss
index 2bee198bf..4eb174a02 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -1,5 +1,5 @@
-.radiogroup {
-  &.radio-list-button {
+.list-group {
+  &.list-button {
     input[type="radio"] {
       opacity: 0;
       position: fixed;
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
similarity index 70%
rename from src/ux-components/radio-horizontal/radio-horizontal.spec.js
rename to src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index c12eedefa..ac8dc3202 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
-import radioHorizontal from "./radio-horizontal";
+import listButtonHorizontal from "./list-button-horizontal";
 
-describe("radio.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+describe("list-button.vue", () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
-    const wrapper = shallowMount(radioHorizontal, {
+    const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        radioID: "2023",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
similarity index 70%
rename from src/ux-components/radio-horizontal/radio-horizontal.vue
rename to src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9f04efe04..315a18995 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,11 +1,11 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
-  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
+  <div class="col list-group list-button-horizontal d-flex flex-column mb-2">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
       <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
@@ -16,19 +16,19 @@
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
-  name: "radioHorizontal",
+  name: "listButtonHorizontal",
   props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    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 */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
     loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
     sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
+    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
+    positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
   },
   data() {
     return {
@@ -58,7 +58,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-horizontal {
+.list-button-horizontal {
   input[type="radio"] {
     opacity: 0;
     position: fixed;
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 3d0843e10..599d447f4 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -1 +1,47 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listButton from "./list-button";
+
+describe("list-button.vue", () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        buttonID: "2023",
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: "null",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("span");
+
+    await label.trigger("click");
+
+    expect(input.attributes()).toEqual({
+      id: "2023",
+      type: "radio",
+      value: "2023",
+      name: "TestGroup",
+      "aria-required": "false",
+    });
+
+    expect(label.attributes()).toEqual({
+      role: "radio",
+      tabindex: "-1",
+      for: "2023",
+      class: "d-flex flex-column justify-content-center py-3 px-4",
+      "aria-checked": "false",
+    });
+
+    expect(label.text()).toEqual("2023");
+
+    expect(paragraph.text()).toEqual("2023");
+
+    expect(wrapper.vm.display).toBe(true);
+  });
+});
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 52997d5d6..e23a96dfc 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,27 +1,15 @@
 <template>
-  <div class="d-flex flex-column w-100">
-    <button
-      class="
-        btn
-        list-button
-        d-flex
-        align-items-center
-        justify-content-between
-        py-3
-        px-4
-      "
-      @click="displayComponent"
-      v-bind:class="[this.isError ? 'error' : '']"
-    >
-      <span class="m-0">{{ this.buttonText }}</span>
-      <loader
-        v-if="display"
-        v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        v-bind:class="[this.loaderColor, this.loaderPosition]"
-      />
-    </button>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
+  <!-- See the component-test.vue page for example implementation -->
+  <div class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayComponent()">
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+  </label>
+  <p class="small">{{errorMessage}}</p>
+</div>
 </template>
 
 <script>
@@ -29,16 +17,21 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    buttonText: String,
-    errorText: String,
-    loaderColor: String,
-    loaderPosition: String,
-    sizeInRem: [Number, String],
+    groupName: String, /* Required, unique for each button GROUP */
+    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    isRequired: Boolean, /* Optional, default is false */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    errorMessage: String, /* Optional, if there is an error message to be displayed */
+    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
   },
   data() {
     return {
-      display: false,
       isError: false,
+      display: false,
     };
   },
   methods: {
@@ -48,6 +41,6 @@ export default {
   },
   components: {
     loader,
-  },
+  }
 };
 </script>
diff --git a/src/ux-components/radio-card/radio-card.spec.js b/src/ux-components/list-card/list-card.spec.js
similarity index 100%
rename from src/ux-components/radio-card/radio-card.spec.js
rename to src/ux-components/list-card/list-card.spec.js
diff --git a/src/ux-components/radio-card/radio-card.vue b/src/ux-components/list-card/list-card.vue
similarity index 78%
rename from src/ux-components/radio-card/radio-card.vue
rename to src/ux-components/list-card/list-card.vue
index 0789827ef..be7434cc4 100644
--- a/src/ux-components/radio-card/radio-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="col mb-3 d-flex radio-card">
+  <div class="col mb-3 d-flex list-card">
     <input
       type="radio"
       class="position-absolute opacity-0"
       :class="className"
-      :id="radioID"
+      :id="buttonID"
       :name="groupName"
-      :value="radioLabel"
+      :value="buttonLabel"
       v-model="picked"
       :tabindex="tabIndex"
     />
     <label
-      v-bind:for="radioID"
+      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/${radioImage}`)"
+        v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
         v-bind:alt="altText"
       />
-      <span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
     </label>
   </div>
 </template>
@@ -28,13 +28,13 @@
 
 <script>
 export default {
-  name: "radioCard",
+  name: "listCard",
   props: [
     "groupName",
-    "radioLabel",
-    "radioImage",
+    "buttonLabel",
+    "buttonImage",
     "altText",
-    "radioID",
+    "buttonID",
     "tabIndex",
     "className",
   ],
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-card {
+.list-card {
   input[type="radio"] {
     &:focus + label {
       background-color: $white;
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 68dba4974..37477d83a 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -62,6 +62,7 @@ export default {
   &.center {
     position: absolute;
     right: 50%;
+    transform: translateX(50%);
   }
   &.right {
     position: absolute;
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
deleted file mode 100644
index c24f6a2a1..000000000
--- a/src/ux-components/radio/radio.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import radio from "./radio";
-
-describe("radio.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
-    // Act
-    const wrapper = shallowMount(radio, {
-      propsData: {
-        radioID: "2023",
-        groupName: "TestGroup",
-        loaderColor: "blue",
-        loaderPosition: "right",
-        sizeInRem: "1.5",
-        errorMessage: "null",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-    const label = wrapper.find("label");
-    const paragraph = wrapper.find("span");
-
-    await label.trigger("click");
-
-    expect(input.attributes()).toEqual({
-      id: "2023",
-      type: "radio",
-      value: "2023",
-      name: "TestGroup",
-      "aria-required": "false",
-    });
-
-    expect(label.attributes()).toEqual({
-      role: "radio",
-      tabindex: "-1",
-      for: "2023",
-      class: "d-flex flex-column justify-content-center py-3 px-4",
-      "aria-checked": "false",
-    });
-
-    expect(label.text()).toEqual("2023");
-
-    expect(paragraph.text()).toEqual("2023");
-
-    expect(wrapper.vm.display).toBe(true);
-  });
-});
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
deleted file mode 100644
index 1275eb8b1..000000000
--- a/src/ux-components/radio/radio.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <!-- See the component-test.vue page for example implementation -->
-  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
-  <p class="small">{{errorMessage}}</p>
-</div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "radioList",
-  props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    isRequired: Boolean, /* Optional, default is false */
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    errorMessage: String, /* Optional, if there is an error message to be displayed */
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-  },
-  data() {
-    return {
-      isError: false,
-      display: false,
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  }
-};
-</script>
diff --git a/vue.config.js b/vue.config.js
index aba5fd140..9d9b2401b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -17,7 +17,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },
diff --git a/vue.release.config.js b/vue.release.config.js
index 6cf78123c..c4b18d5dd 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -16,7 +16,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },