diff --git a/src/assets/imgs/boleto.png b/src/assets/imgs/boleto.png
new file mode 100644
index 0000000..24a4a28
Binary files /dev/null and b/src/assets/imgs/boleto.png differ
diff --git a/src/assets/imgs/diners.png b/src/assets/imgs/diners.png
new file mode 100644
index 0000000..b0da9a2
Binary files /dev/null and b/src/assets/imgs/diners.png differ
diff --git a/src/assets/imgs/elo.png b/src/assets/imgs/elo.png
new file mode 100644
index 0000000..f1ee7d1
Binary files /dev/null and b/src/assets/imgs/elo.png differ
diff --git a/src/assets/imgs/hiper.png b/src/assets/imgs/hiper.png
new file mode 100644
index 0000000..e04d81d
Binary files /dev/null and b/src/assets/imgs/hiper.png differ
diff --git a/src/assets/imgs/m3-logo-footer.png b/src/assets/imgs/m3-logo-footer.png
new file mode 100644
index 0000000..3db8e70
Binary files /dev/null and b/src/assets/imgs/m3-logo-footer.png differ
diff --git a/src/assets/imgs/master.png b/src/assets/imgs/master.png
new file mode 100644
index 0000000..5fc293b
Binary files /dev/null and b/src/assets/imgs/master.png differ
diff --git a/src/assets/imgs/pagseguro.png b/src/assets/imgs/pagseguro.png
new file mode 100644
index 0000000..831e6b3
Binary files /dev/null and b/src/assets/imgs/pagseguro.png differ
diff --git a/src/assets/imgs/visa.png b/src/assets/imgs/visa.png
new file mode 100644
index 0000000..315a1c5
Binary files /dev/null and b/src/assets/imgs/visa.png differ
diff --git a/src/assets/imgs/vtex-logo.png b/src/assets/imgs/vtex-logo.png
new file mode 100644
index 0000000..662845c
Binary files /dev/null and b/src/assets/imgs/vtex-logo.png differ
diff --git a/src/assets/imgs/vtex-pci-200.png b/src/assets/imgs/vtex-pci-200.png
new file mode 100644
index 0000000..aa7fa05
Binary files /dev/null and b/src/assets/imgs/vtex-pci-200.png differ
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000..a9ea44a
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,5 @@
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..adb66da
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,12 @@
+import { FooterBottom } from './FooterBottom/FooterBottom';
+import styles from './Footer.module.scss';
+
+const Footer = () => {
+    return (
+        <footer className={styles['footer']}>
+            <FooterBottom />
+        </footer>
+    )
+}
+
+export { Footer }
diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss
new file mode 100644
index 0000000..efa8497
--- /dev/null
+++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss
@@ -0,0 +1,82 @@
+@import '../../../variaveis';
+
+.footer__bottom {
+    width: calc(100% - 200px);
+    height: 34px;
+    padding: 15px 100px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    background-color: $color-black;
+
+    &__paragrafo {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+
+        color: $color-white;
+    }
+
+
+    &__payments {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &__cards{
+            list-style: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &__card {
+                margin-right: 12px;
+
+                img {
+                    width: 35px;
+                }
+            }
+        }
+        &__divider {
+            width: 1px;
+            height: 24px;
+            background: $color-primary-400;
+            margin-right: 12px;
+        }
+    }
+
+    &__development {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &__logo{
+            margin-right: 13px;
+            text-decoration: none;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                font-family: 'Roboto';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 12px;
+                text-transform: capitalize;
+                color: $color-white;
+                margin-right: 13px;
+            }
+            img {
+                height: 16px;
+            }
+        }
+    }
+}
+
diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx
new file mode 100644
index 0000000..80ad2a7
--- /dev/null
+++ b/src/components/Footer/FooterBottom/FooterBottom.tsx
@@ -0,0 +1,66 @@
+import styles from './FooterBottom.module.scss'
+
+import boleto from '../../../assets/imgs/boleto.png';
+import diners from '../../../assets/imgs/diners.png';
+import elo from '../../../assets/imgs/elo.png';
+import hiper from '../../../assets/imgs/hiper.png';
+import master from '../../../assets/imgs/master.png';
+import pagseguro from '../../../assets/imgs/pagseguro.png';
+import visa from '../../../assets/imgs/visa.png';
+import vtex from '../../../assets/imgs/vtex-pci-200.png';
+import vtexLogo from '../../../assets/imgs/vtex-logo.png';
+import m3Logo from '../../../assets/imgs/m3-logo-footer.png';
+
+const FooterBottom = () => {
+    return (
+        <div className={styles['footer__bottom']}>
+            <p className={styles['footer__bottom__paragrafo']}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing <br/>
+                elit, sed do eiusmod tempor
+            </p>
+            <div className={styles['footer__bottom__payments']}>
+                <ul className={styles['footer__bottom__payments__cards']}>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={master} alt="Cartão Mastercard" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={visa} alt="Cartão Visa" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={diners} alt="Cartão American Express" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={elo} alt="Cartão Elo" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={hiper} alt="Cartão Hipercard" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={pagseguro} alt="PagSeguro" />
+                    </li>
+                    <li className={styles['footer__bottom__payments__cards__card']}>
+                        <img src={boleto} alt="Boleto" />
+                    </li>
+                </ul>
+                <div className={styles['footer__bottom__payments__divider']}></div>
+                <ul className={styles['footer__bottom__payments__security']}>
+                    <li className={styles['footer__bottom__payments-cards__card']}>
+                        <img src={vtex} alt="Vtex PCI - SECURITY" />
+                    </li>
+                </ul>
+            </div>
+            <div className={styles['footer__bottom__development']}>
+                <a className={styles['footer__bottom__development__logo']} href="https://vtex.com/" rel='noreferrer' target="_blank" title="M3">
+                    <span>Powered By</span>
+                    <img src={vtexLogo} alt='Logo Vtex'/>
+                </a>
+                <a className={styles['footer__bottom__development__logo']} href="http://m3ecommerce.com/" rel='noreferrer' target="_blank" title="VTEX">
+                    <span>Developed By</span>
+                    <img src={m3Logo} alt='Logo M3'/>
+                </a>
+            </div>
+        </div>
+    )
+}
+
+export { FooterBottom }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 195cbd9..b23138c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,31 +1,12 @@
-import logo from '../../assets/imgs/m3-acdemy-logo.png'
-import cart from '../../assets/imgs/cart-icon-header.png'
-
-import styles  from './Header.module.scss'
+import { HeaderMobile } from "./HeaderMobile/HeaderMobile"
+import { HeaderDesktop } from './HeaderDesktop/HeaderDesktop'
 
 const Header = () => {
     return (
-        <header className={styles['header']}>
-            <div className={styles['header-top']}>
-                <img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
-                <input placeholder='Buscar...' className={styles['header-top__input']}/>
-                <div className={styles['header-top__log-cart']}>
-                    <a href='/' className={styles['header-top__log']}>
-                        ENTRAR
-                    </a>
-                    <a href='/' className={styles['header-top__cart']}>
-                        <img src={cart} alt='Img do Carrinho' />
-                    </a>
-                </div>
-            </div>
-            <div className={styles['header-bottom']}>
-                <nav className={styles['header-bottom__list']}>
-                    <a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
-                    <a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
-                    <a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
-                </nav>
-            </div>
-        </header>
+        <>
+            <HeaderDesktop />
+            <HeaderMobile />
+        </>
     )
 }
 
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
similarity index 96%
rename from src/components/Header/Header.module.scss
rename to src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
index e1de6e6..bae1466 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss
@@ -1,4 +1,4 @@
-@import '../../_variaveis.scss';
+@import '../../../variaveis';
 
 .header {
     width: 100%;
@@ -39,7 +39,7 @@
             width: 25%;
             height: 12px;
 
-            background-image: url("../../assets/imgs/search-icon-header.png");
+            background-image: url("../../../assets/imgs/search-icon-header.png");
             background-size: 18px;
             background-repeat: no-repeat;
             background-position: bottom 50% right 16px;
diff --git a/src/components/Header/HeaderDesktop/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx
new file mode 100644
index 0000000..207210b
--- /dev/null
+++ b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx
@@ -0,0 +1,32 @@
+import logo from '../../../assets/imgs/m3-acdemy-logo.png'
+import cart from '../../../assets/imgs/cart-icon-header.png'
+
+import styles  from './HeaderDesktop.module.scss'
+
+const HeaderDesktop = () => {
+    return (
+        <header className={styles['header']}>
+            <div className={styles['header-top']}>
+                <img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
+                <input placeholder='Buscar...' className={styles['header-top__input']}/>
+                <div className={styles['header-top__log-cart']}>
+                    <a href='/' className={styles['header-top__log']}>
+                        ENTRAR
+                    </a>
+                    <a href='/' className={styles['header-top__cart']}>
+                        <img src={cart} alt='Img do Carrinho' />
+                    </a>
+                </div>
+            </div>
+            <div className={styles['header-bottom']}>
+                <nav className={styles['header-bottom__list']}>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
+                    <a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
+                </nav>
+            </div>
+        </header>
+    )
+}
+
+export { HeaderDesktop }
diff --git a/src/components/HeaderMobile/HeaderMobile.module.scss b/src/components/Header/HeaderMobile/HeaderMobile.module.scss
similarity index 92%
rename from src/components/HeaderMobile/HeaderMobile.module.scss
rename to src/components/Header/HeaderMobile/HeaderMobile.module.scss
index 28362f6..7cf0d44 100644
--- a/src/components/HeaderMobile/HeaderMobile.module.scss
+++ b/src/components/Header/HeaderMobile/HeaderMobile.module.scss
@@ -1,4 +1,4 @@
-@import '../../_variaveis.scss';
+@import '../../../variaveis';
 
 .header-mobile {
     display: none;
@@ -9,7 +9,6 @@
 
     @media  #{$mq-tablet}, #{$mq-mobile} {
         display: block;
-
     }
 
     &__top {
@@ -38,7 +37,7 @@
         height: 12px;
         margin-top: 25px;
 
-        background-image: url("../../assets/imgs/search-icon-header.png");
+        background-image: url("../../../assets/imgs/search-icon-header.png");
         background-size: 18px;
         background-repeat: no-repeat;
         background-position: bottom 50% right 16px;
diff --git a/src/components/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx
similarity index 83%
rename from src/components/HeaderMobile/HeaderMobile.tsx
rename to src/components/Header/HeaderMobile/HeaderMobile.tsx
index b3b5cfc..6ebe9e5 100644
--- a/src/components/HeaderMobile/HeaderMobile.tsx
+++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 
 import styles from './HeaderMobile.module.scss'
 
-import { MenuMobile } from '../MenuMobile/MenuMobile';
-import hamburger from '../../assets/imgs/menu-hamburger-header.png'
-import logo from '../../assets/imgs/m3-acdemy-logo.png'
-import cart from '../../assets/imgs/cart-icon-header.png'
+import { MenuMobile } from '../../MenuMobile/MenuMobile';
+import hamburger from '../../../assets/imgs/menu-hamburger-header.png'
+import logo from '../../../assets/imgs/m3-acdemy-logo.png'
+import cart from '../../../assets/imgs/cart-icon-header.png'
 
 const HeaderMobile = () => {
     const [menuIsVisible, setMenuIsVisible] = useState(false);
diff --git a/src/components/MenuMobile/MenuMobile.scss b/src/components/MenuMobile/MenuMobile.scss
index fcd559a..7210a59 100644
--- a/src/components/MenuMobile/MenuMobile.scss
+++ b/src/components/MenuMobile/MenuMobile.scss
@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../variaveis.scss';
 
 .container-menu {
     position: absolute;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 554d035..ff2b8e1 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
+import { Footer } from '../components/Footer/Footer';
 import { Header } from '../components/Header/Header';
-import { HeaderMobile } from '../components/HeaderMobile/HeaderMobile';
 
 import './Home.scss';
 
 function Home() {
     return (
-        < >
+        <>
             <Header />
-            <HeaderMobile />
+            <Footer />
         </>
     );
 }