diff --git a/tienda_ilusion/don_confiao/static/css/main_menu.css b/tienda_ilusion/don_confiao/static/css/main_menu.css
index 63edf8d..7241d01 100644
--- a/tienda_ilusion/don_confiao/static/css/main_menu.css
+++ b/tienda_ilusion/don_confiao/static/css/main_menu.css
@@ -1,33 +1,37 @@
-
-nav#main_menu ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 1em;
-}
-
-nav#main_menu li {
-  margin-right: 20px;
-}
-
 nav#main_menu a {
   text-decoration: none;
-  color: #333;
-  background-color: #f0f0f0;
+  font-weight: bold;
+  color: white;
+  background-color: #178E79 ;
   padding: 10px 20px;
-  border: none;
+  min-width: 90%;
+  text-align: center;
+  border: solid #178E79 4px;
   border-radius: 5px;
   cursor: pointer;
 }
 
 nav#main_menu a:hover {
-  background-color: #ccc;
-  color: #666;
+  transition: ease-in-out 0.2s;
+  background-color: #7BDCB5;
+  color: #178E79;
 }
 
 nav#main_menu a:active {
   background-color: #aaa;
   color: #444;
 }
+
+nav#main_menu {
+  display: inline;
+}
+
+li{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.page_title {
+  color: #04A1E4
+}
diff --git a/tienda_ilusion/don_confiao/static/img/recreo_logo.png b/tienda_ilusion/don_confiao/static/img/recreo_logo.png
new file mode 100644
index 0000000..48a13e0
Binary files /dev/null and b/tienda_ilusion/don_confiao/static/img/recreo_logo.png differ
diff --git a/tienda_ilusion/don_confiao/templates/don_confiao/base.html b/tienda_ilusion/don_confiao/templates/don_confiao/base.html
index 0a25775..f7a1a77 100644
--- a/tienda_ilusion/don_confiao/templates/don_confiao/base.html
+++ b/tienda_ilusion/don_confiao/templates/don_confiao/base.html
@@ -1,14 +1,17 @@
+{% load static %}
+
 <!DOCTYPE html>
-<html>
+<html lang="en" class="h-full">
     <head>
         <title>Don Confiao - Tienda la Ilusión</title>
     </head>
-    <body>
-        <div id="menu">
+    <body class="flex h-full w-full">
+        <div id="menu" class="h-full w-2/12 border bg-green-400 max-h-screen overflow-auto">
             {% include 'don_confiao/menu.html' %}
         </div>
-        <div id="content">
+        <div id="content" class="w-10/12 h-screen max-h-full overflow-auto">
             {% block content %} {% endblock %}
         </div>
     </body>
+    <script src="https://cdn.tailwindcss.com/"></script> 
 </html>
diff --git a/tienda_ilusion/don_confiao/templates/don_confiao/menu.html b/tienda_ilusion/don_confiao/templates/don_confiao/menu.html
index 383fff8..9f418cb 100644
--- a/tienda_ilusion/don_confiao/templates/don_confiao/menu.html
+++ b/tienda_ilusion/don_confiao/templates/don_confiao/menu.html
@@ -1,12 +1,17 @@
 {% load static %}
 <link rel="stylesheet" type="text/css" href="{% static 'css/main_menu.css' %}">
-<nav id="main_menu">
-    <ul>
-        <li><a href='/don_confiao/comprar'>Comprar</a></li>
-        <li><a href='/don_confiao/compras'>Compras</a></li>
-        <li><a href='/don_confiao/lista_productos'>Productos</a></li>
-        <li><a href='/don_confiao/importar_productos'>Importar Productos</a></li>
-        <li><a href='/don_confiao/cuadrar_tarro'>Cuadrar tarro</a></li>
-        
-    </ul>
-</nav>
+
+<div class="h-full flex flex-col justify-around shadow hover:shadow-lg">
+    <img class="w-full px-12" src="{% static 'img/recreo_logo.png' %}" alt="Recreo">
+    <nav id="main_menu">
+        <ul class="flex flex-col m-0 p-0 justify-center shadow hover:shadow-lg gap-y-12 items-center drop-shadow-lg">
+            <li><a href='/don_confiao/comprar' >Comprar</a></li>
+            <li><a href='/don_confiao/compras'>Compras</a></li>
+            <li><a href='/don_confiao/lista_productos'>Productos</a></li>
+            <li><a href='/don_confiao/importar_productos'>Importar Productos</a></li>
+            <li><a href='/don_confiao/cuadrar_tarro'>Cuadrar tarro</a></li>
+        </ul>
+    </nav>
+    <p id="page_title" class="text-center decoration-solid  font-mono font-bold text-lg page_title">Don Confiao - Tienda la Ilusión</p>
+</div>
+<script src="https://cdn.tailwindcss.com/"></script>
diff --git a/tienda_ilusion/don_confiao/templates/don_confiao/purchase.html b/tienda_ilusion/don_confiao/templates/don_confiao/purchase.html
index f17caf8..4386551 100644
--- a/tienda_ilusion/don_confiao/templates/don_confiao/purchase.html
+++ b/tienda_ilusion/don_confiao/templates/don_confiao/purchase.html
@@ -1,24 +1,35 @@
 {% extends 'don_confiao/base.html' %}
 {% block content %}
 {% load static %}
-<form id="complete_form_purchase" method="POST">
-  {% csrf_token %}
-  {{ sale_form }}
-  {{ linea_formset.management_form }}
-  <div id="formset-container">
-    {% for form in linea_formset %}
-      <div class="form-container">
-        <table style="border: solid 1px blue; margin: 10px">
-          {{ form.as_table }}
-        </table>
+<div class="flex h-full">
+  <div class="h-full w-10/12 flex flex-col p-5">
+    <form id="complete_form_purchase" method="POST" class="h-10/12 w-full max-h-full overflow-auto">
+      {% csrf_token %}
+      {{ linea_formset.management_form }}
+      <div id="formset-container" class="w-full">
+        {% for form in linea_formset %}
+        <div class="form-container flex justify-center ">
+          <table class="w-3/4 my-5 shadow-inner" style="border: solid 1px #178E79;">
+            {{ form.as_table }}
+          </table>
+          </div>
+        {% endfor %}
       </div>
-    {% endfor %}
+    </form>
+    <div class="h-2/12 flex justify-center">
+      <button id="add_line" type="button" class="bg-yellow-400 shadow hover:shadow-lg py-2 px-5 rounded-full font-bold hover:bg-violet-200 ease-in duration-150" onclick="add_line">Añadir Linea</button>
+    </div>
   </div>
-  <button id="add_line" type="button" onclick="add_line">Añadir Linea</button>
-  {{ summary_form }}
-  <br/><button name="form" type="submit" >Comprar</button>
-  <script src="{% static 'js/add_line.js' %}"></script>
-  <script src="{% static 'js/sale_summary.js' %}"></script>
-  <script src="{% static 'js/calculate_subtotal_line.js' %}"></script>
-</form>
+  <div class="h-full w-3/12 bg-green-400 p-5 shadow hover:shadow-lg flex flex-col gap-y-3 font-semibold justify-around">
+    <p id="sale_resume_title" class="text-center decoration-solid font-mono font-bold text-xl page_title">Resumen de Venta</p>
+    {{ sale_form }}
+    {{ summary_form }}
+    <button class="font-bold my-10 py-2 px-4 rounded-full bg-yellow-400 shadow hover:shadow-lg hover:bg-violet-200 ease-in duration-150" name="form" type="submit" >Comprar</button>
+  </div>
+</div>
+
+<script src="https://cdn.tailwindcss.com/"></script>
+<script src="{% static 'js/add_line.js' %}"></script>
+<script src="{% static 'js/sale_summary.js' %}"></script>
+<script src="{% static 'js/calculate_subtotal_line.js' %}"></script>
 {% endblock %}
