diff --git a/src/assets/img/icons/spinner.svg b/src/assets/img/icons/spinner.svg
new file mode 100644
index 000000000..d5b7fe4c0
--- /dev/null
+++ b/src/assets/img/icons/spinner.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xml:space="preserve">
+  <path d="M24.01 48c-2.93 0-5.92-.52-8.85-1.58-6.25-2.25-11.33-7.33-13.58-13.57C-1.25 25-.25 16.76 4.34 10.22A24.05 24.05 0 0 1 24 0v2.26c-7.08 0-13.74 3.46-17.81 9.27-4.16 5.91-5.07 13.4-2.49 20.55 2.03 5.62 6.6 10.19 12.22 12.22 7.14 2.58 14.64 1.67 20.56-2.49A21.78 21.78 0 0 0 45.74 24H48c0 7.81-3.82 15.16-10.22 19.66A23.846 23.846 0 0 1 24.01 48z"/>
+</svg>
diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 2fb50f018..d17020dfc 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info d-flex mt-4 mb-3">
+    <div class="needed_car_info mt-4 mb-3 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
@@ -31,4 +31,4 @@ export default {
     radio,
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 2c9557413..b25a26b8f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,82 +1,230 @@
 <template>
-<div class="container-fluid container-shadow p-2 rounded-3">
+  <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>
+      </div>
+    </div>
     <div class="row g-2">
-        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
-        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
-        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+      <radioCard
+      radioLabel="Windshield"
+      radioImage="windshield-damage.svg"
+      altText="Windshield"
+      groupName="damageKey"
+      radioID="windshield"
+      />
+      <radioCard
+      radioLabel="Side Window"
+      radioImage="side-window-damage.svg"
+      altText="Side Window"
+      groupName="damageKey"
+      radioID="sidewindow"
+      />
+      <radioCard
+      radioLabel="Back Glass"
+      radioImage="back-glass-damage.svg"
+      altText="Back Glass"
+      groupName="damageKey"
+      radioID="backglass"
+      />
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Primary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+        buttonText="Primary"
+        />
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonSecondary buttonText="Secondary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonSecondary
+        buttonText="Secondary"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <listButton buttonText="List Button" errorText="Test error message" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <listButton
+        buttonText="List Button"
+        errorText="Test error message"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+      </div>
     </div>
     <div class="row">
-        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-        <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
-            <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-            <h3 class="visually-hidden" id="select-year-radio-group">
-                Select Vehicle Year
-            </h3>
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
-        </div>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2021"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2020"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2019"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <a href="#">Text Link</a>
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <a href="#">Text Link</a>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <p>This is default body copy font size/weight</p>
+        <p class="small">This is small body copy using <code>.small</code> class</p>
+        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h1>h1 Heading</h1>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h2>h2 Heading</h2>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h3>h3 Heading</h3>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h4>h4 Heading</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h5>h5 Heading</h5>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <h6>h6 Heading</h6>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="Dismissible Alert"
+        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+        v-bind:isDismissible = "true"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="NON-Dismissible Alert"
+        alertCopy="This is an example of a NON-DISMISSIBLE alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
     </div>
     <div class="row my-2">
         <div class="col">
-            <p>This is default body copy font size/weight</p>
-            <p class="small">
-                This is small body copy using <code>.small</code> class
-            </p>
-            <p>
-                <small>This is also small using <code>&lt;small&gt;</code> tag</small>
-            </p>
-        </div>
+        <alert
+        alertClass="alert-warning"
+        alertHeadline="Warning Alert"
+        alertCopy="This is an example of a WARNING alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h1>h1 Heading</h1>
-        </div>
+      <div class="col">
+        <alert
+        alertClass="alert-info"
+        alertHeadline="Info Alert"
+        alertCopy="This is an example of a INFO alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h2>h2 Heading</h2>
-        </div>
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="Danger Alert"
+        alertCopy="This is an example of a DANGER alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h3>h3 Heading</h3>
-        </div>
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="No Body Copy Alert"
+        alertCopy=""
+        v-bind:isDismissible = "false"
+        />
+      </div>
     </div>
-    <div class="row my-2">
-        <div class="col">
-            <h4>h4 Heading</h4>
-        </div>
-    </div>
-    <div class="row my-2">
-        <div class="col">
-            <h5>h5 Heading</h5>
-        </div>
-    </div>
-    <div class="row my-2">
-        <div class="col">
-            <h6>h6 Heading</h6>
-        </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
+      </div>
     </div>
     <div class="row my-3">
       <div class="d-flex align-items-center">
@@ -88,30 +236,32 @@
         />
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import buttonPrimary from "@/ux-components/button-primary/button-primary";
-import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import radioCard from "@/ux-components/radio-card/radio-card";
-import listButton from "@/ux-components/list-button/list-button";
-import radioList from "@/ux-components/radio-list/radio-list";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-export default {
+  import buttonPrimary from "@/ux-components/button-primary/button-primary";
+  import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+  import radioCard from "@/ux-components/radio-card/radio-card";
+  import listButton from "@/ux-components/list-button/list-button";
+  import radioList from "@/ux-components/radio-list/radio-list";
+  import alert from "@/ux-components/alert/alert";
+  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  export default {
     name: "App",
     components: {
-        buttonPrimary,
-        buttonSecondary,
-        radioCard,
-        listButton,
-        radioList,
-        vehicleBanner
+      buttonPrimary,
+      buttonSecondary,
+      radioCard,
+      listButton,
+      radioList,
+      alert,
+      vehicleBanner
     },
     data() {
-        return {
-            years: [2023, 2022, 2021, 2020],
-        };
-    },
-};
+      return {
+        years: [2023, 2022, 2021, 2020],
+      };
+    }
+  };
 </script>
