diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ba3ee4b..04b5231 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -1,98 +1,31 @@
-// import { waitElement } from "m3-utils";
-
-// export default class Footer {
-//     constructor() {
-//         this.init();
-//     }
-
-//     async init() {
-//         await this.selectors();
-//         // this.onUpdate();
-//     }
-
-//     async selectors() {
-//         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
-//         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
-//         this.checkoutVazio = await waitElement(".empty-cart-content");
-//     }
-
-//     onUpdate() {
-//         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
-//         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
-//         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
-//         let target = this.checkoutVazio;
-//         let config = { childList: true, attributes: true };
-//         let observer = new MutationObserver((mutations) => {
-//             mutations.forEach(function (mutation) {
-//                 console.log(mutation.type);
-//             });
-//         });
-
-//         observer.observe(target, config);
-//     }
-//     async addCarrossel() {
-//         const elemento = await waitElement("#my-element");
-//         $(elemento).slick({
-//             slidesToShow: 4,
-//             slidesToScroll: 1,
-//         });
-//     }
-// }
-
 import { waitElement } from "m3-utils";
 
 export default class Footer {
     constructor() {
         this.init();
-        this.requestShelf();
-        this.addCarrossel();
     }
 
     async init() {
+        this.list = await this.fetchPrateleira();
         await this.selectors();
         // this.onUpdate();
-        this.requestShelf();
+        this.createPrateleira();
+        this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
+        this.itensPrateleira();
+
         this.addCarrossel();
+
+        this.creditCardIconsHTML();
+        this.developedByIconsHTML();
     }
 
     async selectors() {
-        this.itensShelf = await waitElement(".footerCheckout__prateleira");
-        // this.itensShelf = await waitElement(".empty-cart-content")
-        //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
-        // this.checkoutVazio = await waitElement(".container-cart", {
-
-        // });
-    }
-
-    requestShelf() {
-        let prateleira = this.itensShelf;
-        prateleira.innerHTML = `
-        <p class="footerChekout__prateleira-title">Você também pode gostar</p>
-        <ul class="carrosel-ul"></ul>
-        `;
-        const api =
-            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
-        const prodUl = document.querySelector("carrosel-ul");
-        fetch(api)
-            .then((response) => response.json())
-            .then(function (data) {
-                return data.map(function (item) {
-                    let li = document.createElement("li");
-                    li.setAttribute("id", item.productId);
-                    li.innerHTML = `
-                    <img src="${item.items[0].images[0].imageUrl}" alt="${item.productName}" />
-                    <p class="product-name">${item.productName}</p>
-                    <div class="product-variation">${item.items
-                        .map((name) => {
-                            return `<a name="product-variationvariation" class="product-variationvariation">${name.name}</a>`;
-                        })
-                        .join("")}</div>
-                    <button class="show-product">Ver produto</button>
-                    `;
-                    prateleira.children[1].appendChild(li);
-                });
-            });
+        this.itensShelf = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1000,
+        });
+        this.creditCardIcons = await waitElement(".footerCheckout__stamps");
+        this.developedByIcons = await waitElement(".footerCheckout__developedBy");
     }
 
     onUpdate() {
@@ -100,8 +33,8 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
         let target = this.checkoutVazio;
-        let config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
+        letconfig = { childList: true, attributes: true };
+        letobserver = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
                 console.log(mutation.type);
             });
@@ -109,14 +42,95 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    createPrateleira() {
+        if (this.itensShelf) {
+            this.itensShelf.innerHTML = `
+<div class="footerCheckout__prateleira-title">
+<h2>Você também pode gostar:</h2>
+</div>
+<ul class="footerCheckout__carrossel-itens"></ul>
+            `;
+        }
+    }
+
+    async itensPrateleira() {
+        letstructure = "";
+
+        this.list.forEach((response) => {
+            const sku = response.skus.map((item) => `<li>${item}</li>`);
+
+            structure += `
+<li>
+<figure><img src ="${response.img}"/></figure>
+<figcaption>${response.name}</figcaption>
+<div><ul>${sku}</ul></div>
+<button type="button"><a href="${response.link}">Ver Produto</a></button>
+</li>
+            `;
+        });
+        this.prateleira.innerHTML = structure;
+    }
+
+    async fetchPrateleira() {
+        constapi =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        return fetch(api)
+            .then((response) => response.json())
+            .then((data) => {
+                const prodInfo = data.map((response) => ({
+                    name: response.productName,
+                    skus: response.items.map((item) => item.name),
+                    img: response.items[0].images[0].imageUrl,
+                    link: response.link,
+                }));
+                return prodInfo;
+            });
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement(".carrosel-ul");
+        const elemento = await waitElement(".footerCheckout__carrossel-itens");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
             arrows: true,
-            variableWidth: true,
             infinite: false,
         });
     }
