diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
new file mode 100644
index 000000000..e219f1a10
--- /dev/null
+++ b/src/constants/progress-bar-mapper.js
@@ -0,0 +1,26 @@
+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,
+    'insurance-company': 52,
+    'service-location': 60,
+    'schedule': 72,
+    'customer-details': 84,
+    'payment-method': 92,
+    'payment': 96,
+    'confirmation': 100,
+}
+
+export const getProgressBarPercentage = (page) => {
+    return pagePercentageMapper[page] || 0;
+}
\ No newline at end of file
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index c6cbb8727..092224551 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -6,6 +6,7 @@
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
         <menuModal />
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
+        <progressBar />
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -26,6 +27,7 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 
 // Constants
 const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@@ -62,6 +64,7 @@ export default {
     components: {
         alert,
         menuModal,
+        progressBar,
     },
     mounted() {
         // Check if alert event is on the bus
diff --git a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
new file mode 100644
index 000000000..3d6179f55
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
@@ -0,0 +1,84 @@
+import { shallowMount } from "@vue/test-utils";
+import progressBar from "./progress-bar";
+import store from "@/store";
+
+describe("progressBar", () => {
+    test("progress should be 0", () => {
+        // Arrange
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert        
+        expect(wrapper.vm.progress).toBe(0);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 4%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "vehicle",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(4);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 48%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "quote",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(48);
+        wrapper.unmount();
+    });
+});
+
+describe("progressBar", () => {
+    test("progress should be 100%", () => {
+        // Arrange
+        store.getters = {
+            applicationUser: {
+                lastPageVisited: "confirmation",
+            },
+        };
+
+        // Act
+        const wrapper = shallowMount(progressBar, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.progress).toBe(100);
+        wrapper.unmount();
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getProgress: jest.fn(),
+    },
+};
\ No newline at end of file
diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.vue b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
new file mode 100644
index 000000000..1d696d029
--- /dev/null
+++ b/src/fmg-components/funnel-header/progress-bar/progress-bar.vue
@@ -0,0 +1,60 @@
+<template>
+    <div id="progress-bar-container">
+        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%' " />
+    </div>
+</template>
+
+<script>
+import store from "@/store";
+import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
+
+export default {
+    name: "progressBar",
+    data() {
+        return {
+            progress: this.getProgress(),
+        };
+    },
+    methods: {
+        getProgress() {
+            var pageName = store.getters.applicationUser.lastPageVisited;
+            return getProgressBarPercentage(pageName);
+        },
+    },
+};
+</script>
+<style lang="scss">
+    #progress-bar-container {
+        padding: .75rem 0;
+        width: 100%;
+
+        progress {
+            height: 10px;
+            width:100%;
+
+            /* Firefox */
+            appearance: none;
+            background-color: $blue-100;
+            border: 0;
+            border-radius: $border-radius-pill;
+            box-shadow: $box-shadow-inset;
+
+            &::-moz-progress-bar {
+                background-color: $blue;
+                border-radius: $border-radius-pill;                
+            }
+
+            /* Webkit */
+            -webkit-appearance: none;
+            &::-webkit-progress-bar {
+                background-color: $blue-100;
+                border-radius: $border-radius-pill;
+                box-shadow: $box-shadow-inset;
+            }
+            &::-webkit-progress-value {
+                background-color: $blue;
+                border-radius: $border-radius-pill; 
+            }            
+        }
+    }
+</style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 6ef3d4749..4a20b4dbc 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -891,7 +891,7 @@ export default {
 
     &.funnel-header-wrapper,
     &.save-progress-popup {
-        display: block;
+        display: flex;
     }
 }