diff --git a/src/layouts/loader-demo/loader-demo.vue b/src/layouts/loader-demo/loader-demo.vue
new file mode 100644
index 000000000..4c19c4d21
--- /dev/null
+++ b/src/layouts/loader-demo/loader-demo.vue
@@ -0,0 +1,28 @@
+<template>
+  <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">Loader</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <loader
+        sizeInRem="10"
+        loaderColor="blue"
+        loaderPosition="center"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+export default {
+  name: "App",
+  components: {
+    loader
+  }
+};
+</script>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 0f40a57b6..5591b9f07 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -32,3 +32,15 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+    .select-car {
+        height: calc(100vh - 1rem);
+
+        .car_list {
+        // Height will be determined by overall height of content above list
+        height: calc(100% - 110px);
+        width: calc(100% - 1rem);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 1042b093f..2b3d566a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -16,6 +17,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/loader-demo", // This is a temporary route for testing.
+    name: "LoaderDemo",
+    component: LoaderDemo,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index f14a96f8b..3442d35bf 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,4 +1,5 @@
 import store from './index'
+import globalMethods from '@/global-methods'
 
 describe("Actions", () => {
     it("Should return list of years retrieved", async () => {
@@ -6,9 +7,14 @@ describe("Actions", () => {
         let years = [];
 
         // Act
+        globalMethods.callHttpClient = jest.fn();
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: [2023,2022,2021]});
+        });
         await store.dispatch('getVehicleYears')
         .then( (response) => {
             years = response.data;
+            console.log(response);
         });
 
         // Assert
@@ -20,6 +26,9 @@ describe("Actions", () => {
         let makes = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['Baic','Honda','Ford']});
+        });
         await store.dispatch('getVehicleMakes', {year: 2023})
         .then( (response) => {
             makes = response.data;
@@ -34,6 +43,9 @@ describe("Actions", () => {
         let models = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['BJ40 (MEX)','Civic','Accord']});
+        });
         await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'})
         .then( (response) => {
             models = response.data;
@@ -48,6 +60,9 @@ describe("Actions", () => {
         let styles = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['4 DOOR UTILITY','2 DOOR']});
+        });
         await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'})
         .then( (response) => {
             styles = response.data;
@@ -62,13 +77,18 @@ describe("Actions", () => {
         let routeInfo = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: {
+                Result: 'Route Info Data'
+            }});
+        });
         await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' })
         .then( (response) => {
             routeInfo = response.data.Result;
         });
 
         // Assert
-        expect(routeInfo).toBe('{"vehicle-year":{"RelativeUrl":"/vehicle-year","LayoutName":"vehicle-year"}}');
+        expect(routeInfo).toBe('Route Info Data');
     });
 
     it("Should return page data from url retrieved", async () => {
@@ -76,12 +96,17 @@ describe("Actions", () => {
         let pageData = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: {
+                Result: 'Page Info Data'
+            }});
+        });
         await store.dispatch('getPageData', { pageName: 'vehicle-year' })
         .then( (response) => {
             pageData = response.data.Result;
         });
 
         // Assert
