diff --git a/desafio_01/assets/css/app.css b/desafio_01/assets/css/app.css
index 008bdaa..135e1b5 100644
--- a/desafio_01/assets/css/app.css
+++ b/desafio_01/assets/css/app.css
@@ -218,7 +218,7 @@ main {
   color: #e07b67;
 }
 .footer-paragraph a:hover {
-  color: #674ee2;
+  color: #f56f54;
 }
 
 /*# sourceMappingURL=app.css.map */
diff --git a/desafio_01/assets/scss/layout/_footer.scss b/desafio_01/assets/scss/layout/_footer.scss
index 8c0fbe1..2a3a8d9 100644
--- a/desafio_01/assets/scss/layout/_footer.scss
+++ b/desafio_01/assets/scss/layout/_footer.scss
@@ -29,7 +29,7 @@
             }
 
             &:hover {
-                color: #674ee2;
+                color: #f56f54;
             }
         }
     }
diff --git a/desafio_04/src/App.css b/desafio_04/src/App.css
index 91a9bba..dbc6fbc 100644
--- a/desafio_04/src/App.css
+++ b/desafio_04/src/App.css
@@ -28,9 +28,6 @@ html {
     margin: 0 auto;
 }
 
-.containerImageHero {
-    display: none;
-}
 
 @media (width >= 1450px) {
     body {
@@ -47,13 +44,4 @@ html {
         align-items: center;
         height: 100vh;
     }
-
-    .containerImageHero {
-        display: block;
-
-        img {
-            width: 50rem;
-
-        }
-    }
 }
\ No newline at end of file
diff --git a/desafio_04/src/App.jsx b/desafio_04/src/App.jsx
index fa9e20d..0f8ef57 100644
--- a/desafio_04/src/App.jsx
+++ b/desafio_04/src/App.jsx
@@ -1,16 +1,15 @@
 import './App.css';
+import ContainerImageHero from './Components/ContainerImageHero/ContainerImageHero';
 import Login from './Components/ContainerLogin/ContainerLogin';
-import imageHero from './assets/hero.svg';
+import Footer from './Components/Footer/Footer';
 
 function App() {
 
     return (
         <>
-            <div className='containerImageHero'>
-                <img src={imageHero} alt="" />
-            </div>
-
+            <ContainerImageHero />
             <Login />
+            <Footer />
         </>
     )
 }
diff --git a/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.css b/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.css
new file mode 100644
index 0000000..d798db5
--- /dev/null
+++ b/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.css
@@ -0,0 +1,14 @@
+.containerImageHero {
+    display: none;
+}
+
+@media (width >= 1450px) {
+    .containerImageHero {
+        display: block;
+    
+        img {
+            width: 50rem;
+    
+        }
+    }
+}
\ No newline at end of file
diff --git a/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.jsx b/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.jsx
new file mode 100644
index 0000000..3e2de56
--- /dev/null
+++ b/desafio_04/src/Components/ContainerImageHero/ContainerImageHero.jsx
@@ -0,0 +1,12 @@
+import './ContainerImageHero.css'
+import imageHero from '../../assets/hero.svg';
+
+const ContainerImageHero = () => {
+    return (
+        <div className='containerImageHero'>
+            <img src={imageHero} alt="" />
+        </div>
+    )
+}
+
+export default ContainerImageHero
\ No newline at end of file
diff --git a/desafio_04/src/Components/ContainerLogin/ContainerLogin.css b/desafio_04/src/Components/ContainerLogin/ContainerLogin.css
index 5fe9ee5..517b736 100644
--- a/desafio_04/src/Components/ContainerLogin/ContainerLogin.css
+++ b/desafio_04/src/Components/ContainerLogin/ContainerLogin.css
@@ -2,13 +2,13 @@
 
 .containerLogin {
     width: 90%;
-    margin: 10rem auto;
+    margin: 10rem auto 0;
     max-width: 40rem;
 }
 
 @media (width >= 768px) {
     .containerLogin {
-        margin: 7rem auto 4rem;
+        margin: 7rem auto 0;
     }
 }
 
diff --git a/desafio_04/src/Components/ContainerLogin/ContainerLogin.jsx b/desafio_04/src/Components/ContainerLogin/ContainerLogin.jsx
index 2bec770..ab58c51 100644
--- a/desafio_04/src/Components/ContainerLogin/ContainerLogin.jsx
+++ b/desafio_04/src/Components/ContainerLogin/ContainerLogin.jsx
@@ -5,7 +5,6 @@ import Button from '../Button/Button';
 
 const Login = () => {
 
-
     return (
         <div className='containerLogin'>
             <span className='welcomeTitle'>Bem-vindo de volta</span>
diff --git a/desafio_04/src/Components/Footer/Footer.css b/desafio_04/src/Components/Footer/Footer.css
new file mode 100644
index 0000000..22f7db4
--- /dev/null
+++ b/desafio_04/src/Components/Footer/Footer.css
@@ -0,0 +1,19 @@
+@import '../../App.css';
+
+.footer {
+    margin-top: 10rem;
+    padding: 5rem 3rem;
+    text-align: center;
+    background-color: var(--gray-30);
+
+    .footer-paragraph {
+        font-size: 1.4rem;
+        line-height: 2.4rem;
+        font-weight: 600;
+    }
+
+    a {
+        color: var(--primary-color);
+        transition: all .3s;
+    }
+}
\ No newline at end of file
diff --git a/desafio_04/src/Components/Footer/Footer.jsx b/desafio_04/src/Components/Footer/Footer.jsx
new file mode 100644
index 0000000..750b8b2
--- /dev/null
+++ b/desafio_04/src/Components/Footer/Footer.jsx
@@ -0,0 +1,15 @@
+import './Footer.css'
+
+const Footer = () => {
+    return (
+        <footer className='footer'>
+            <p className="footer-paragraph">
+                Desafio da comunidade
+                <a href="https://github.com/iuricode/desafios-frontend"> CodeLab</a>. <br /> Desenvolvido por
+                <a href="https://github.com/gabrielalencs"> Gabriel de Alencar</a>.
+            </p>
+        </footer>
+    )
+}
+
+export default Footer
\ No newline at end of file