+
+    creditCardIconsHTML() {
+        this.creditCardIcons.innerHTML = `
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
+<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
+<li><span class="footerCheckout__stamps__divider"></span></li>
+<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
+      `;
+    }
+
+    developedByIconsHTML() {
+        this.developedByIcons.innerHTML = `
+<li>
+<div class="by-vtex">
+<a href="https://vtex.com.br-pt/">
+<span>Powered By</span>
+</a>
+<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
+</div>
+</li>
+
+<li>
+<div class="by-m3">
+<a href="https://vtex.com.br-pt/">
+<span>Developed By</span>
+</a>
+<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
+</div>
+</li>
+      `;
+    }
 }
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 10fda88..6b42e07 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -1,216 +1,3 @@
-// // // import waitForEl from "../helpers/waitForEl";
-// import { waitElement } from "m3-utils";
-// Export default class Header {
-
-// constructor() {
-// this.init();
-
-// }
-
-// async init() {
-// await this.selectors();
-// this.progressBarHTML();
-// await this.progressBarProgress();
-// }
-
-// async selectors() {
-// this.header = await waitElement(".headerCheckout");
-// this.progressBar = await waitElement("#progressBar");
-// }
-
-// progressBarHTML() {
-// if (this.progressBar && window.innerWidth > 1024) {
-// // <img src="imgs/amex.png"/ this.progressBar.innerHTML
-// this.progressBar.innerHTML = '<ul>
-// <li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p> </div></div></li>
-// <li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
-// <li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
-// </ul>';
-
-// }
-// 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==="https://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==="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].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-1"
-//         ].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 === "https://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-1" ].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-1" ].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-1" ].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");
-//         }
-//     }
-// });
-//     });
-// }
-// }
-// }
-
-// import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
 export default class Header {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 516cbc7..854a918 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -855,3 +855,14 @@
         }
     }
 }
+
+@media (max-width: 1024px) {
+    .btn-place-order-wrapper{
+        max-width:100%;
+    }
+    .cart-links-bottom  a {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..c167b9d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,7 +1,6 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
-    color: $color-gray2;
+    border-top: 1px solid $color-black;
 
     &__wrapper {
         align-items: center;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 08abaf0..8ce11da 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,44 +1,11 @@
-// /* _header.scss */
-// .headerCheckout {
-//     .container {
-//         width: auto !important;
-//     }
-//     &__wrapper {
-//         align-items: center;
-//         display: flex;
-//         justify-content: space-between;
-//     }
-
-//     &__logo {
-//         img {
-//             height: 52px;
-//             width: auto;
-//         }
-//     }
-
-//     &__safeBuy {
-//         span {
-//             align-items: center;
-//             display: flex;
-//             text-transform: uppercase;
-//             font-family: $font-family;
-//             font-style: normal;
-//             font-weight: normal;
-//             font-size: 12px;
-//             line-height: 14px;
-//             color: $color-gray;
-//         }
-
-//         i {
-//             margin-right: 8px;
-//         }
-//     }
-// }
-
-/* _header.scss */
 .headerCheckout {
+    border-bottom: 1px solid $color-black;
+    height: 96px;
+    width: 100%;
+    display: flex;
+    align-items: center;
     .container {
-        width: auto !important;
+        width: 100%;
 
         #progressBar {
             width: 439px;
@@ -47,7 +14,7 @@
                 list-style-type: none;
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
+                justify-content: space-around;
                 margin: 0;
             }
 
@@ -143,7 +110,8 @@
     &__wrapper {
         align-items: center;
         display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
+        width: 100%;
     }
 
     &__logo {
@@ -164,7 +132,7 @@
             font-weight: 400;
             font-size: 12px;
             line-height: 16px;
-            color: $color-gray;
+            color: $color-black;
         }
 
         img {