diff --git a/public/css/styles.css b/public/css/styles.css
index 7e44880..6255023 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -118,7 +118,7 @@ body {
         body div.page-contents div.description a.suscribe-category-rss img {
           width: 40px;
           height: 40px; }
-    body div.page-contents nav > a > img.open-menu-icon {
+    body div.page-contents nav > a.menu-expand > img {
       width: 30px;
       height: 30px;
       padding-top: 15px; }
@@ -154,6 +154,12 @@ body {
           color: blueviolet; }
       body div.page-contents nav a.menu-expand {
         padding-bottom: 9px; }
+        body div.page-contents nav a.menu-expand .open-menu-icon-hover {
+          display: none; }
+        body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover {
+          display: block; }
+        body div.page-contents nav a.menu-expand:hover .open-menu-icon {
+          display: none; }
     body div.page-contents nav.mobile-shortcuts {
       position: fixed;
       display: flex;
@@ -162,9 +168,9 @@ body {
       height: 60px; }
       body div.page-contents nav.mobile-shortcuts a {
         height: 100%;
-        width: 16.6666666667%; }
+        width: 16.66667%; }
       body div.page-contents nav.mobile-shortcuts div {
-        width: 66.6666666667%; }
+        width: 66.66667%; }
     body div.page-contents nav.mobile-foldable {
       display: none;
       background: blueviolet;
@@ -214,3 +220,4 @@ body {
     body div.page-contents div.description div.articles a {
       width: 45%;
       margin-left: 5%; } }
+
diff --git a/public/css/styles.scss b/public/css/styles.scss
index 30933b0..3f32300 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -158,7 +158,7 @@ body {
 				}
 			}
 		}
-		nav > a > img.open-menu-icon {
+		nav > a.menu-expand > img {
 			width: 30px;
 			height: 30px;
 			padding-top: 15px;
@@ -202,6 +202,17 @@ body {
 			}
 			a.menu-expand {
 				padding-bottom: 9px;
+                .open-menu-icon-hover {
+                    display: none;
+                }
+                &:hover {
+                    .open-menu-icon-hover {
+                        display: block;
+                    }
+                    .open-menu-icon {
+                        display: none;
+                    }
+                }
 			}
 		}
 
diff --git a/public/img/hamburger-menu-purple.png b/public/img/hamburger-menu-purple.png
new file mode 100644
index 0000000..7d131af
Binary files /dev/null and b/public/img/hamburger-menu-purple.png differ
diff --git a/public/img/hamburger-menu-yellow.png b/public/img/hamburger-menu-yellow.png
new file mode 100644
index 0000000..bdb2abb
Binary files /dev/null and b/public/img/hamburger-menu-yellow.png differ
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 7730e24..f4a3299 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -31,7 +31,10 @@
 		<nav class="mobile-shortcuts">
 			<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
 			<div></div>
-			<a href="#mobile-foldable" class="menu-expand"><img class="open-menu-icon" src="/img/menu.png" alt="Expandir el menú."/></a>
+			<a href="#mobile-foldable" class="menu-expand">
+                <img class="open-menu-icon" src="img/hamburger-menu-yellow.png" alt="Expandir el menú."/>
+                <img class="open-menu-icon-hover" src="img/hamburger-menu-purple.png" alt="Expandir el menú."/>
+            </a>
 		</nav>
 		<nav class="mobile-foldable" id="mobile-foldable"><% 
 			   my $first = 1;