diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index dc1bc4a05..6262596fa 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -1,20 +1,20 @@
 const pagePercentageMapper = {
-    vehicle: 4,
-    "vehicle-damage": 16,
-    estimate: 28,
-    "service-zip": 32,
-    "vin-lookup": 32,
-    "license-plate-lookup": 32,
-    "address-lookup": 32,
-    "address-vehicles": 36,
-    "part-questions": 40,
-    "molding-questions": 40,
-    "vehicle-parts": 40,
-    "capability-questions": 40,
-    quote: 48,
+    vehicle: 3.57,
+    "vehicle-damage": 7.14,
+    estimate: 10.71,
+    "service-zip": 14.28,
+    "vin-lookup": 14.28,
+    "license-plate-lookup": 14.28,
+    "address-lookup": 14.28,
+    "address-vehicles": 17.85,
+    "part-questions": 21.42,
+    "molding-questions": 21.42,
+    "vehicle-parts": 21.42,
+    "capability-questions": 21.42,
+    quote: 25,
     "insurance-company": 52,
     "service-location": 60,
-    schedule: 72,
+    schedule: 70.5,
     "mobile-details": 76,
     "customer-details": 84,
     "payment-method": 92,
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index 0073baefe..e9807d8e1 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -28,40 +28,21 @@
                     <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
                 </div>
                 <div class="modal-body d-flex flex-column">
-                    <textLink
-                        linkType="newWindowLink"
-                        text="Terms of service"
-                        href="//www.safelite.com/terms-of-service"
-                        target="_blank" />
-                    <textLink
-                        linkType="newWindowLink"
-                        text="Your privacy choices"
-                        href="//www.safelite.com/privacy-center"
-                        target="_blank">
-                        <template v-slot:after-text>
-                            <img
-                                class="ccpa-icon"
-                                src="~@/assets/img/icons/ccpa-icon.svg"
-                                alt="Your privacy choices" />
-                        </template>
-                    </textLink>
-                    <textLink
-                        linkType="navigation"
-                        text="Cookie preferences"
-                        href="javascript:OneTrust.ToggleInfoDisplay();" />
-                    <textLink
-                        linkType="newWindowLink"
-                        text="Warranty"
-                        href="//www.safelite.com/national-lifetime-warranty"
-                        target="_blank" />
-                    <textLink
-                        linkType="newWindowLink"
-                        text="Notice at collection"
-                        href="https://www.safelite.com/ccpa-privacy-policy"
-                        target="_blank" />
-                </div>
-                <div class="modal-footer d-flex justify-content-start">
-                    &copy; {{ new Date().getFullYear() }} Safelite Group
+                    <div class="step-grid">
+                        <div class="bar-container">
+                            <progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
+                            <span class="dot1"></span>
+                            <span class="dot2"></span>
+                            <span class="dot3"></span>
+                            <span class="dot4"></span>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between">
+                            <div class="step-containers"><span class="step-number">Step 1 of 4</span><br><span class="step-name">Vehicle</span></div>
+                            <div class="step-containers"><span class="step-number">Step 2 of 4</span><br><span class="step-name">Quote</span></div>
+                            <div class="step-containers"><span class="step-number">Step 3 of 4</span><br><span class="step-name">Schedule</span></div>
+                            <div class="step-containers"><span class="step-number">Step 4 of 4</span><br><span class="step-name">Review</span></div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -69,8 +50,8 @@
 </template>
 
 <script>
-import textLink from "@/ux-components/text-link/text-link";
 import { Modal } from "bootstrap";
+import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
@@ -78,6 +59,7 @@ export default {
     data() {
         return {
             isActive: false,
+            barOrientation: true,
         };
     },
     methods: {
@@ -104,8 +86,8 @@ export default {
         },
     },
     components: {
-        textLink,
-    },
+        progressBar,
+    }
 };
 </script>
 
@@ -182,6 +164,8 @@ export default {
         }
         .modal-body {
             padding: 2rem;
+            display: flex;
+            align-items: flex-end;
             .ccpa-icon {
                 width: 2.0625rem;
                 height: 1rem;
@@ -190,6 +174,48 @@ export default {
             :deep(.navigation-link) {
                 margin-bottom: 1.5rem;
             }
+            .step-grid {
+                display: grid;
+                max-width: 140px;
+                grid-template-columns: 1fr 1fr;
+                .step-containers {
+                    line-height: 1;
+                }
+                .bar-container {
+                    width: 24px;
+                    position: relative;
+                    .dot1,
+                    .dot2,
+                    .dot3,
+                    .dot4 {
+                        position: absolute;
+                        width: 22px;
+                        height: 22px;
+                        background-color: $white;
+                        border-radius: 50rem;
+                        border: 1px solid $gray;
+                        left: 1px;
+                    }
+                    .dot1 {                        
+                        top: 1px;
+                    }
+                    .dot2 {
+                        top: 114px;
+                    }
+                    .dot3 {
+                        top: 227px;
+                    }
+                    .dot4 {
+                        top: 332px;
+                    }
+                }
+                .step-number {
+                    font-size: .75rem;
+                }
+                .step-name {
+                    font-size: 1.25rem;
+                }
+            }
         }
         .modal-fullscreen {
             width: 100vw;
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
index dc1cf4634..c5f01fad7 100644
--- a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="progress-bar-outer">
+    <div :class="barClass">
         <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
@@ -18,6 +18,10 @@ export default {
             type: String,
             required: true,
         },
+        vertical: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -45,10 +49,21 @@ export default {
     },
     computed: {
         progressStyle() {
-            return {
-                width: this.displayedProgress + "%",
-            };
+            if (this.vertical) {
+                return {
+                    height: this.displayedProgress + "%",
+                    width: "100%",
+                };
+            } else {
+                return {
+                    width: this.displayedProgress + "%",
+                    height: "100%",
+                };
+            }
         },
+        barClass() {
+            return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
+        }
     },
 };
 </script>
@@ -62,26 +77,36 @@ export default {
     margin-top: 0;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
     .progress-bar-inner {
-        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: width;
-        height: 5px;
+        height: 100%;
         background-color: $red;
         position: absolute;
         top: 0;
         left: 0;
         border-radius: 0;
     }
+}
 
-    progress {
-        height: 5px;
+.progress-bar-outer-vertical {
+    background: $blue-100;
+    width: 24px;
+    height: 356px;
+    position: relative;
+    border-radius: 0;
+    margin-top: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    overflow: hidden;
+    border-radius: 50rem;
+    .progress-bar-inner {
+        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        will-change: height !important;
         width: 100%;
-
-        /* Firefox */
-        appearance: none;
-        background-color: $gray-100;
-        border: 0;
-        border-radius: $border-radius-pill;
-        box-shadow: $box-shadow-inset;
+        background-color: $red;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 50rem;
     }
 }
 </style>