diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..0bf51b5
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1b8846b..8da5101 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <body>
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
+      <img id="burger-menu" src="images/menu-icon.png" alt="Burger menu icon for navbar" />
       <nav>
         <ul class="navbar">
           <li><a href="#">Home</a></li>
@@ -28,8 +29,7 @@ <h1 class="newspaper-name">Ironhack News</h1>
           <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
+            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,
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..c96c252 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -175,5 +175,99 @@ header {
 .btn-blue {
   background-color: #007bff;
 }
+
+#burger-menu {
+  display: none;
+}
   
 /* Write your CSS below */
+
+/* Mobile screens */
+@media (max-width: 760px) {
+
+  .navbar {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+    box-sizing: border-box;
+  }
+
+  .main-article {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-article .image, .main-article .content {
+    width: 100%;
+  }
+
+  .articles-container {
+    display: flex;
+    flex-direction: column;
+    /* padding: 10px; */
+  }
+
+  .article {
+    width: 100%;
+  }
+}
+
+/* Tablet screens */
+@media (min-width: 760px) and (max-width: 1024px) {
+
+  .navbar {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .navbar li {
+    width: auto;
+    flex: 1;
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  .main-article {
+    display: flex;
+    justify-content: stretch;
+  }
+
+  .articles-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .article {
+    width: 49%;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+  }
+}
+
+/* Small mobile screens */
+@media (max-width: 480px) {
+
+  .navbar li {
+    display: none;
+  }
+
+  #burger-menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10%;
+  }
+
+  #burger-menu img {
+    width: auto;
+    margin: 0 auto;;
+  }
+
+}
\ No newline at end of file
