diff --git a/src/iss-components/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue
index 44812a90..42b89ba3 100644
--- a/src/iss-components/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@@ -10,6 +10,7 @@
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
                 <div class="row-one">
+                    <div class="availability-indicator-spacer"></div>
                     <span
                         id="buttonLabelSpan"
                         class="m-0 button-label-copy"
@@ -21,20 +22,22 @@
                         class="m-0 button-label-sub-copy"
                         :class="textPosition">{{ buttonLabelSubCopy }}
                     </span>
-                    <div
-                        v-if="displayAvailabilityIndicators"
-                        id="availabilityIndicatorBlock"
-                        class="availability-indicator rounded-pill"
-                        :class="availabilityRatingClass">
+                    <div class="availability-indicator-container">
                         <div
-                            id="availabilityIndicator"
-                            class="d-flex align-items-center">
+                            v-if="displayAvailabilityIndicators"
+                            id="availabilityIndicatorBlock"
+                            class="availability-indicator rounded-pill"
+                            :class="availabilityRatingClass">
                             <div
-                                id="availabilityBadge"
-                                class="availability-badge"
-                                :class="availabilityRating == 'high' ? 'green' : 'orange'">
+                                id="availabilityIndicator"
+                                class="d-flex align-items-center">
+                                <div
+                                    id="availabilityBadge"
+                                    class="availability-badge"
+                                    :class="availabilityRatingClass">
+                                </div>
+                                <span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
                             </div>
-                            <span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
                         </div>
                     </div>
                 </div>
@@ -157,11 +160,23 @@ $heritage-checked-border-color: #0070d1;
             border-left: 1px solid $heritage-border-color;
         }
 
+        .availability-indicator-spacer {
+            width: 8rem;
+            margin-right: auto;
+        }
+
+        .availability-indicator-container {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-left: auto;
+            width: 8rem;
+        }
+
         .availability-indicator {
             background-repeat: no-repeat;
             display: flex;
             align-items: center;
-            margin-left: auto;
             padding: 0.125rem 0.5rem;
 
             .availability-badge {
@@ -179,6 +194,11 @@ $heritage-checked-border-color: #0070d1;
                 &.orange {
                     background-image: url($svg-shop-list-button-orange-availability);
                 }
+
+                &.gray {
+                    background-image: url(~@/assets/img/heritage-loader-blue.gif);
+                    background-size: contain;
+                }
             }
             .button-auxillary-copy {
                 box-sizing: border-box;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index b7b5fcee..92f3ea7e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -79,7 +79,7 @@
                         v-model="selectedProvider"
                         :serviceZipcode="zipCode"
                         :isDisplayed="isInshop"
-                        :selectAppointmentType="selectedAppointmentType"
+                        :selectedAppointmentType="selectedAppointmentType"
                         modalWidgetName="ChangeLocationModalWidget"
                         cmsWidgetName="ShopAddressWidget" />
                     <contentGroupModal
diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue
index db900b55..ce3e3deb 100644
--- a/src/layouts/service-location/shop-address/shop-address.vue
+++ b/src/layouts/service-location/shop-address/shop-address.vue
@@ -176,11 +176,11 @@ export default {
             const formattedEndDate = endDate.toISOString().split('T')[0];
 
             return {
-                displayAvailabilityIndicators: false,
+                displayAvailabilityIndicators: true,
                 availabilityRatingCallback: getAvailabilityRating,
                 startDate: formattedStartDate,
                 endDate: formattedEndDate,
-                shopAppointmentType: this.selectedAppointmentType
+                shopAppointmentType: "InshopOrDropoff"
             };
         },
         serviceZipPrompt() {