diff --git a/index.html b/index.html
index 1b8846b..cff7bd7 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
+        <img id="menu-icon" src="images/menu-icon.png" alt="Menu Icon Image" />
         <ul class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>
@@ -22,7 +23,7 @@ <h1 class="newspaper-name">Ironhack News</h1>
     <main>
       <article class="main-article">
         <div class="image">
-          <img src="/images/main-article.jpg" alt="Article 1 Image" />
+          <img src="images/main-article.jpg" alt="Article 1 Image" />
         </div>
         <div class="content">
           <h2>Main Article</h2>
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..403cb0f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,59 @@ header {
 }
   
 /* Write your CSS below */
+  #menu-icon {
+   display: none;
+  }
+
+@media screen and (max-width: 760px) {
+  .navbar {
+    flex-direction: column;
+    align-items: center;
+  }
+  .navbar li {
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+  }
+  .main-article {
+    flex-direction: column;
+    align-items: center;
+    
+  }
+  .article {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ccc;
+  margin-bottom: 20px;
+}
+.main-article .content {
+  width: 100%;
+  text-align: left;
+}
+.main-article .image {
+  width: 100%;
+}
+}
+
+@media screen and (min-width: 761px) and (max-width: 1024px) {
+.navbar{
+    justify-content: center;
+}
+.navbar li {
+  width: 100%;
+}
+.article{
+  width: 45%;
+  margin: 10px 5px;
+}
+}
+@media screen and (max-width: 480px) {
+  #menu-icon {
+   display: flex;
+   margin: auto;
+   
+  }
+  .navbar {
+    display: none;
+  }
+}
\ No newline at end of file