diff --git a/content/categories/index.xml b/content/categories/index.xml
index 7723891..32f2dd2 100644
--- a/content/categories/index.xml
+++ b/content/categories/index.xml
@@ -1,8 +1,11 @@
 <category>
-    <title>Owlcode.tech.</title>
-	<description>
-	</description>
+    <title>Owlcode.tech</title>
 	<priority>0</priority>
 	<menu_text><img alt="Principio" class="index-image-menu" src="/img/owlcode_tech.webp?v=1"/></menu_text>
+    <description>
+        <p>Contrata la mejor infraestructura web para tu empresa.</p>
+        <p>Contacta con nosotros.</p>
+    </description>
+    <img src="/img/future.webp"/>
 	<slug>index</slug>
 </category>
diff --git a/lib/OwlcodeTech/Categories.pm b/lib/OwlcodeTech/Categories.pm
index 08836a0..d4462cf 100644
--- a/lib/OwlcodeTech/Categories.pm
+++ b/lib/OwlcodeTech/Categories.pm
@@ -32,6 +32,7 @@ sub Retrieve ($self) {
         warn "Bad file $category_file, omiting...", next
           if !-f $category_file || $category_file !~ /\.xml$/;
         my $dom = Mojo::DOM->new( $category_file->slurp_utf8 );
+        $dom->xml(1);
         defined( my $title = $dom->at(':root > title')->text )
           or die "Missing title at $category_file.";
         defined( my $description = $dom->at(':root > description')->content )
@@ -44,6 +45,12 @@ sub Retrieve ($self) {
           or die "Missing priority at $category_file";
         my $attributes = $self->_GetAttributes( $dom, $category_file );
         my $parent_tag = $dom->at(':root > parent');
+        my $image_tag = $dom->at(':root > img');
+        my $image;
+        if (defined $image_tag) {
+            $image = $image_tag->attr('src');
+            say $image;
+        }
         my $parent;
 
         if ( defined $parent_tag ) {
@@ -60,6 +67,11 @@ sub Retrieve ($self) {
                 ? ( parent => $parent )
                 : ()
             ),
+            (
+                (defined $image)
+                ? ( image => $image )
+                : ()
+            ),
             attributes => $attributes,
         };
         $cached_categories->{$slug} = $category;
diff --git a/public/css/styles.css b/public/css/styles.css
index 2feed7b..436b7db 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -8,6 +8,20 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
+  body div.title-image {
+    position: relative;
+    max-height: 80vh;
+    overflow: hidden; }
+    body div.title-image img {
+      min-width: 100%; }
+    body div.title-image div.text-title {
+      color: coral;
+      font-size: 4.5vh;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
+      transform: translate(-50%, -50%); }
   body p, body h1, body h2, body h3, body h4, body a {
     font-family: 'arial'; }
   body div.site-wrapper {
@@ -56,13 +70,13 @@ body {
     body div.page-contents div.description {
       background: ghostwhite;
       margin-top: 60px;
+      font-size: 30px;
       word-wrap: break-word;
-      padding: 1%;
-      margin-left: 3%;
-      margin-right: 3%;
       margin-bottom: 1%; }
       body div.page-contents div.description input {
         display: block; }
+      body div.page-contents div.description div.content {
+        padding: 1%; }
       body div.page-contents div.description div.suscribirse-rss img {
         max-height: 300px; }
       body div.page-contents div.description div.articles {
@@ -131,8 +145,7 @@ body {
           height: 40px; }
     body div.page-contents nav > a.menu-expand > img {
       width: 30px;
-      height: 30px;
-      margin-top: 15px; }
+      height: 30px; }
     body div.page-contents nav > a > img.index-image-menu {
       vertical-align: middle;
       width: 50px;
@@ -162,35 +175,40 @@ body {
         body div.page-contents nav a.selected {
           background: azure;
           color: #5C8CED; }
-      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 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 {
+      z-index: 1;
       position: fixed;
       display: flex;
       width: 100%;
       background: #5C8CED;
       height: 60px; }
       body div.page-contents nav.mobile-shortcuts a.go-to-index {
-        height: 99%;
-        background: ghostwhite;
-        border: solid 1px black; }
-      body div.page-contents nav.mobile-shortcuts a {
         height: 100%;
-        width: 16.6666666667%; }
+        background: ghostwhite; }
+        body div.page-contents nav.mobile-shortcuts a.go-to-index:hover {
+          background: azure; }
+      body div.page-contents nav.mobile-shortcuts a {
+        width: 16.66667%; }
+      body div.page-contents nav.mobile-shortcuts a.menu-expand {
+        padding-top: calc((60px - 30px) / 2);
+        padding-bottom: calc((60px - 30px) / 2);
+        height: 30px; }
       body div.page-contents nav.mobile-shortcuts div {
-        width: 66.6666666667%; }
+        width: 66.66667%; }
     body div.page-contents nav.mobile-foldable {
       display: none;
       background: #5C8CED;
       color: azure; }
       body div.page-contents nav.mobile-foldable a {
-        display: block; }
+        display: flex;
+        height: 60px;
+        align-items: center; }
     body div.page-contents nav.mobile-foldable.show {
       display: block; }
     body div.page-contents h1 {
@@ -246,3 +264,4 @@ body {
       margin-left: 3%; }
     body div.page-contents div.description div.articles a:nth-child(3n+1) {
       margin-left: 0%; } }
+
diff --git a/public/css/styles.scss b/public/css/styles.scss
index 025ada7..95f9b55 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -14,6 +14,23 @@ html {
 }
 
 body {
+  div.title-image {
+      position: relative;
+      max-height: 80vh;
+      overflow: hidden;
+      img {
+          min-width: 100%;
+      }
+      div.text-title {
+          color: coral;
+          font-size: 4.5vh;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
+          transform: translate(-50%, -50%);
+      }
+  }
   p, h1, h2, h3, h4, a {
     font-family: 'arial';
   }
@@ -87,9 +104,13 @@ body {
     div.description {
         background: ghostwhite;
         margin-top: 60px;
+        font-size: 30px;
       input {
         display: block;
       }
+      div.content {
+          padding: 1%;
+      }
 
       word-wrap: break-word;
 
@@ -99,9 +120,6 @@ body {
         }
       }
 
-      padding: 1%;
-      margin-left: 3%;
-      margin-right: 3%;
       margin-bottom: 1%;
 
       div.articles {
@@ -199,7 +217,6 @@ body {
     nav > a.menu-expand > img {
       width: 30px;
       height: 30px;
-      margin-top: 15px;
     }
 
     nav > a > img.index-image-menu {
@@ -247,7 +264,6 @@ body {
       }
 
       a.menu-expand {
-        padding-bottom: 9px;
 
         .open-menu-icon-hover {
           display: none;
@@ -266,22 +282,30 @@ body {
     }
 
     nav.mobile-shortcuts {
+      z-index: 1;
       position: fixed;
       display: flex;
       width: 100%;
       background: $background_div;
       height: 60px;
       a.go-to-index {
-        height: 99%;
+        height: 100%;
         background: ghostwhite;
-        border: solid 1px black;
+        &:hover {
+            background: $color_div;
+        }
       }
 
       a {
-        height: 100%;
         width: (100% / 6);
       }
 
+      a.menu-expand {
+          padding-top: calc((60px - 30px) / 2);
+          padding-bottom: calc((60px - 30px) / 2);
+          height: 30px;
+      }
+
       div {
         width: 100% * 4 / 6;
       }
@@ -295,7 +319,9 @@ body {
       a {
         //background: $color_div;
         //color: $background_div;
-        display: block;
+        display: flex;
+        height: 60px;
+        align-items: center;
       }
     }
 
diff --git a/public/img/future.webp b/public/img/future.webp
new file mode 100644
index 0000000..37117ad
Binary files /dev/null and b/public/img/future.webp differ
diff --git a/public/img/hamburguer-menu-azure.webp b/public/img/hamburguer-menu-azure.webp
new file mode 100644
index 0000000..2ffed23
Binary files /dev/null and b/public/img/hamburguer-menu-azure.webp differ
diff --git a/public/img/hamburguer-menu-owlblue.webp b/public/img/hamburguer-menu-owlblue.webp
new file mode 100644
index 0000000..380a4ba
Binary files /dev/null and b/public/img/hamburguer-menu-owlblue.webp differ
diff --git a/templates/not_found.html.ep b/templates/not_found.html.ep
index 32228f8..346e9cb 100644
--- a/templates/not_found.html.ep
+++ b/templates/not_found.html.ep
@@ -1,6 +1,6 @@
 % use Mojo::Util;
 % use OwlcodeTech::Categories;
-% layout 'default', current_category_slug => undef, categories => OwlcodeTech::Categories->new->Retrieve;
+% layout 'default', current_category_slug => undef, categories => OwlcodeTech::Categories->new->Retrieve, description_og => 'Esta página no existe, todavía...';
 <div class="description">
 	<h2>Esta página no existe.</h2>
 	<p>Si un enlace te ha llevado aquí, reporta el error a <a href="mailto:contact@owlcode.tech">los administradores</a>.</p>
diff --git a/templates/page/_desktop_menu.html.ep b/templates/page/_desktop_menu.html.ep
index 33c4013..7298c62 100644
--- a/templates/page/_desktop_menu.html.ep
+++ b/templates/page/_desktop_menu.html.ep
@@ -1,11 +1,11 @@
+% use Data::Dumper;
 % my $categories = stash 'categories';
-% my $current_category_slug = stash 'current_category_slug';
+% my $current_category = stash 'current_category';
 <nav class="desktop"><%
 my @sorted_categories = sort {
         $categories->{$a}{priority} <=> $categories->{$b}{priority} 
 } keys %$categories;
 my $target_category_slug = $current_category_slug;
-my $current_category = $categories->{$current_category_slug};
 if (defined $current_category) {
     my $possible_parent = $current_category->{parent};
     if (defined $possible_parent && defined $categories->{$possible_parent}) {
diff --git a/templates/page/_mobile_menu.html.ep b/templates/page/_mobile_menu.html.ep
index bfa88d9..4c8e8e4 100644
--- a/templates/page/_mobile_menu.html.ep
+++ b/templates/page/_mobile_menu.html.ep
@@ -3,8 +3,8 @@
     <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/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
-        <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
+        <img class="open-menu-icon" src="/img/hamburguer-menu-azure.webp" alt="Expandir el menú."/>
+        <img class="open-menu-icon-hover" src="/img/hamburguer-menu-owlblue.webp" alt="Expandir el menú."/>
     </a>
 </nav>
 <nav class="mobile-foldable" id="mobile-foldable"><% 
diff --git a/templates/page/index.html.ep b/templates/page/index.html.ep
index 0d44a19..e73e1ef 100644
--- a/templates/page/index.html.ep
+++ b/templates/page/index.html.ep
@@ -9,28 +9,40 @@
 %
 % my $description_og = '<div>'.$current_category->{description}.'</div>';
 % $description_og = Mojo::DOM->new($description_og)->all_text;
-% layout 'default', current_category_slug => $current_category->{slug}, description_og => $description_og;
+% layout 'default', current_category => $current_category, description_og => $description_og;
 % title $current_category->{title};
 <div class="description">
-	<h1><%= $current_category->{title} %></h1>
-	<%== $current_category->{description} %>
+    <div class="title-image">
+% if (defined $current_category->{image}) {
+    <img alt="Portada de la categoría: <%= $current_category->{title} %>" src="<%=$current_category->{image}%>"/>
+        <div class="text-title">
+            <h1><%= $current_category->{title} %></h1>
+            <%== $current_category->{description} %>
+        </div>
+% } else {
+    <h1><%= $current_category->{title} %></h1>
+    <%== $current_category->{description} %>
+% }
+    </div>
+    <div class="content">
 % my $children_categories = $current_category->{children};
 % my $attributes = $current_category->{attributes};
 % if (@$children_categories || %$attributes) {
-    <h2>Quizás te interese.</h2>
+        <h2>Quizás te interese.</h2>
 %     for my $child_category (@$children_categories) {
-      <p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p>
+          <p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p>
 %     }
 %     for my $attribute_slug (keys %$attributes) {
 %         my $attribute = $attributes->{$attribute_slug};
-      <p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p>
+          <p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p>
 %     }
 % }
 % my ($category_posts) = OwlcodeTech::Posts->new->RetrieveAllPostsForCategory($current_category->{slug});
 %= include 'page/_list_posts', posts => $category_posts; 
-	<h2>Suscribete a esta categoría.</h2>
+        <h2>Suscribete a esta categoría.</h2>
 
-	<a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
-		<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
-	</a>
+        <a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
+            <img src="/img/rss.svg" alt="Icono de suscripción rss"/>
+        </a>
+    </div>
 </div>