diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..dfbc0ad 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -4,18 +4,75 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.criaBarraProgresso();
     }
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.monitoraBarraProgresso();
     }
 
     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
-        });
+        this.barraProgresso = document.querySelector(".progress-bar");
+        this.circulo1 = await waitElement(".progress-bar__circle1");
+        this.circulo2 = await waitElement(".progress-bar__circle2");
+        this.circulo3 = await waitElement(".progress-bar__circle3");
+    }
+
+    criaBarraProgresso() {
+        this.barraProgresso.innerHTML = `
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Meu Carrinho</p>
+                            <p class="progress-bar__circle1 active"></p>
+                            <p class="progress-bar__line1"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Dados Pessoais</p>
+                            <p class="progress-bar__circle2"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <ul class="progress-bar__container">
+                <li class="progress-bar__container-items">
+                    <div class="progress-bar__wrapper">
+                        <div class="progress-bar__container-item">
+                            <p class="progress-bar__text">Pagamento</p>
+                            <p class="progress-bar__circle3"></p>
+                            <p class="progress-bar__line2"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        `;
+    }
+
+    monitoraBarraProgresso() {
+        setInterval(() => {
+            if (window.location.hash == "#/cart") {
+                this.circulo1.classList.add("active");
+                this.circulo2.classList.remove("active");
+                this.circulo3.classList.remove("active");
+            } else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") {
+                this.circulo1.classList.remove("active");
+                this.circulo2.classList.add("active");
+                this.circulo3.classList.remove("active");
+            } else if (window.location.hash == "#/payment") {
+                this.circulo1.classList.remove("active");
+                this.circulo2.classList.remove("active");
+                this.circulo3.classList.add("active");
+            }
+        }, 100);
     }
 }