diff --git a/src/layouts/schedule/mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue b/src/layouts/schedule/mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue
new file mode 100644
index 000000000..7b560d4ba
--- /dev/null
+++ b/src/layouts/schedule/mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue
@@ -0,0 +1,141 @@
+<template>
+    <div
+        class="mobile-fee-waiver-alert-container py-3 px-4 my-2"
+        :class="[isExpanded ? 'expanded' : '']">
+        <div
+            class="mobile-fee-waiver-header d-flex align-items-center justify-content-between"
+            @click="toggleIsExpanded">
+            <span>
+                {{ headerText }}
+            </span>
+        </div>
+        <div class="mobile-fee-waiver-body">
+            <div class="mobile-fee-waiver-copy">
+                {{ subheaderText }}
+            </div>
+            <div class="mobile-fee-waiver-price-comp">
+                <span class="mobile-fee-waiver-strikethrough-price">
+                    {{ priceStrikethroughText }}
+                </span>
+                <span class="mobile-fee-waiver-free-price">{{ freePriceText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "mobile-fee-waiver-alert",
+    props: {
+        cmsWidgetName: String,
+    },
+    data() {
+        return {
+            isExpanded: true,
+        };
+    },
+    computed: {
+        headerText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        subheaderText() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        priceStrikethroughText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        freePriceText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText2");
+        },
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.setIsExpanded(!this.isExpanded);
+        },
+        setIsExpanded(newVal) {
+            this.isExpanded = newVal;
+        },
+    },
+    components: {},
+};
+</script>
+
+<style lang="scss">
+.mobile-fee-waiver-alert-container {
+    background: $green-100;
+    border-radius: 0.25em;
+    border: 1px solid $green-400;
+
+    .mobile-fee-waiver-header {
+        font-weight: bold;
+
+        span {
+            flex-grow: 1;
+            color: $black;
+        }
+
+        &::before {
+            content: "";
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
+            width: 1rem;
+            height: 1rem;
+            display: inline-block;
+            margin-right: 0.5rem;
+        }
+
+        &::after {
+            content: "";
+            transition: all 0.5s ease;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 9'%3E%3Cpath d='M7.99282 0.117702C7.75716 0.116049 7.53044 0.207797 7.3623 0.37286L0.255553 7.46878C0.0862976 7.63796 -0.00878906 7.86742 -0.00878906 8.10667C-0.00878906 8.34593 0.0862976 8.57539 0.255553 8.74457C0.424808 8.91374 0.654368 9.00879 0.893731 9.00879C1.13309 9.00879 1.36265 8.91374 1.53191 8.74457L7.99282 2.27378L14.4614 8.74457C14.6307 8.91205 14.8595 9.00547 15.0977 9.00428C15.3359 9.00308 15.5638 8.90737 15.7314 8.73819C15.8989 8.56901 15.9924 8.34022 15.9912 8.10216C15.99 7.8641 15.8942 7.63627 15.725 7.46878L8.6259 0.377963C8.45765 0.21088 8.22999 0.117289 7.99282 0.117702Z' fill='%230C7E47'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            width: 16px;
+            height: 16px;
+            display: inline-flex;
+            position: relative;
+        }
+    }
+
+    .mobile-fee-waiver-body {
+        transition: all 500ms ease-out;
+        visibility: hidden;
+        overflow: hidden;
+        max-height: 0;
+
+        .mobile-fee-waiver-price-comp {
+            margin-top: 0.5em;
+
+            .mobile-fee-waiver-strikethrough-price {
+                font-size: smaller;
+                text-decoration: line-through;
+            }
+
+            .mobile-fee-waiver-free-price {
+                display: inline-block;
+                font-weight: bolder;
+                border-radius: 1em;
+                background-color: $green-300;
+                padding: 0 0.5em;
+                margin-inline-start: 0.5em;
+            }
+        }
+    }
+
+    &.expanded {
+        .mobile-fee-waiver-header {
+            &::after {
+                transform: rotate(180deg);
+            }
+        }
+
+        .mobile-fee-waiver-body {
+            visibility: visible;
+            max-height: none;
+
+            border-top: 1px solid $green-400;
+            padding-top: 0.5em;
+            margin-top: 0.5em;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index efecfc34f..a97f0f125 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -5,12 +5,7 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <alert
-                        ref="alertMobileFeeFree"
-                        class="mb-5"
-                        cmsWidgetName="AlertMobileFeeFreeWidget"
-                        v-if="showMobileFreeAlert"
-                        alertClass="alert-success" />
+                    <mobileFeeWaiverAlert cmsWidgetName="MobileFeeFreeDropdownWidget" />
                 </div>
             </div>
             <div class="row appointment-type">
@@ -195,6 +190,7 @@ import datePicker from "@/digital-components/date-picker/date-picker";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 import textBlock from "@/digital-components/text-block/text-block";
+import mobileFeeWaiverAlert from "./mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -1825,6 +1821,7 @@ export default {
         contentGroupModal,
         durationTextBlock,
         shopLocation,
+        mobileFeeWaiverAlert,
     },
 };
 </script>