diff --git a/index.html b/index.html
index 1b8846b..8f938c8 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,9 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
+        <div class="menu-icon">
+        <img src="/images/menu-icon.png" alt="Menu" />
+      </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..a827c49 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,67 @@ header {
 }
   
 /* Write your CSS below */
+
+@media (max-width: 760px){
+  .navbar {
+    flex-direction: column;
+    align-items: stretch;
+
+  }
+  .navbar li {
+    width: 100%;
+    border-bottom: 1px solid;
+    border-right: none;
+  }
+  .main-article {
+    flex-direction: column;
+  }
+  .main-article .image,.main-article .content {
+    width: 100%;
+  }
+  .main-article .content h2 {
+    margin-top: 10px;
+  }
+  .articles-container {
+    flex-direction: column;
+  } 
+  .articles-container .article {
+    width: 100%;
+  }
+}
+
+@media (min-width: 761px) and (max-width: 1024px) {
+  .navbar {
+    justify-content: space-between;
+  }
+  .navbar li {
+    flex: 1; 
+    flex-grow: 1;
+  }
+  .articles-container {
+    justify-content: space-between;
+  }
+
+  .articles-container .article {
+width: 46%;
+margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+ .navbar {
+  display: none;
+ }
+ .menu-icon {
+  padding: 10px;
+ }
+ .newspaper-name {
+  border: none;
+ }
+}
+
+@media (min-width: 480px) {
+  .menu-icon {
+    display: none;
+  }
+}
\ No newline at end of file