diff --git a/css/estilos.css b/css/estilos.css
@@ -191,7 +191,7 @@ p {
 }
 
 span {
-    font-size: 12px;
+    font-size: 40px;
 }
 
 a {
@@ -680,4 +680,69 @@ footer {
     padding: 20px;
     border-radius: 10px;
     font-size: 2em;
-}
+}
+
+@media(max-width: 780px) {
+    .container{
+        flex-direction: column;
+        margin-top: 70px;
+    }
+
+    .services{
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .service{
+        width: 100%;
+    }
+}
+
+header .Nivia {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+    background-color: #282a36;
+    align-items: center;
+    color: #50fa7b;
+    position: fixed;
+    width: 100%;
+  }
+
+  header a {
+    text-decoration: none;
+    color: #50fa7b;
+    padding: 1rem;
+  }
+
+  header a:hover {
+    background-color: #44475a;
+  }
+
+  header span {
+    display: none;
+  }
+
+  @media(max-width: 576px) {
+    nav {
+      display: none;
+    }
+
+    header span {
+      display: block;
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
+    }
+
+    nav.mobile {
+      display: flex;
+      flex-direction: column;
+    }
+
+    header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+  }
diff --git a/index.html b/index.html
@@ -8,10 +8,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/estilos.css">
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
 </head>
 
 <body>
-    <header>
+    <header class="Nivia">
         <div class="wauan">
             <img src="imagens/logo-form.png" alt="Logo">
         </div>
@@ -22,6 +24,7 @@
             <a href="mailto:style.lookfy@gmail.com" target="_blank">Contato</a>
             <a href="entrar.html" class="btn-link btn-login">Entrar</a>
         </nav>
+        <span onclick="toggleNav()"><ion-icon name="menu-outline"></ion-icon></span>
     </header>
 
     <main>

diff --git a/js/entrar.js b/js/entrar.js
@@ -8,4 +8,9 @@ signUpButton.addEventListener('click', () => {
 
 signInButton.addEventListener('click', () => {
   container.classList.remove("right-panel-active");
-});
+});
+
+function toggleNav(){
+  const nav =  document.querySelector('nav');
+  nav.classList.toggle('mobile');
+}