diff --git a/index.html b/index.html
index 1b8846b..0821da5 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>
@@ -71,7 +74,6 @@ <h2>Article 3</h2>
       </section>
     </main>
 
-    
     <!-- DO NOT REMOVE - viewport width label -->
     <span class="viewport-dimensions"></span>
     <!-- DO NOT REMOVE - A simple JS script used to display the viewport width label -->
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..5f0b024 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,106 @@ header {
 }
   
 /* Write your CSS below */
+@media (max-width: 760px) {
+  .navbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .main-article {
+    flex-direction: column;
+    margin: 20px 0;
+  }
+
+  .main-article .image {
+    width: 100%;
+    padding: 10px 0;
+    margin-bottom: 20px;
+  }
+  
+  .main-article .content {
+    width: 100%;
+    padding: 10px 0;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    padding: 20px 0;
+  }
+
+  .article {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+}
+
+@media (min-width: 761px) and (max-width: 1024px) {
+  .navbar {
+    justify-content: space-between;
+  }
+
+  .navbar li {
+    flex: 1;
+    width: auto;
+  }
+
+  .main-article {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .main-article .image {
+    width: 50%;
+  }
+
+  .main-article .content {
+    width: 50%;
+  }
+
+  .articles-container {
+    justify-content: space-between;
+  }
+
+  .article {
+    width: 48%;
+    margin-bottom: 20px;
+  }
+
+  .article:nth-child(3) {
+    width: 48%;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar {
+    display: none;
+  }
+  
+  .newspaper-name {
+    border: none
+  }
+
+  .menu-icon {
+    display: block;
+    padding: 15px;
+    text-align: center;
+    background-color: #333;
+  }
+
+  .menu-icon img {
+    width: 30px;
+    height: auto;
+  }
+}
+
+@media (min-width: 481px) {
+  .menu-icon {
+    display: none;
+  }
+}
\ No newline at end of file