-        expect(pageData[0].Type).toBe('PageConfigWidget');
+        expect(pageData).toBe('Page Info Data');
     });
 })
\ No newline at end of file
diff --git a/src/styles/common-component-styles/ymms-common-styles.scss b/src/styles/common-component-styles/ymms-common-styles.scss
deleted file mode 100644
index 7fd2a4f18..000000000
--- a/src/styles/common-component-styles/ymms-common-styles.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.select-car {
-    height: calc(100vh - 1rem);
-
-    .car_list {
-      // Height will be determined by overall height of content above list
-      height: calc(100% - 100px);
-      width: calc(100% - 1rem);
-    }
-}
-  
-// Animations
-.slide-enter-from {
-  opacity: 0;
-  transform: translateX(30vw);
-}
-.slide-enter-active, .slide-leave-active {
-  transition: all .4s;
-}
-.slide-leave-to {
-  opacity: 0;
-  transform: translateX(-30vw);
-}
-
-.slide_reverse-enter-from {
-  opacity: 0;
-  transform: translateX(-30vw);
-}
-.slide_reverse-enter-active, .slide_reverse-leave-active {
-  transition: all .4s;
-}
-.slide_reverse-leave-to {
-  opacity: 0;
-  transform: translateX(30vw);
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-active, .fade-leave-active {
-  transition: all .5s ease;
-}
\ No newline at end of file
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 953a75985..fccad8420 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -18,7 +18,7 @@
     label {
       position: relative;
       background: $white;
-      height: 3rem;
+      min-height: 3rem;
       transition: all 150ms linear;
       border-radius: $border-radius-lg;
       border: 1px solid $gray-500;
@@ -37,23 +37,8 @@
           color: $danger;
         }
       }
-      &.button-loader {
-        padding: 0 40px 0 12px;
-        &:after {
-          content: url(../../assets/img/icons/button-spinner-blue.svg);
-          position: absolute;
-          right: 14px;
-          width: 16px;
-          height: 16px;
-          margin-left: 12px;
-          animation: rotation 1s infinite linear;
-          @keyframes rotation {
-            100% {
-              transform:rotate(360deg);
-            }
-          }
-        }
-      }
+      //Add spinner. Specify width and height
+      @include loader();
     }
   }
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index d47d79fa4..ab36e35c5 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -22,10 +22,3 @@ body {
       cursor: pointer;
     }
   }
-
-//Custom Mixins
-
-//Blue gradient background mixin
-@mixin blue-gradient {
-  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-}
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 37081a8a4..05af0defc 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -43,3 +43,15 @@ caption {
   line-height: 1.7;
   font-weight: 400;
 }
