diff --git a/index.html b/index.html
index 1b8846b..bbf0df1 100644
--- a/index.html
+++ b/index.html
@@ -1,80 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ironhack News</title>
-    <link rel="stylesheet" href="styles/style.css" />
-  </head>
-  <body>
-    <header>
-      <h1 class="newspaper-name">Ironhack News</h1>
-      <nav>
-        <ul class="navbar">
-          <li><a href="#">Home</a></li>
-          <li><a href="#">News</a></li>
-          <li><a href="#">Tech</a></li>
-          <li><a href="#">Sports</a></li>
-        </ul>
-      </nav>
-    </header>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Ironhack News</title>
+  <link rel="stylesheet" href="styles/style.css" />
+</head>
+<body>
 
-    <main>
-      <article class="main-article">
-        <div class="image">
-          <img src="/images/main-article.jpg" alt="Article 1 Image" />
-        </div>
-        <div class="content">
-          <h2>Main Article</h2>
-          <p>
-            This is the first article's content. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus
-            enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt
-            ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim
-            sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros
-            sit amet ipsum scelerisque interdum. Curabitur justo nibh,
-          </p>
-          <button class="btn btn-blue">Read more</button>
-        </div>
+  <header class="navbar">
+    <h1 class="brand">Ironhack News</h1>
+    <nav class="nav">
+      <ul class="nav-list">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">News</a></li>
+        <li><a href="#">Tech</a></li>
+        <li><a href="#">Sports</a></li>
+      </ul>
+    </nav>
+    <img class="menu-icon" src="images/menu-icon.png" alt="menu" />
+  </header>
+
+  <main>
+    <section class="main-article">
+      <div class="image">
+        <img src="images/main-article.jpg" alt="Main article" />
+      </div>
+      <div class="content">
+        <h2>Main Article</h2>
+        <p>This is the first article’s content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac lacus nibh, nec faucibus enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt ipsum. Nam luctus tortor, elementum in elit nec, fermentum dignissim sapien.</p>
+        <a class="btn btn-blue" href="#">Read more</a>
+      </div>
+    </section>
+
+    <section class="grid"> 
+      <article class="card">
+        <img src="images/article-1.jpg" alt="Article 1" />
+        <h3>Article 1</h3>
+        <p>This is the second article content. Lorem ipsum dolor sit amet…</p>
+        <a class="btn btn-blue" href="#">Read more</a>
       </article>
 
-      <section class="articles-container">
-        <article class="article">
-          <img src="images/article-1.jpg" alt="Article 1 Image" />
-          <h2>Article 1</h2>
-          <p>
-            This is the second article's content. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </p>
-          <button class="btn btn-blue">Read more</button>
-        </article>
+      <article class="card">
+        <img src="images/article-2.jpg" alt="Article 2" />
+        <h3>Article 2</h3>
+        <p>This is the third article content. Lorem ipsum dolor sit amet…</p>
+        <a class="btn btn-blue" href="#">Read more</a>
+      </article>
 
-        <article class="article">
-          <img src="images/article-2.jpg" alt="Article 2 Image" />
-          <h2>Article 2</h2>
-          <p>
-            This is the third article's content. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </p>
-          <button class="btn btn-blue">Read more</button>
-        </article>
+      <article class="card">
+        <img src="images/article-3.jpg" alt="Article 3" />
+        <h3>Article 3</h3>
+        <p>This is the fourth article content. Lorem ipsum dolor sit amet…</p>
+        <a class="btn btn-blue" href="#">Read more</a>
+      </article>
+    </section>
+  </main>
 
-        <article class="article">
-          <img src="images/article-3.jpg" alt="Article 3 Image" />
-          <h2>Article 3</h2>
-          <p>
-            This is the third article's content. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit.
-          </p>
-          <button class="btn btn-blue">Read more</button>
-        </article>
-      </section>
-    </main>
+  <footer class="footer">© Ironhack News</footer>
 
-    
-    <!-- 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 -->
-    <script src="javascript/width-label.js"></script>
-  </body>
-</html>
+  <div id="vw-badge"></div>
+  <script>
+    (function(){var b=document.getElementById('vw-badge');function u(){b.textContent='W: '+window.innerWidth+'px'};window.addEventListener('resize',u);window.addEventListener('DOMContentLoaded',u);u();})();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..3bd8fea 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,179 +1,228 @@
-/* CSS RESET - do not remove */
-/* Reset default browser styles and provide a consistent starting point */
-html {
-  box-sizing: border-box;
-  font-size: 16px;
-}
-  
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-  
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+* {
   margin: 0;
   padding: 0;
-  font-weight: lighter;
-}
-
-
-/*  DO NOT REMOVE - Styling for the label showing the viewport width */
-.viewport-dimensions {
-  position: fixed;
-  top: 0;
-  right: 0;
-  background-color: #ee4545;
-  color: #fff;
-  font-weight: 500;
-  padding: 5px 8px;
-  font-size: 14px;
+  box-sizing: border-box;
 }
-  
-/* STYLES */
 
