diff --git a/index.html b/index.html
index 1b8846b..5305c40 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,10 @@ <h1 class="newspaper-name">Ironhack News</h1>
           <li><a href="#">Sports</a></li>
         </ul>
       </nav>
+      <!-- New elemnt for the menu -->
+      <div class="menu-icon">
+    <img src="images/menu-icon.png" alt="Menu icon" />
+  </div>
     </header>
 
     <main>
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..7635238 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,106 @@ header {
 }
   
 /* Write your CSS below */
+
+/* Break point for  Mobile Screens (width < 760px) */
+@media screen and (max-width: 760px) {
+  .navbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid white;
+  }
+  .main-article {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+ .main-article .image {
+    width: 100%;              
+    padding: 0;               
+    margin-bottom: 15px;      
+  }
+  .main-article .content {
+    width: 100%;              
+    padding: 0;               
+    text-align: center;       
+  }
+  .articles-container {
+    flex-direction: column;   
+    align-items: center;
+    justify-content: center;
+  }
+  .article {
+    width: 100%;              
+    margin-bottom: 20px;      
+  }
+}
+
+/* Break point for Small Screens (width > 760px and width < 1024px) */
+
+@media screen and (min-width: 761px) and (max-width: 1024px) {
+  .navbar li {
+    display: flex;
+    text-align: center;
+    justify-content:center;
+    width: 100%;
+  }
+  .main-article {
+    flex-direction: row;       
+    width: 100%;               
+    margin: 0 auto;
+  }
+
+  .main-article .image {
+    width: 50%;                
+    padding: 0 10px;
+  }
+
+  .main-article .content {
+    width: 50%;                
+    padding: 0 10px;
+  }
+
+  /* Articles in two columns */
+  .articles-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* Always two columns = */
+    gap: 20px;  
+    width: 100%;               
+  }
+
+  .article {
+    width: 100%; 
+    box-sizing: border-box;
+  }
+}
+
+/* Style menu icon */
+.menu-icon {
+  display: none; 
+  padding: 10px;
+}
+
+.menu-icon img {
+  width: 30px;
+  height: auto;
+}
+
+/* Break point for Small Mobile Screens (width < 480px) */
+@media screen and (max-width: 480px) {
+  .navbar {
+    display: none; 
+  }
+  .newspaper-name {
+    border: none;
+  }
+  .menu-icon {
+    display: block;
+  }
+}
+
+