diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..218f3a1 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -6,16 +6,126 @@ export default class Header {
         this.init();
     }
 
-    async init() {
-        await this.selectors();
-        console.log(this.item);
+    async selectors() {
+        this.progressBar = await waitElement("#progressBar");
     }
 
-    async selectors() {
-        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
-        });
+    async init() {
+        await this.selectors();
+        this.progressBarHTML();
+        await this.progressBarDots();
+    }
+
+    progressBarHTML() {
+        if (this.progressBar && window.screen.width > 1024) {
+            this.progressBar.innerHTML = `<ol class="ProgressBar">
+                    <li class="ProgressBar-step stepOne">
+                        <span class="step-1">Meu Carrinho</span>
+                    </li>
+                    <li class="ProgressBar-step stepTwo">
+                        <span class="step-2">Dados Pessoais</span>
+                    </li>
+                    <li class="ProgressBar-step stepThree">
+                        <span class="step-3">Pagamento</span>
+                    </li>
+                </ol>
+            `;
+        } else {
+            this.progressBar.innerHTML = "";
+        }
+    }
+
+    async progressBarDots() {
+        if (this.progressBar && window.screen.width > 1024) {
+            const progressBarList = document.querySelectorAll("#progressBar ol li");
+            console.log(progressBarList);
+
+            progressBarList.forEach((li) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (li.children[0].classList.contains("step-1")) {
+                        li.children[0].classList.add("active");
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (li.children[0].classList.contains("step-2")) {
+                        li.children[0].classList.add("active");
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (li.children[0].classList.contains("step-3")) {
+                        li.children[0].classList.add("active");
+                    }
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (
+                            li.children[0].classList.contains("step-1") &&
+                            !li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.add("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-2") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-3") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        if (
+                            li.children[0].classList.contains("step-2") &&
+                            !li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.add("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-1") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-3") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                    } else if (window.location.hash == "#/payment") {
+                        if (
+                            li.children[0].classList.contains("step-3") &&
+                            !li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.add("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-1") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                        if (
+                            li.children[0].classList.contains("step-2") &&
+                            li.children[0].classList.contains("active")
+                        ) {
+                            li.children[0].classList.remove("active");
+                        }
+                    }
+                });
+            });
+        }
     }
 }