-/*  Fonts */
 body {
-  font-family: "Helvetica", sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  line-height: 1.5;
+  background: #f5f5f5;
+  color: #333;
 }
 
-/* Basic styles */
-main {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 10px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
 }
 
-/*  Font sizes */
-p {
-  font-size: 1em;
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
-h1 {
-  font-size: 3em;
+.btn {
+  display: inline-block;
+  padding: 10px 14px;
+  border-radius: 6px;
+  background: #2d6cdf;
+  color: #fff;
+  text-decoration: none;
+  margin-top: 10px;
 }
 
-h2 {
-  font-size: 2em;
-  margin-bottom: 1em;
-}
 
-h3 {
-  font-size: 1.5em;
-}
-
-/* Header and Navbar */
-header {
-  background-color: #333;
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #222;
   color: #fff;
-  text-align: center;
+  padding: 1rem 20px; 
 }
 
-.newspaper-name {
-  font-size: 24px;
-  padding: 10px;
-  border-bottom: 1px solid white;
+.brand {
+  font-weight: 700;
+  padding: 0; 
 }
 
-.navbar {
-  list-style-type: none;
-  width: 100%;
+.nav-list {
   display: flex;
-  justify-content: flex-start;
+  list-style: none;
+  gap: 2rem;
 }
 
-.navbar li {
-  width: 130px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid #ffffff;
+.nav-list li a {
+  padding: 12px 0; 
+  color: #fff;
+  background: transparent;
+  border: none;
 }
 
-.navbar li:last-child {
-  border-right: none;
+.menu-icon {
+  display: none; 
 }
 
-.navbar a {
-  text-decoration: none;
-  color: #fff;
-  font-weight: bold;
+main {
+  max-width: 1100px;
+  margin: 20px auto;
+  padding: 0 20px;
 }
 
-/* Articles */
 .main-article {
-  margin: 20px;
-  padding: 20px;
-  border: 1px solid #ccc;
-  display: flex;
+  background: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,.06);
+  margin-bottom: 20px; 
 }
 
 .main-article img {
-  width: 100%;
-  height: auto;
+  border-radius: 6px;
+  margin-bottom: 15px; 
 }
 
-.main-article .image {
-  width: 50%;
-  padding: 0 20px;
-  height: auto;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); 
+  gap: 20px;
 }
 
-.main-article .content {
-  width: 50%;
-  padding: 0 20px;
-  height: auto;
+.card {
+  background: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,.06);
 }
 
-.articles-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  padding: 20px;
+.card img {
+  border-radius: 6px;
+  margin-bottom: 10px;
 }
 
-.article {
-  width: 29%;
-  padding: 20px;
-  border: 1px solid #ccc;
+.card h3 {
+  margin: 12px 0 6px;
 }
 
-.article img {
-  width: 100%;
-  height: auto;
+.footer {
+  background: #222;
+  color: #fff;
+  text-align: center;
+  padding: 15px;
+  margin-top: 40px;
 }
 
-.article h2 {
-  font-size: 20px;
-  margin-top: 10px;
-}
 
-.article p {
-  margin-top: 10px;
-}
 
-.btn {
-  background-color: #333;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  font-size: 1em;
-  font-weight: bold;
-  text-decoration: none;
-  margin-top: 30px;
+
+@media (max-width: 1024px) {
+  main {
+    max-width: 900px; 
+  }
+
+ 
+  .main-article {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .main-article .image {
+    flex: 1; 
+  }
+
+  .main-article .content {
+    flex: 1; 
+  }
+
+  .main-article img {
+    margin-bottom: 0;
+  }
+
+  .grid {
+    grid-template-columns: repeat(2, 1fr); 
+  }
 }
 
-.btn:hover {
-  background-color: #555;
+
+
+
+@media (max-width: 760px) {
+  main {
+    max-width: 520px; 
+  }
+
+
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px 16px; 
+  }
+
+  .nav {
+    width: 100%; 
+  }
+
+  .nav-list {
+    flex-direction: column; 
+    width: 100%;
+    gap: 0;
+  }
+
+  .nav-list li {
+    list-style: none; 
+  }
+
+  .nav-list li a {
+    display: block;
+    width: 100%;
+    padding: 12px 16px;
+    background: #333; 
+    border-top: 1px solid #555;
+  }
+
+  
+  .main-article {
+    flex-direction: column;
+    align-items: flex-start; 
+  }
+
+ 
+  .grid {
+    grid-template-columns: 1fr; 
+  }
 }
 
-.btn-blue {
-  background-color: #007bff;
+
+
+
+
+@media (max-width: 480px) {
+  .navbar {
+    flex-direction: row; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+
+  .nav {
+    display: none; 
+  }
+
+  .menu-icon {
+    display: block; 
+    width: 24px; 
+    height: auto;
+    cursor: pointer;
+  }
+
+  .brand {
+    padding-left: 0; 
+  }
 }
-  
-/* Write your CSS below */
+
+
+
+#vw-badge{position:fixed;top:6px;right:6px;background:#ff4971;color:#fff;font:12px/1.2 Arial,sans-serif;padding:4px 8px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:9999}
\ No newline at end of file
