diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
index d69dc3d40..53f4e5797 100644
--- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
+++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
@@ -82,5 +82,4 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
     const shopStatus = isGoodAvailability ? "Good" : "Low";
 
     return Promise.resolve(shopStatus);
-
 }
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 1f0d9688a..016477d9d 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -3,7 +3,7 @@
         <baseInputButton
             v-bind="$props"
             buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
-            v-model="selectedValue" >
+            v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@@ -15,9 +15,11 @@
                         buttonLabelSubCopy
                     }}</span>
                     <div
-                        class="availability-indicator"
-                        :class="availability === 'high' ? 'green' : 'red'">
-                        <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                        class="availability-indicator rounded-pill"
+                        :class="availabilityRating === 'Good' ? 'green' : 'red'">
+                        <div class="badge">&nbsp;</div>
+                        <span class="m-0 button-auxillary-copy">{{ availabilityRating == 'Good' ? "Appts available" : "Appts low" }}</span>
+                        <loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" />
                     </div>
                 </div>
                 <span
@@ -28,9 +30,7 @@
                 <span v-if="screenReaderOnlyText" class="sr-only">
                     {{ screenReaderOnlyText }}
                 </span>
-                <loader
-                    v-if="isLoaderDisplayed"
-                    :class="[this.loaderColor, this.loaderPosition]" />
+                <!-- <loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" /> -->
             </div>
         </baseInputButton>
     </transition>
@@ -53,14 +53,17 @@ export default {
     },
     mounted() {
         this.displayLoader();
-        console.log(this.additionalButtonData)
-    },
-    updated() {
-        this.isLoaderDisplayed = false
+        this.additionalButtonData.availabilityRatingCallback(this.modelValue)
+            .then((data) => {
+                this.availabilityRating = data;
+                //this.isLoaderDisplayed = false;
+            })       
     },
     data() {
         return {
             isLoaderDisplayed: false,
+            badgeText: "",
+            availabilityRating: ""
         };
     },
     methods: {
@@ -81,9 +84,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.loader {
-    position: absolute;
-}
+
 .list-button {
     outline: none;
     input[type="radio"],
@@ -154,30 +155,77 @@ export default {
         }
 
         .availability-indicator {
-            display: block;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            padding: 0.125rem 1.5rem;
-            gap: 0.25rem;
-            background: #e3f2ea;
-            border-radius: 4.5rem;
+            /* display: inline; */
+            background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
+            background-repeat: no-repeat;
+            /* background-size: 0.75rem; */
+            /* line-height: 1rem; */
+            background-position: left;
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            margin: 0 0.5rem;
+            left: 0;
+
+            .badge {
+                display: inline;
+                background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
+                background-repeat: no-repeat;
+                background-size: 0.75rem;
+                line-height: 1rem;
+                // height: 0.75rem !important;
+                // width: 0.75rem !important;
+                //width: 1rem;
+                //padding-left: 0.5rem;
+                // margin-right: 0.25rem !important;
+                // padding-right: 0rem;
+                // margin-left: 0rem;
+                background-position: center;
+            }
+
+
 
             .button-auxillary-copy {
+                box-sizing: border-box;
                 justify-content: right;
                 line-height: 1.25rem !important;
-                font-weight: 400;
+                font-weight: 500;
                 font-size: 0.75rem;
+                align-items: center;
+                //padding-right: 0.5rem;
+                // background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
+                // background-repeat: no-repeat;
+                // background-size: 0.75rem;
+                // background-position: left;
             }
 
-            .green {
+            // .button-auxillary-copy::before {
+            //     display: inline-flex;
+            //     //content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
+            //     height: 1.25rem;
+            //     padding: 4px;
+            //     width: 1.25rem;
+                
+            //     background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
+            //     background-repeat: no-repeat;
+            //     background-size: 0.75rem;
+            //     background-position: left;
+            // }
+
+            .loader {
+                display: none;
+                padding: 0.25rem 0.5rem;
+                //position: absolute;
+            }
+
+            &.green {
                 color: #006a36;
-                background: #e3f2ea;
+                background-color: #E3F2EA;
             }
 
-            .red {
+            &.red {
                 color: #ac160b;
-                background: #e3f2ea;
+                background-color: #FFE6E4;
             }
         }
     }
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index beef18e15..ddb04038e 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -19,7 +19,8 @@
                 textPosition="text-start"
                 v-model="selectedProviderNumber"
                 isRequired
-                validationRules="option-required" />
+                validationRules="option-required" 
+                :additionalButtonData="additionalButtonData"/>
             <textLink
                 v-show="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
@@ -104,6 +105,11 @@ export default {
         showMoreShopsLinkText() {
             return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
         },
+        additionalButtonData() {
+            return {
+                availabilityRatingCallback: getAvailabilityRating
+            }
+        }
     },
     methods: {
         loadInitialData(serviceZipCode) {
@@ -143,15 +149,12 @@ export default {
                 const state = shopProvider.address.state;
                 const zipCode = shopProvider.address.zipCode;
                 const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
-                const availabilityRatingCallback = getAvailabilityRating;
 
                 return {
                     buttonLabel: city,
                     buttonLabelSubCopy: `${distanceInMiles} mi`,
                     buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
-                    //buttonAuxillaryCopy: availabilityRating,
                     value: shopProvider.providerNumber,
-                    additionalButtonData: availabilityRatingCallback,
                 };
             });
 
@@ -163,9 +166,14 @@ export default {
                 });
             }
 
-            for (let i = 0; i < this.answers.length; i++) {
-                this.answers[i].buttonAuxillaryCopy = await this.answers[i].additionalButtonData(this.answers[i].value);
-            }
+            // for (let i = 0; i < this.answers.length; i++) {
+            //     const availabilityRating = await this.answers[i].getAvailabilityRating(
+            //         this.answers[i].value
+            //     );
+
+            //     this.answers[i].buttonAuxillaryCopy = availabilityRating ? "Appts available" : "Appts low";
+
+            // }
 
             await this.$nextTick();