diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..576ea43 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -4,6 +4,8 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.progressBar();
+        this.progressUpdate();
     }
 
     async init() {
@@ -12,10 +14,63 @@ export default class Header {
     }
 
     async selectors() {
+        this.progressBar = await waitElement(".progress-bar");
         this.item = await waitElement("#my-element", {
             //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
             timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+
+    progressBar() {
+        const progressBar = document.querySelector(".progress-bar");
+
+        progressBar.innerHTML = "";
+        let progressBarHTML = `
+    <div class="progresscontainer">
+        <div class="progresswrapper">
+            <div class="progress" id="progress"></div>
+            <div class="progresstext"><span>Meu Carrinho</span><div class="progresscircle1" ></div></div>
+            <div class="progresstext"><span>Dados Pessoais</span><div class="progresscircle2" ></div></div>
+            <div class="progresstext"><span>Pagamento</span><div class="progresscircle3"></div></div>
+        </div>
+        </div>`;
+
+        $(".progress-bar").prepend(progressBarHTML);
+    }
+
+    progressUpdate() {
+        this.caseUpdate();
+
+        window.addEventListener("hashchange", () => {
+            this.caseUpdate();
+        });
+    }
+
+    caseUpdate() {
+        const cart = document.querySelector(".progresscircle1");
+        const personalData = document.querySelector(".progresscircle2");
+        const payment = document.querySelector(".progresscircle3");
+
+        switch (location.hash) {
+            case "#/cart":
+                cart.classList.add("progressActive");
+                personalData.classList.remove("progressActive");
+                break;
+
+            case "#/email":
+            case "#/profile":
+            case "#/shipping":
+                personalData.classList.add("progressActive");
+                cart.classList.remove("progressActive");
+                payment.classList.remove("progressActive");
+                break;
+
+            case "#/payment":
+                payment.classList.add("progressActive");
+                personalData.classList.remove("progressActive");
+                cart.classList.remove("progressActive");
+                break;
+        }
+    }
 }