diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..4a2be30 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,14 +8,235 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarHTML();
+        await this.progressBarProgress();
     }
 
     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.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.header = await waitElement(".headerCheckout");
+        this.progressBar = await waitElement("#progressBar");
+    }
+    progressBarHTML() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+    <div class="container-bar">
+        <div class="progress-container">
+        <div class="progress" id="progress"></div>
+        <div class="circle active">
+            <p>MeuCarrinho</p>
+        </div>
+        <div class="circle">
+            <p>DadosPessoais</p>
+        </div>
+        <div class="circle">
+            <p>Pagamento</p>
+        </div>
+        </div>
+    </div>`;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+    async progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarLista = document.querySelectorAll("#progressBar ul li");
+            progressBarLista.forEach((li) => {
+                if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
+                            "active"
+                        );
+                    }
+
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "http://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href == "http://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href === "http://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
+                            "active"
+                        );
+                    }
+
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "http://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
+                            "active"
+                        );
+                    }
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.remove("active");
+                            }
+                        }
+
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.add("active");
+                        }
+
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        } else if (window.location.hash == "#/payment") {
+                            if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                                if (
+                                    li.children[0].children[0].children[
+                                        "progress-bar-circle-1"
+                                    ].classList.contains("active")
+                                ) {
+                                    li.children[0].children[0].children[
+                                        "progress-bar-circle-3"
+                                    ].classList.remove("active");
+                                }
+                            }
+                            if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                                if (
+                                    li.children[0].children[0].children[
+                                        "progress-bar-circle-2"
+                                    ].classList.contains("active")
+                                ) {
+                                    li.children[0].children[0].children[
+                                        "progress-bar-circle-2"
+                                    ].classList.remove("active");
+                                }
+                            }
+
+                            if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.add("active");
+                            }
+                        }
+                    }
+                });
+            });
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..df59fce 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,34 +1,94 @@
 /* _header.scss */
 .headerCheckout {
+    width: 1280px;
+   border-bottom: 1px solid $color-black;
     .container {
-        width: auto !important;
+        width: 1280px;
     }
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        padding-top: 30px;
     }
-
     &__logo {
+        margin-left: 131px;
         img {
-            height: 52px;
-            width: auto;
+            height: 38px;
+            width:156px;
         }
     }
 
+    .progress-container{
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        margin-bottom: 20px;
+        margin-top: 20px;
+        max-width: 100%;
+        width: 360px;
+      }
+
+
+      .progress-container::before{
+        content: '';
+        background-color: $color-black;
+        position:absolute;
+        top: 50%;
+        /*left: 0;*/
+        transform: translateY(-50%);
+        height: 1px;
+        width: 100.01%;
+        z-index: -1;
+        transition: 0.4s ease;
+      }
+
+      .progress{
+        background-color: $color-black;
+        position:absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        height: 4px;
+        width: 0%;
+        z-index: -1;
+        transition: 0.4s ease;
+      }
+
+      p{
+        margin-bottom: 60px;
+      }
+
+      .circle{
+        background-color: #fff;
+        color: #999;
+        border-radius: 50%;
+        height: 12px;
+        width: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1.5px solid $color-black;
+        transition: 0.4 ease;
+      }
+
+      .circle.active{
+        background-color: $color-black;
+
+      }
+
+
     &__safeBuy {
+        display: flex;
+        margin-right: 131px;
+        gap: 5px;
         span {
-            align-items: center;
-            display: flex;
-            text-transform: uppercase;
+            color: $color-black;
+            font-weight: 400;
             font-family: $font-family;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 14px;
-            color: $color-gray;
+            text-transform: uppercase;
+            margin-top: 8px;
         }
-
         i {
             margin-right: 8px;
         }