diff --git a/index.html b/index.html
index 1b8846b..3f4a7e0 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
+        <div class="menu-icon"><img src="/images/menu-icon.png" alt="Menú" /></div>
         <ul class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..a1f1db1 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -175,5 +175,73 @@ header {
 .btn-blue {
   background-color: #007bff;
 }
+
+@media screen and (min-width: 760px) and (max-width: 1024px) {
+
+  .navbar li {
+    width: 100%;
+    border-right: 1px solid #ffffff;
+  }
+
+  .articles-container {
+    gap: 30px;
+  }
+
+  .article {
+    width: 44%;
+  }
+
+}
+
+@media screen and (max-width: 760px) {
+
+  .navbar {
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .main-article {
+    flex-direction: column;
+  }
+
+  .main-article .image {
+      width: 100%;
+    }
+
+  .main-article .content {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .articles-container {
+    flex-direction: column;
+  }
+
+  .article {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 510px) {
+
+  .newspaper-name {
+    border-bottom: none;
+  }
+
+  .navbar {
+    display: none;
+  }
+
+  .menu-icon {
+    display: block;
+  }
   
-/* Write your CSS below */
+  .articles-container {
+    gap: 40px;
+  }
+}
\ No newline at end of file