+
+
+// Font size
+.fs-5 {
+  line-height: 2;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+  line-height: 1.4;
+  font-weight: 500;
+}
\ No newline at end of file
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
new file mode 100644
index 000000000..ab4ba18a5
--- /dev/null
+++ b/src/styles/mixins/customMixins.scss
@@ -0,0 +1,69 @@
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}
+
+//Spinner
+//Choose color and position
+@mixin loader() {
+  .loader {
+    display: flex;
+    //Open an overlay to prevent page interaction
+    &:before {
+      content: '';
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 9999;
+      cursor: default;
+    }
+    //Spinner basics
+    &:after {
+      content: '';
+      mask: url(../../assets/img/icons/spinner.svg);
+      mask-size: cover;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      animation: rotation 1s infinite linear;
+      @keyframes rotation {
+        100% {
+          transform:rotate(360deg);
+        }
+      }
+    }
+    //Spinner position
+    &.center {
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+    &.right {
+      margin: 0 0 0 auto;
+    }
+    &.left {
+      margin: 0 auto 0 0;
+    }
+    //Spinner color
+    &:after { //Default spinner color (blue) if no other color is specified from the options below
+      background-color: $blue;
+    }
+    &.red:after {
+      background-color: $red;
+    }
+    &.green:after {
+      background-color: $green;
+    }
+    &.white:after {
+      background-color: $white;
+    }
+    &.black:after {
+      background-color: $black;
+    }
+  }
+}
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index b47d75f3c..811dcb133 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -51,6 +51,8 @@ export default {
     }
     svg {
       fill: $blue-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-danger {
@@ -59,6 +61,8 @@ export default {
     }
     svg {
       fill: $red-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-warning {
@@ -67,6 +71,8 @@ export default {
     }
     svg {
       fill: $yellow-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-success {
@@ -75,6 +81,8 @@ export default {
     }
     svg {
       fill: $green-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
 }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 2580b0f83..5bad044b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,36 +1,48 @@
 <template>
   <div class="d-flex flex-column w-100">
     <button
-      class="btn list-button d-flex align-items-center"
-      v-on:click="showLoader()"
-      v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]"
+    class="btn list-button d-flex align-items-center justify-content-between"
+    @click='displayComponent'
+    v-bind:class="[
+    this.isLoading ? 'button-loader' : 'not-loading',
+    this.isError ? 'error' : '',
+    ]"
     >
-      {{ this.buttonText }}
-    </button>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
+    {{ this.buttonText }}
+    <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>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
     buttonText: String,
     errorText: String,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: Number
   },
   data() {
     return {
-      isLoading: false,
-      isError: false,
+      display: false,
+      isError: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>
diff --git a/src/ux-components/loader/loader.spec.js b/src/ux-components/loader/loader.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/loader/loader.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
new file mode 100644
index 000000000..eeabeb604
--- /dev/null
+++ b/src/ux-components/loader/loader.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="loader"
+  v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+  v-bind:class="[this.loaderColor, this.loaderPosition]"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: "loader",
+  /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
+  props: {
+    sizeInRem: {
+      type: Number,
+      default: 1
+    },
+    /* Color options: red, green, blue, white, black */
+    loaderColor: {
+      type: String
+    },
+    /* Position options: center, right, left (OPTIONAL) */
+    loaderPosition: {
+      type: String
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@include loader();
+</style>
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index b6a02eca2..2976ce87e 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -1,28 +1,51 @@
 <template>
-<div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID" />
-    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2" v-on:click="showLoader()" v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]">{{ radioID }}</label>
-    <p class="small">{{ errorMessage }}</p>
+  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+    <input type="radio"
+    v-bind:id="radioID"
+    v-bind:name="groupName"
+    v-bind:value="radioID">
+    <label role="radio" tabindex="0" aria-checked="false"
+    v-bind:for="radioID"
+    class="mb-2 d-flex align-items-center justify-content-between p-2"
+    @click='displayComponent'
+    >{{radioID}}
+    <loader
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind: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", "ariaLabelBy", "radioID", "errorMessage"],
-    data() {
-        return {
-            isLoading: false,
-            isError: false,
-        };
-    },
-    methods: {
-        showLoader() {
-            this.isLoading = true;
-        },
+  name: "radioList",
+  props: [
+    "groupName",
+    "ariaLabelBy",
+    "radioID",
+    "errorMessage",
+    "loaderColor",
+    "loaderPosition",
+    "sizeInRem"
+
+  ],
+  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 d54265f0c..aba5fd140 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,12 +13,12 @@ module.exports = {
         @import "@/styles/ux-variables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @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-typography-styles.scss";
-        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },
diff --git a/vue.release.config.js b/vue.release.config.js
index f85e8ffa8..6cf78123c 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -12,12 +12,12 @@ module.exports = {
         @import "@/styles/ux-variables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @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-typography-styles.scss";
-        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },