diff --git a/assets/scripts/home.js b/assets/scripts/home.js
index c45c922..4bcbf59 100644
--- a/assets/scripts/home.js
+++ b/assets/scripts/home.js
@@ -1,3 +1,4 @@
+'use strict';
 const controlMenu = document.querySelector('#control-menu');
 const menu = document.querySelector('#menu');
 const overlay = document.querySelector('.overlay');
diff --git a/assets/styles/components/articles/articles.css b/assets/styles/components/articles/articles.css
index e39a5b6..cdb26bf 100644
--- a/assets/styles/components/articles/articles.css
+++ b/assets/styles/components/articles/articles.css
@@ -11,8 +11,8 @@ Metodologia => BEM
     margin: 0 auto;
     display: flex;
     flex-direction: column;
-    width: 60%;
-    max-width: 500px;
+    width: 90%;
+    max-width: 360px;
     min-width: 288px;
     border-radius: 8px;
     overflow: hidden;
diff --git a/assets/styles/components/navbar/navbar-desktop.css b/assets/styles/components/navbar/navbar-desktop.css
new file mode 100644
index 0000000..645bee8
--- /dev/null
+++ b/assets/styles/components/navbar/navbar-desktop.css
@@ -0,0 +1,70 @@
+.overlay,
+.nav__item-logo,
+.nav__burger-icon {
+    display: none;
+}
+
+.nav__menu {
+    position: initial;
+    width: auto;
+    flex-direction: row;
+    justify-content: center;   
+    background-color: initial;
+}
+
+.nav__logo-wrapper {
+    width: 20%;
+    max-width: 136px;
+    max-height: 60px;
+}
+
+.nav__item {
+    margin: 0 10px;
+    padding: 0;
+}
+
+.nav__item:nth-child(3) {
+    margin-right: 0;
+    order: 3;
+}
+
+.nav__item:last-child {
+    order: 2;
+}
+
+
+.nav__item a {
+    padding: 10px 15px;
+    border-radius: 40px;
+}
+
+.nav__item:nth-child(2) a {
+    padding: 0;
+}
+
+.nav__item:nth-child(3) a {
+    font-weight: bold;
+    color: var(--color-secondary-purple);
+    border: 2px solid var(--color-secondary-purple);
+    transition: all ease-in 300ms;
+}
+
+.nav__item:nth-child(3) a:hover {
+    background-color: rgba(130, 135, 222, .2);
+}
+
+.nav__item:last-child a {
+    background-color: var(--color-primary-red);
+    color: var(--color-background);
+}
+
+.nav__item:active {
+    background-color: initial;
+    transform: scale(1.1);
+}
+
+.nav__item span {
+    display: none;
+}
+
+
diff --git a/assets/styles/components/navbar/navbar.css b/assets/styles/components/navbar/navbar.css
new file mode 100644
index 0000000..7a9ad6b
--- /dev/null
+++ b/assets/styles/components/navbar/navbar.css
@@ -0,0 +1,142 @@
+/* Estilos al menu */
+.nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 30px;
+    padding-bottom: 40px;
+    background-color: var(--color-background);
+}
+
+.nav__logo-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.nav__logo{
+    width: 100%;
+}
+
+.nav__burger-icon {
+    background-image: url("../../../icons/burger-icon.svg");
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+/* Estilos para menú */
+.nav__menu {
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: fixed;
+    left: -85%;
+    top: 0;
+    bottom: 0;
+    list-style: none;
+    background-color: #FFF;
+    transition: all ease-in-out 600ms;
+}
+
+.nav__menu-isactive {
+    left: 0;
+    transition: all ease-in-out 600ms;
+    z-index: 1;
+}
+
+.nav__item-logo {
+    width: 80%;
+    margin: 0 auto;
+    margin-bottom: 50px;
+}
+
+.nav__item--logo a {
+    display: block;
+}
+
+.nav__item {
+    /* background-color: hsla(237, 58%, 69%, 0.4); */
+    display: flex;
+    align-items: center;
+    height: auto;
+    padding: 3px 20px;
+    margin-bottom: 15px;
+    gap: 0 10px;
+    position: relative;
+}
+
+.nav__item-isactive {
+    background-color: hsla(237, 58%, 69%, 0.4);
+}
+
+.nav__item-isactive::before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 5px;
+    background-color: var(--color-secondary-purple);
+}
+
+.nav__item-tab {
+    display: block;
+}
+
+.nav__item:active {
+    background-color: hsla(237, 58%, 69%, 0.4);
+}
+
+.nav__item a {
+    font-size: 1.4rem;
+    font-weight: 500;
+    text-decoration: none;
+    color: #000;
+}
+
+.nav__item span {
+    display: block;
+    width: 16px;
+    height: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.nav__item:nth-child(2) span {
+    background-image: url('../../../icons/articles-icon.svg');
+}
+
+.nav__item:nth-child(3) span {
+    background-image: url('../../../icons/login-icon.svg');
+}
+
+.nav__item:nth-child(4) span {
+    background-image: url('../../../icons/write-icon.svg');
+}
+
+/* Estilos para la visualizacion del menu */
+.overlay {
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: all 400ms linear;
+}
+
+.overlay__is-active {
+    opacity: 1;
+    border-radius: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.stop-scrolling {
+    height: 100vh;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/assets/styles/pages/home/home-desktop.css b/assets/styles/pages/home/home-desktop.css
index e69de29..455a0a4 100644
--- a/assets/styles/pages/home/home-desktop.css
+++ b/assets/styles/pages/home/home-desktop.css
@@ -0,0 +1,63 @@
+.hero__img-wrapper {
+    flex-basis: 50%;
+    max-width: 450px;
+}
+
+/* Estilos para la seccion de los post mas populares */
+.popular-posts {
+    width: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 60px auto;
+    padding: 0;
+    text-align: initial;
+    background-color: initial;
+}
+
+.popular-posts__title {
+    width: 30%;
+    margin-bottom: 0;
+}
+
+.popular-cards__container {
+    width: auto;
+    padding: 15px 0;
+    gap: 0;
+    overflow-x: hidden;
+    scroll-snap-type: initial;
+}
+
+.popular-cards__container > .card {
+    width: auto;
+    max-width: 280px;
+}
+
+.popular-cards__container .card:not(.card:last-child) {
+    min-width: initial;
+    width: 80px;
+    transition: all ease-in-out 400ms;
+    
+}
+
+.popular-cards__container .card:hover:not(.card:last-child) {
+    width: 280px;
+}
+
+/* Esta regla se pondra en los estilos de la card del componenete */
+.popular-cards__container .card:not(.card:last-child) .profile {
+    min-width: 27px;
+}
+
+.popular-cards__container .card:not(.card:last-child) .card__author {
+    opacity: 0;
+    transition: all ease-in 400ms;
+}
+
+.popular-cards__container .card:hover:not(.card:last-child)  .card__author{
+    opacity: 1;
+}
+
+/* .popular-cards__container .card:hover:not(.card:last-child) ~ .card:last-child {
+    right: -200px;
+} */
diff --git a/assets/styles/pages/home/home-tablet.css b/assets/styles/pages/home/home-tablet.css
new file mode 100644
index 0000000..e3836ff
--- /dev/null
+++ b/assets/styles/pages/home/home-tablet.css
@@ -0,0 +1,51 @@
+/* Estilos para el header */
+
+.hero {
+    flex-direction: row-reverse;
+    text-align: initial;
+    justify-content: space-between;
+}
+
+.hero__img-wrapper {
+    flex-basis: 40%;
+    max-width: 400px;
+    margin: 0;
+}
+
+.hero__text-container {
+    flex-basis: 50%;
+}
+
+
+.hero__CTA {
+     margin: 0;
+     margin-bottom: 10px;
+}
+
+.hero__secundary-CTA {
+    margin-top: 0;
+}
+
+.hero__button {
+    margin: 0;
+}
+
+/* Estilos para la seccion de posts mas recientes */
+
+.recent__posts {
+    width: 90%;
+    margin: 0 auto;
+}
+
+.recent-cards__container {
+    grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
+    gap: 30px 10px;
+    justify-content: center;
+}
+
+.CTA__button {
+    width: 40%;
+}
+
+
+
diff --git a/assets/styles/pages/home/home.css b/assets/styles/pages/home/home.css
index a7c0bad..799e04b 100644
--- a/assets/styles/pages/home/home.css
+++ b/assets/styles/pages/home/home.css
@@ -6,158 +6,20 @@
 5. Otros
 Metodologia => BEM
 */
+body {
+    background-color: var(--color-background);
+}
 
 /* Estilos al header */
 .header {
-    min-width: 320px;
-    padding: 0 20px;
+    width: 90%;
+    margin: 0 auto;
+    min-width: 310px;
+    /* padding: 0 20px; */
     padding-bottom: 30px;
     background-color: var(--color-background);
 }
 
-/* Estilos al menu */
-.nav {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: 30px;
-    padding-bottom: 40px;
-    background-color: var(--color-background);
-}
-
-.nav__logo-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-.nav__logo{
-    width: 100%;
-}
-
-.nav__burger-icon {
-    background-image: url("../../../icons/burger-icon.svg");
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-}
-
-/* Estilos para menú */
-.nav__menu {
-    width: 65%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: fixed;
-    left: -85%;
-    top: 0;
-    bottom: 0;
-    list-style: none;
-    background-color: #FFF;
-    transition: all ease-in-out 600ms;
-}
-
-.nav__menu-isactive {
-    left: 0;
-    transition: all ease-in-out 600ms;
-    z-index: 1;
-}
-
-.nav__item-logo {
-    width: 80%;
-    margin: 0 auto;
-    margin-bottom: 50px;
-}
-
-.nav__item--logo a {
-    display: block;
-}
-
-.nav__item {
-    /* background-color: hsla(237, 58%, 69%, 0.4); */
-    display: flex;
-    align-items: center;
-    height: auto;
-    padding: 3px 20px;
-    margin-bottom: 15px;
-    gap: 0 10px;
-    position: relative;
-}
-
-.nav__item-isactive {
-    background-color: hsla(237, 58%, 69%, 0.4);
-}
-
-.nav__item-isactive::before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    height: 100%;
-    width: 5px;
-    background-color: var(--color-secondary-purple);
-}
-
-.nav__item-tab {
-    display: block;
-}
-
-.nav__item:active {
-    background-color: hsla(237, 58%, 69%, 0.4);
-}
-
-.nav__item a {
-    font-size: 1.4rem;
-    font-weight: 500;
-    text-decoration: none;
-    color: #000;
-}
-
-.nav__item span {
-    display: block;
-    width: 16px;
-    height: 16px;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.nav__item:nth-child(2) span {
-    background-image: url('../../../icons/articles-icon.svg');
-}
-
-.nav__item:nth-child(3) span {
-    background-image: url('../../../icons/login-icon.svg');
-}
-
-.nav__item:nth-child(4) span {
-    background-image: url('../../../icons/write-icon.svg');
-}
-
-/* Estilos para la visualizacion del menu */
-.overlay {
-    opacity: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.5);
-    transition: all 400ms linear;
-}
-
-.overlay__is-active {
-    opacity: 1;
-    border-radius: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.stop-scrolling {
-    height: 100vh;
-    overflow: hidden;
-}
-
 /* Estilos para el hero */
 .hero {
     display: flex;
@@ -168,11 +30,11 @@ Metodologia => BEM
 
 .hero__img-wrapper {
     width: 100%;
-    margin-bottom: 30px;
 }
 
 .hero__img {
     width: 100%;
+    height: 100%;
 }
 
 .hero__CTA {
@@ -190,11 +52,15 @@ Metodologia => BEM
 }
 
 .hero__button {
-    min-width: 200px;
+    display: block;
     border-radius: 40px;
-    padding: 10px 20px;
+    width: 200px;
+    height: 45px;
     text-decoration: none;
+    text-align: center;
     font-size: 1.4rem;
+    line-height: 45px;
+    margin: 0 auto;
     font-weight: 500;
     background-color: var(--color-primary-red);
     color: #FFF;
@@ -246,7 +112,7 @@ Metodologia => BEM
     min-width: 320px;
     text-align: center;
     padding: 33px 0;
-    background-color: var(--color-background);
+    /* background-color: var(--color-background); */
 }
 
 .recent-posts__title {
diff --git a/views/pages/all-articles.php b/views/pages/all-articles.php
index 14af884..9663bb4 100644
--- a/views/pages/all-articles.php
+++ b/views/pages/all-articles.php
@@ -1,10 +1,13 @@
 <?php defined('NABU') || exit() ?>
 <?php $head_title = 'Muro' ?>
 <?php $styles     = array(
+    'components/navbar/navbar.css',
     'pages/all-articles/all-articles.css',
     'components/articles/articles.css',
+    'components/footer/footer.css',
 ) ?>
 <?php $desktop_styles = array(
+    array('components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
     array('pages/all-articles/all-articles-desktop.css', 'attributes' => ''),
 ) ?>
 <?php $scripts = array() ?>
diff --git a/views/pages/home.php b/views/pages/home.php
index 52a8f3f..d32ab90 100644
--- a/views/pages/home.php
+++ b/views/pages/home.php
@@ -1,30 +1,40 @@
 <?php defined('NABU') || exit() ?>
 <?php $head_title = NABU_DEFAULT['website-name'] ?>
+<!-- Estilos cargados -->
 <?php $styles     = array(
+    'components/navbar/navbar.css',
     'components/articles/articles.css',
     'components/footer/footer.css',
     'pages/home/home.css',
 ) ?>
+<!-- Estilos para el responsive design -->
 <?php $desktop_styles = array(
-    array('pages/home/home-desktop.css', 'attributes' => 'media="(max-width: 720px)"'),
+    array('components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
+    array('pages/home/home-tablet.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
+    array('pages/home/home-desktop.css', 'attributes' => 'media="screen and (min-width: 1024px)"'),
 ) ?>
+<!-- Archivos de javascript -->
 <?php $scripts = array(
     'home.js',
 ) ?>
+
+<!-- Componente head -->
 <?php require_once 'views/components/head.php' ?>
 
 <header class="header">
     <?php require_once 'views/components/navbar.php' ?>
     <div class="hero">
         <picture class="hero__img-wrapper">
-            <source srcset="<?= NABU_DIRECTORY['images'] ?>/hero-desktop.png" media="(min-width: 600px)">
+            <source srcset="<?= NABU_DIRECTORY['images'] ?>/hero-desktop.png" media="(min-width: 500px)">
             <img src="<?= NABU_DIRECTORY['images'] ?>/hero.png" alt="Imagen inspiración en cualquier momento y cualquier lugar" class="hero__img">
         </picture>
-        <h1 class="hero__CTA">Lee, inspírate y escribe</h1>
-        <p class="hero__secundary-CTA">
-            Lo mejor que puedes compartir es tu conocimiento.
-        </p>
-        <a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
+        <div class="hero__text-container">
+            <h1 class="hero__CTA">Lee, inspírate y escribe</h1>
+            <p class="hero__secundary-CTA">
+                Lo mejor que puedes compartir es tu conocimiento.
+            </p>
+            <a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
+        </div>
     </div>
 </header>